1、Vue 模板的特点
我们把 HTML 模板叫做 template，我们所说的模板一般特指 HTML 的字符串，它的主要特点有：
使用 {{}} 插入表达式
使用 XML 语法（不是HTML）
使用 v-htm、v-on、v-bind 等指令操作 DOM
使用 v-if、v-for 等指令实现条件判断和循环
2、内容展示方面：{{}} / v-text / v-html / v-pre
Mustache{{ }} 表达式语法 用于展示 Vue 的 options 中 data 内部属性，它和 v-text 的效果是一样的，具体使用方式如下：
<div>hello,{{person.name}}</div> <!--表达式，如果值为 undefined 或 null 就不显示--> <div>{{n + 1}}</div> <!--可以写任何运算--> <div>{{fun(n)}}</div> <!--可以调用 methods 内声明的函数--> <div v-text="表达式"></div> <!--另一种写法 v-text，表达式内可以写以上三种形式的内容--> <div v-pre>{{n}}</div> <!--如果想显示 {{n}} 字符本身，则可以使用 v-pre 语法，它不会对模板进行编译--> <!-- 如果希望希望模板内展示一个 html 字符串编译后的元素，则可以使用 v-html 语法，它可解析 html 标签： --> <!-- 假设 data.html 值为 <strong>hi</strong> --> <div v-html="html"></div> <!-- 页面即可显示粗体的 hi -->
3、绑定属性方面：v-bind：/ 缩写为 ：
Vue 提供了 v-bind：给某个属性绑定特定的变量值，它可以简写成 ：
<!-- 通过 v-bind 绑定字符串变量 --> <img v-bind:src="url"/> <img :src="x"/> <!-- v-bind：简写为： --> <!-- 通过 v-bind 绑定对象 --> <div :style="{border:'1px solid red'，height：100}"></div> <!--注意：可以把'100px'写成100-->
4、绑定事件方面：v-on：/ 缩写为 @
Vue 提供了一些绑定事件的语法吗，比如 v-on：，它可以缩写成 @ ，具体用法如下：
<button v-on:click="add">+1</button> <!--v-on：事件名，点击之后，Vue会运行 add()--> <button v-on:click="xxx(1)">xxx</button> <!-- 点击之后，Vue会运行 xxx（1）--> <button v-on:click="n+=1">xxx</button> <!--点击之后，Vue会运行 n+=1，即发现函数就加括号调用之，否则就直接运行代码--> <button @click="add">+1</button> <!-- v-on 可以缩写成 @-->
5、条件判断指令：v-if、v-else
使用 v-if、v-else 来进行条件判断，如果条件满足就创建 DOM 元素，如果不满足该元素就不会出现在 DOM 树上 。
<div v-if="x > 0"> X大于0 </div> <!--满足判断条件，就显示当前元素--> <div v-else-if="x===0"> X为0 </div> <div v-else> X小于0 </div>
6、循环指令：v-for、:key='index'
Vue 提供了 v-for 来进行循环遍历，使用该语法可以遍历数组或对象，但是要配合 :key 使用，它要绑定一个唯一性的值 。
<ul> <li v-for="(user,index) in users" :key="index"> <!-- key 绑定的属性必须是不会重复的值 --> 索引：{{index}}值：{{user.name}} </1i> </ul>
7、显示与隐藏：v-show
使用 v-show 语法来控制元素的显示与隐藏，它是通过 css 实现的，与 v-if 语法控制元素的显示与隐藏由 本质区别。
<div v-show = "n%2===0"> n是偶数 </div> <!-- 等价于下面这句 --> <div :style="{display : n%2===0 ? 'block' : 'none'}"> n是偶数 </div> <!--注意：看得见的元素display 不只有block，如table的 display为table，如li的display为list-item-->
8、v-cloak 与 v-once 指令
v-cloak 指令 ：保持在元素上直到关联实例结束编译。和 CS S规则，如 [v-cloak]{display:none} 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
<div v-cloak> {{ message }} <!-- 不会显示，直到编译结束。 --> </div> <style> [v-cloak] { display: none; } </style>
v-once 指令 ：只渲染元素和组件 一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
<!-- 单个元素 --> <span v-once>This will never change: {{msg}}</span> <!-- 有子元素 --> <div v-once> <h1>comment</h1> <p>{{msg}}</p> </div> <!-- 组件 --> <my-component v-once :comment="msg"></my-component> <!-- `v-for` 指令--> <ul> <li v-for="i in list" v-once>{{i}}</li> </ul>
