Vue.js 템플릿 문법

보간법

문자열

데이터 바인딩의 가장 기본 형태는 {{ }} 을 사용하는 텍스트 보간이다.

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

이렇게 될 경우 msg 가 쓰여진 부분은 해당 데이터 객체의 msg 속성 값으로 대체되며 데이터 객체의 msg 속성이 변경될 때 마다 갱신된다.

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

다음과 같이 v-once 디렉티브를 사용하는 경우 데이터 변경 시 업데이트 되지 않는 일회서 보간을 수행할 수 있지만, 같은 노드의 바인딩에도 영향을 미친다.

원시 HTML

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

<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

속성

v-bind

<div v-bind:id="dynamicId"></div>
<button v-bind:disabled="isButtonDisabled">Button</button>

isButtonDisabled가 null, undefined 또는false의 값을 가지면 disabled 속성은 렌더링 된 엘리먼트에 포함되지 않습니다.

Javascript 표현식 사용

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>

다음과 같이 자바스크립트 표현식의 모든 기능을 지원한다고 합니다.

보간법에 대해서 요약하자면 다음과 같습니다.

1. 먼저 이중 중괄호를 사용한다. 또한 v-once 디렉티브를 사용하면 일회성 보간을 수행할 수 있다.

2. 원시 HTML 출력을 하고 싶으면 v-html 디렉티브를 사용하면 된다.

3. v-bind 디렉티브를 사용하면 속성을 사용할 수 있다. 이때 disabled 속성이 되게 된다면 엘리먼트에 포함되지 않습니다.

4. 이중 중괄호 안에 Javascript 표현식을 써서 적용시킬 수 있습니다.

디렉티브

v- 접두사가 있는 특수 속성을 디렉티브라고 합니다. 디렉티브 속성 값은 단일 Javascript 표현식이 됩니다.

이제 나를 볼 수 있어요

전달인자

일부 디렉티브는 콜론으로 표시되는 "전달인자"를 사용할 수 있습니다.
예를 들어 v-bind 디렉티브는 반응적으로 HTML 속성을 갱신하는데 사용됩니다.

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

여기서 href는 전달 인자로 엘리먼트의 href속성을 표현식 url의 값에 바인드하는 v-bind 디렉티브에게 알려줍니다. 또 다른 예로 DOM 이벤트를 수신하는 v-on 디렉티브 입니다.

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

동적 전달인자

표현식을 대괄호로 묶어서 디렉티브의 아규먼트로 사용하는것도 가능합니다.
<a v-bind:[attributeName]="url"> ...
만약 자바스크립트에서 attributeName이 href로 정의되어 있다면 v-bind:href와 동일하게 작용합니다.

수식어

수식어는 점으로 표시되는 특수 접미사로 디렉티브를 특별한 방법으로 바인딩 해야 함을 나타냅니다. 예를 들어, .prevent 수식어는 트리거된 이벤트에서 event.preventDefault()를 호출하도록 v-on 디렉티브에게 알려줍니다.

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

약어

v-bind 약어

<!-- 전체 문법 -->
<a v-bind:href="url"> ... </a>

<!-- 약어 -->
<a :href="url"> ... </a>

<!-- shorthand with dynamic argument (2.6.0+) -->
<a :[key]="url"> ... </a>

: href 나 : key를 사용하는 이유는 : 이 v-vind의 약어이기 때문입니다. 앞으로 코드에서는 : 를 사용할 것인데 이는 모두 v-vind의 약어로 보면 됩니다.

v-on 약어

<!-- 전체 문법 -->
<a v-on:click="doSomething"> ... </a>

<!-- 약어 -->
<a @click="doSomething"> ... </a>

<!-- shorthand with dynamic argument (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

@를 사용하면 v-on과 같은 의미로 작동 됩니다. v-on click 대신 @click만 써도 작동되는것 입니다.

이를 정리하자면
HTML의 엘리먼트를 변경하는 것은 v-bind 이며 이는 약자로 : 를 써서 바꿀 수 있으며,
이벤트를 수신하는 것은 v-on 이며 이는 약자로 @를 써서 바꿀 수 있다는 내용입니다.
이 2개는 앞으로도 자주 쓰일것 같습니다.