目录
2、内容展示方面：{{}} / v-text / v-html / v-pre
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>