[Vue.js] 제어 디렉티브 v-pre v-once v-text v-html

1. v-pre : 템플릿 컴파일 생략

 - 자식 컴포넌트를 포함한 내부의 HTM을 컴파일하지 않고, 정적콘텐츠로 다룰 때 사용함

<div id="app">
       <a v-bind:href="url" v-pre>
            Hello {{ message }}
       </a>
</div>

=> Mustache 와 디렉티브 등이 그대로 출력된다. 

 

 

2. v-once : 한 번만 바인딩

 - 템플릿을 한 번만 컴파일하고 이후에는 정적 콘텐츠로 다루고 싶을 때 사용

 - 렌더링 후에 message 속성이 변경되어도 DOM은 변경되지 않음

 

 

 

3.v-text

 - 텍스트 콘텐츠가 단일 Mustache만으로 구성되어 있는 경우 v-text 디렉티브로 대신 사용 가능함

<div id="app">
    <span v-text="message"></span>
</div>

 

var app = new Vue({ 
    el: '#app', 
    data: {
        message: 'Hello Vue.js!'
    },
})

 

 

4. v-html :HTML 태그를 그대로 렌더링

<div id="app">
    <span v-html="message"></span>
</div>

 

var app = new Vue({ 
    el: '#app', 
    data: {
        message: 'Hello <strong> Vue.js! </strong>'
    },
})