템플릿 문법 (Template Syntax)

Vue에서는 템플릿 문법으로 DOM에 선언적으로 데이터를 바인딩할 수 있다.

데이터 바인딩의 가장 기본형태는 {{ data }} (콧수염 괄호)
v-once 디렉티브를 사용하면 데이터가 변경되어도 갱신되지 않는 기능을 할 수 있다.

	<p v-once>문자열: {{ message }}</p>

HTML(v-html)

콧수염 괄호는 데이터를 html로 반환이 아닌 일반 텍스트로 해석한다. 실제 HTML로 출력하려면
v-html 디렉티브를 사용해야한다.

	<h2>텍스트: {{ htmlTemplates }}</h2>
    <h2>v-html: <span v-html="htmlTemplates"></span></h2>

주의!!! v-html은 XSS 취약점으로 이어질 수 있다. 사용자가 콘텐츠를 생성하는 부분(게시판)에는 v-html 사용을 하지말자.

v-bind

콧수염 괄호는 HTML 속성에 사용할 수 없다. 대신 v-bind 디렉티브를 사용하자

	<div v-bind:title="titleContent">mouse hover hear</div>

v-bind는 단축문법이 있다 (v-bind: === :)

또한 객체형식으로 v-bind 속성을 바인딩할 수 있다.

	const attr = {
    	type: 'password',
        placeholder: '비밀번호를 입력해주세요',
        value: '123456'
    }
    
    <input v-bind="attr" />

{{ }} 안에서 javascript 표현식 사용도 가능하다

	{{ isValid ? '예' : '아니오' }}
    {{ messageValues.split('').reverse().join('') }}
    
    {{ printToday() }} <= 함수도 사용가능.