보간법(이중 중괄호), v-bind 디렉티브와 같은 데이터 출력과 관련된 중요한 기능은 거의 다 배웠고, 메서드를 호출한 결과를 출력할 수도 있다.
하나 더 배워야 할 디렉티브가 있다.
const app = Vue.createApp({
data(){
return {
courseGoalA: "Finish the course and learn Vue!",
courseGoalB: "<h2>Master vue and build amazing apps!</h2>",
}
},
methods: {
outputGoal() {
const randomNumber = Math.random();
if(randomNumber < 0.5) {
return this.courseGoalA;
} else {
return this.courseGoalB;
}
},
})
위 코드에서,
coureGoalB가 단순히 string이 아니라, h2태그를 더한 HTML코드라고 해보자. 애플리케이션에서 실제로 이런 일이 있을 수 있다.
출력할 데이터를 데이터베이스에서 가져왔더니 가져온 데이터가 HTML코드인 경우.
만약 이 h2태그를 더한 HTML코드를 보간법(이중 중괄호)을 이용하여 출력한다면, 아래와 같이 HTML요소로 인식되지 않고 그냥 일반 텍스트로 출력된다. (이중 중괄호는 데이터를 HTML이 아닌, 일반 텍스트로 해석하기 때문.)
HTML코드를 '일반 텍스트'가 아니라 이걸 실제 html로 출력을 위한 디렉티브 : v-html
* v-bind: HTML 속성의 값을 바인딩하거나 설정하는데 사용.
* v-html: HTML요소의 여닫는 태그 사이에 설정하여 Vue에게 해당 콘텐츠는 이중 중괄호를 사용했을때 처럼 일반 텍스트로 출력하면 안되고 HTML로 인식해야한다는 점을 알린다.
즉, 이중 중괄호를 사용하는 것이 아니라, 큰 따옴표 사이("")에 입력해서 v-html에 전달할 값은 data의 courseGoalB를 입력하거나, outputGoal 메서드를 호출해서 얻은 값 등 string을 요구한다.
<!DOCTYPE html>
<html lang="en">
<!--head 생략-->
<body>
<header>
<h1>Vue Course Goals</h1>
</header>
<section id="user-goal">
<h2>My Course Goal</h2>
<p v-html="outputGoal()"></p>
</section>
</body>
</html>
app.js
const app = Vue.createApp({
data(){
return {
courseGoalA: "Finish the course and learn Vue!",
courseGoalB: "<h2>Master vue and build amazing apps!</h2>",
}
},
methods: {
outputGoal() {
const randomNumber = Math.random();
if (randomNumber < 0.5) {
return this.courseGoalA;
} else {
return this.courseGoalB;
}
},
},
});
app.mount('#user-goal')
새로고침해서 outputGoal()의 값이 courseGoalB의 값일 경우,
일반 text로 '<h2>Master vue..</h2>' 이렇게 화면에 출력되는게 아니라 HTML로 인식이 되고 있다.
(courseGoalA도 HTML로 인식되고 있지만, HTML로 입력한게 없어 바뀌는 것은 없다.)
정리하면, Vue앱에 'HTML 코드를 포함한 컨텐츠'가 저장된 경우, 그 컨텐츠는 HTML로 인식되어야 한다. 그 경우, Vue에 내장된 v-html 디렉티브를 사용하면 된다.
- v-html 디렉티브를 사용할 일이 많지는 않다.
- v-html 디렉티브를 기본설정으로 하면 이중 중괄호에 내장된 크로스 사이트 스크립팅 공격에 대한 방어 기능을 피하게 되어 보안 위협이 발생하기 때문에 기본 설정으로 사용해서는 안된다.
- 기능을 정확히 알고 있고, HTML로 출력할 데이터가 있다면 v-html 디렉티브를 사용하면 된다.
** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.
참조 : https://ko.vuejs.org/api/built-in-directives.html#v-html
'Vue.js' 카테고리의 다른 글
| [Udemy Vue 완벽가이드 Section2] 21. 이벤트 바인딩 이해하기(v-on) (0) | 2023.06.29 |
|---|---|
| [Udemy Vue 완벽가이드 Section2] 20. 첫 번째 요약 (0) | 2023.06.27 |
| [Udemy Vue 완벽가이드 Section2] 18. Vue앱 내에서 데이터 작업하기 (this가 무엇인지) (0) | 2023.06.26 |
| [Udemy Vue 완벽가이드 Section2] 17. Vue앱의 '메서드' 이해하기 (0) | 2023.06.26 |
| [Udemy Vue 완벽가이드 Section2] 16. 'v-bind'디렉티브로 속성 바인딩하기 (0) | 2023.06.26 |