Vue 템플릿은 디렉티브와 보간(interpolation)으로 강화된 HTML입니다. HTML처럼 보이는 마크업에 특수 속성(v-로 시작하는 디렉티브)과 동적 값을 위한 {{ }}를 추가해 작성합니다.
<template>
<h1>{{ title }}</h1> <!-- `title`의 값을 삽입 -->
<p>{{ count * 2 }}</p> <!-- 모든 JS 표현식이 동작 -->
<p>{{ isActive ? "On" : "Off" }}</p> <!-- 삼항 연산, 메서드 호출 등 -->
</template>
는 JavaScript (문장이 아님)을 평가하여 그 결과를 텍스트로 렌더링하며, 데이터가 변경되면 자동으로 갱신됩니다.
{{ }}<template>
<p v-if="loggedIn">Welcome</p> <!-- 조건부 렌더링 -->
<li v-for="item in items" :key="item.id">{{ item.name }}</li> <!-- 반복 -->
<img :src="imageUrl" /> <!-- v-bind: 속성 바인딩 -->
<button @click="submit">Send</button> <!-- v-on: 이벤트 처리 -->
<input v-model="name" /> <!-- 양방향 바인딩 -->
</template>
<a :href="url">link</a> <!-- :는 v-bind:의 단축형 -->
<button @click="fn">go</button> <!-- @는 v-on:의 단축형 -->
:(bind)와 @(on) 단축형은 Vue를 작성하는 관용적인 방법입니다. 전체 v-bind:/v-on: 형태는 거의 보기 어렵습니다.
<div class="static">{{ text }}</div> <!-- {{}}는 내용(CONTENT)용 -->
<div :class="dynamicClass"></div> <!-- :attr는 속성(ATTRIBUTES)용 -->
텍스트 내용에는 {{ }}를, 속성 값에는 :attr를 사용하세요. 속성 안에 mustache를 넣을 수는 없습니다.
템플릿 문법은 Vue UI를 작성하는 핵심입니다.
{{ }} 보간과 v- 디렉티브(그리고 :/@ 단축형)의 조합은 동적이고 반응적인 UI를 선언적으로 표현하게 해줍니다. HTML처럼 읽히면서도 데이터 기반입니다.
흔히 쓰이는 디렉티브를 숙달하는 것이 일상적인 Vue 개발의 대부분을 차지합니다.