Template của Vue là HTML được tăng cường bằng directive và interpolation — bạn viết markup trông giống HTML, cộng thêm các thuộc tính đặc biệt (directive, bắt đầu bằng v-) và {{ }} cho các giá trị động.
<template>
<h1>{{ title }}</h1> <!-- chèn giá trị của `title` -->
<p>{{ count * 2 }}</p> <!-- mọi biểu thức JS đều dùng được -->
<p>{{ isActive ? "On" : "Off" }}</p> <!-- toán tử ba ngôi, gọi method, v.v. -->
</template>
{{ }} đánh giá một biểu thức JavaScript (không phải câu lệnh) và render kết quả dưới dạng văn bản, tự động cập nhật khi dữ liệu thay đổi.
<template>
<p v-if="loggedIn">Welcome</p> <!-- render có điều kiện -->
<li v-for="item in items" :key="item.id">{{ item.name }}</li> <!-- vòng lặp -->
<img :src="imageUrl" /> <!-- v-bind: bind một thuộc tính -->
<button @click="submit">Send</button> <!-- v-on: xử lý sự kiện -->
<input v-model="name" /> <!-- binding hai chiều -->
</template>
<a :href="url">link</a> <!-- : là viết tắt của v-bind: -->
<button @click="fn">go</button> <!-- @ là viết tắt của v-on: -->
Viết tắt : (bind) và @ (on) là cách viết Vue idiomatic — bạn hiếm khi thấy dạng đầy đủ v-bind:/v-on:.
<div class="static">{{ text }}</div> <!-- {{}} cho NỘI DUNG -->
<div :class="dynamicClass"></div> <!-- :attr cho THUỘC TÍNH -->
Dùng {{ }} cho nội dung văn bản và :attr cho giá trị thuộc tính — bạn không thể đặt mustache bên trong một thuộc tính.
Cú pháp template là trái tim của việc viết UI bằng Vue.
Sự kết hợp giữa interpolation {{ }} và directive v- (với viết tắt :/@) cho phép bạn diễn đạt UI động, reactive một cách khai báo — đọc giống HTML nhưng được điều khiển bởi dữ liệu.
Thành thạo các directive thông dụng chiếm phần lớn công việc phát triển Vue hằng ngày.