Vue 模板是通过指令和插值增强的 HTML — 你编写看起来像 HTML 的标记，加上特殊属性（指令，以 v- 开头）和 {{ }} 用于动态值。
<template>
<h1>{{ title }}</h1> <!-- inserts the value of `title` -->
<p>{{ count * 2 }}</p> <!-- any JS expression works -->
<p>{{ isActive ? "On" : "Off" }}</p> <!-- ternaries, method calls, etc. -->
</template>
{{ }} 计算一个 JavaScript 表达式（不是语句）并将结果呈现为文本，当数据更改时自动更新。
<template>
<p v-if="loggedIn">Welcome</p> <!-- conditional rendering -->
<li v-for="item in items" :key="item.id">{{ item.name }}</li> <!-- loops -->
<img :src="imageUrl" /> <!-- v-bind: bind an attribute -->
<button @click="submit">Send</button> <!-- v-on: handle an event -->
<input v-model="name" /> <!-- two-way binding -->
</template>
<a :href="url">link</a> <!-- : is short for v-bind: -->
<button @click="fn">go</button> <!-- @ is short for v-on: -->
: (bind) 和 @ (on) 简写是编写 Vue 的习惯用法 — 你很少会看到完整的 v-bind:/v-on: 形式。
<div class="static">{{ text }}</div> <!-- {{}} for CONTENT -->
<div :class="dynamicClass"></div> <!-- :attr for ATTRIBUTES -->
对于文本内容使用 {{ }}，对于属性值使用 :attr — 你不能在属性内放置 mustaches。
模板语法是编写 Vue UI 的核心。
{{ }} 插值和 v- 指令（带有 : 和 @ 简写）的结合让你以声明的方式表达动态、响应式的 UI — 读起来像 HTML，但由数据驱动。
掌握常见指令是日常 Vue 开发的大部分内容。