템플릿 문법

보간법(Interpolation)

데이터 바인딩의 가장 기본은 머스터쉬(Mustache) {{이중 중괄호}}를 사용한 텍스트 보간이다.

<span>메시지: {{ msg }}</span>

머스터쉬 안의 msg는 해당 객체의 msg의속성 값으로 대체됩니다.

<span v-once>다시는 변경하지 않습니다: {{ msg }}</span>

v-once 디렉티브를 사용하면 msg값을 변경 시켜도 업데이트 되지 않는다.

<div v-html="rawHtml"></div>

v-html 디렉티브를 사용하면 원시 html을 사용 가능합니다.

머스터쉬는 텍스트로 인식됩니다.

웹사이트에서 임의의 HTML을 동적으로 렌더링하려면 XSS 취약점으로 쉽게 이어질 수 있으므로 매우 위험할 가능성이 있습니다. 신뢰할 수 있는 콘텐츠에서는 HTML 보간만 사용하고 사용자가 제공한 콘텐츠에서는 절대 사용하면 안됩니다.

<div v-bind:id="dynamicId"></div>

머스터쉬는 HTML속성으로 사용이 불가능합니다. v-bind디렉티브를 사용해야 합니다.

JavaScript 표현식 사용하기

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>

Vue js 는 모든 바인딩 작업에서 JS의 표현식 사용이 가능하다.

<!-- 아래는 구문입니다, 표현식이 아닙니다. --> {{ var a = 1 }} <!-- 조건문은 작동하지 않습니다. 삼항 연산자를 사용해야 합니다. --> {{ if (ok) { return message } }}

디렉티브

디렉티브는 v- 접두사가 있는 특수 속성이다.

디렉티브 속성 값은 단일 JS 표현식이 된다. v-for 은 예외

<p v-if="seen">이제 나를 볼 수 있어요</p>

여기서 v-if는 seen 의 값에따라 p태그를 추가할지 결정한다.

<a v-bind:href="url"></a>

v-bind는 웹 페이지가 반응적으로  HTML속성을 갱신되게 도와준다.

href는 전달인자, 엘리먼트의 href 속성을 v-bind로 url값을 바인드 한다.

<a v-on:click="doSomething">

DOM 이벤트리슨을 하는 v-on디렉티브다.

수식어

수식어는 .으로 표시되는 특수 접미사다.

디렉티브를 특별한 방법으로 바인딩 해야함을 나타날때 사용한다.

<form v-on:submit.prevent="onSubmit"></form>

submit하면 event.preventDefault() 를 호출합니다.

필터

Vue에서 일반 텍스트를 사용할때 사용이 가능하다.

머스터쉬 보간과 v-bind 표현식 에서 사용이 가능하다.

필터는 JS 표현식 끝에 표기해야 하며, 파이프 기호로 표시됩니다.

<!-- Mustaches 사용시 -->
{{ message | capitalize }}
<!-- v-bind 사용시 -->
<div v-bind:id="rawId | formatId"></div>

new Vue({ // ... filters: { capitalize: function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } } })

필터는 항상 표현식의 값을 첫번째 전달인자로 받는다.

{{ message | filterA | filterB }}

체이닝도 가능하다.

{{ message | filterA('arg1', arg2) }}

message,arg1,arg2이런식으로 인자가 전달된다.

약어

개발을 할때 속도를 내기위해 약어를 사용하면 좋다.

v-bind와 v-on에 약어를 제공한다.

<!-- 전체 구문 --> <a v-bind:href="url"></a> <!-- 약어 --> <a :href="url"></a>

<!-- 전체 구문 -->
<a v-on:click="doSomething"></a>
<!-- 약어 -->
<a @click="doSomething"></a>

:와 @는 속성 이름에 유효한 문자다.