보간법(Interpolation)
데이터 바인딩의 가장 기본 형태는 “Mustache(수염)” 구문(이중 중괄호)을 사용한 텍스트 보간이다.
<span>메시지: {{ msg }}</span>
Mustache 태그는 해당 데이터 객체의 msg 속성 값으로 대체된다. 또한 msg 값이 바뀔때마다 자동으로 갱신된다.
v-once 디렉티브를 사용하면 데이터가 변경되더라도 문서에는 적용되지 않는 일회성 보간을 사용할 수 있다.
<span v-once>일회성 보간: {{ msg }}</span>
Mustache 는 HTML 태그를 반영하지 않고 텍스트 형태로 출력한다. 데이터의 태그를 반영하고자 한다면 v-html 디렉티브 를 사용한다.
다만 이 형태는 XSS 취약점으로 이어질 수 있으므로, 보안에 주의하도록 한다.
<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
속성에 데이터를 바인딩 할 때는 v-bind 디렉티브를 사용한다.
<div v-bind:id="dynamicId"></div>
Mustache 안에 Javascript 표현식 사용하여 Javascript 를 사용하는 기능도 지원한다.
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}