템플릿 문법
Vue.js는 렌더링 된 DOM을 기본 Vue 인스턴스의 데이터에 선언적으로 바인딩 할 수 있는 HTML기반 템플릿 구문을 사용한다. 모든 Vue.js 템플릿은 스펙을 호환하는 브라우저 및 HTML파서로 구문분석할 수 있는 유효한 HTML이다.
보간법
문자열
데이터 바인딩의 가장 기본형태는 “Mustache”구문을 사용한 텍스트 보간이다.
<span>메시지 : </span>
Mustache 태그는 해당 데이터 객체의 msg 속성값으로 대체.
또한 데이터 객체의 msg 속성이 변경될 때마다 갱신
v-once 디렉티브를 사용하여 데이터 변경시 업데이트 되지 않는 일회성 보간을 수행할 수 있지만,
같은 노드의 바인딩에도 영향을 미침
# 원시 HTML
이중 중괄호는 HTML이 아닌 일반 텍스트로 데이터를 해석함. 실제 HTML을 출력하려면 v-html 디렉티브를 사용해야함.
<p>Using mustaches : </p>
<p>Using v-html directive : <span v-html="rawHtml"></span></p>
== >
Using mustaches : <span style="color:red">This should be red.</span>
Using v-html directive : This should be red.
span 의 내용은 rawHtml로 대체된다. 이 때 데이터 바인딩은 무시된다. Vue는 문자열 기반 템플릿 엔진이 아니기 때문에 v-html을 이용해 템플릿을 사용할 수 없다. 이와 달리 컴포넌트는 UI재사용 및 구성을 위한 기본단위로 사용하는것을 추천한다.
웹사이트에서 임의의 HTML을 동적으로 렌더링하려면 XSS취약점으로 쉽게 이어질 수 있으므로 매우 위험할 가능성이 있다. 신뢰할 수 있는 콘텐츠에서는 HTML 보간만 사용하고 사용자가 제공한 콘텐츠에서는 절대 사용하면 안된다.
자주 사용하는 약어
v-bind 약어 :
<a :href=”url”>…</a>
v-on 약어 @
<a @click=”doSomething”>…</a>