一、 内容渲染指令
> { {}} 模板渲染（模板引擎）
1. { {数据绑定}}
2. { {简单计算}}
3. { {简单逻辑运算}}（三元运算）
4. { {做简单 js 判断}}
注意：不能写语句、不能解析 html 渲染、不能放在在属性身上
> v-text
设置标签的内容，元素的 innerText 必须是双标签
默认会替换标签内原来的全部内容，使用｛｛｝ ｝可替换指
定内容
支持内部写表达式
代码：
v-html
设置标签的内容，元素的 innerText 必须是双标签
会解析 HTML 标签
代码：
解析文本要使用 v-text,解析带有 html 标签的使用
二、属性绑定指令
> v-bind
² 语法：V-bind:属性名=“挂载的数据 ”
² 简写 ：属性名= ”挂载的数据 ”
² 解析属性,单向的数据绑定
代码：
<div id="box">
<img v-bind:src="imgSrc" alt="">
<img :src="imgSrc" :title="imgTitle+'！！！'"alt=""> </div>
</body>
</html>
<script src="vue.js"></script>
<script>
new Vue({
el:"#box",
data: {
imgSrc:"1.PNG",
imgTitle:"奶茶"
}
})
</script>
三、事件绑定属性
> v-on
² 语法： v-on:事件名= ”方法（） ”
² 为元素绑定事件
² 绑定的方法在 methods 属性中
² 可以在方法内部通过 this 直接获取 data 中的值
² v-on 可以简写成 @
² 事件绑定并且传参数
代码：
<div id="box">
<input type="text" value="v_on 单击" v-on:click="doIt()"> <input type="text" value="v_on 简写单击" @click="doIt()">
<input type="text" value="v_on 双击" @dblclick="gai()">
<input type="text" value="回车键" @keyup.enter="sayHi"> <br>
<span>{ {message}}</span>
</div>
案例：计数器
$event
$event 是 vue 提供的特殊变量，用来表示原生的事件参数对象
event。$event 可以解决事件参数对象 event 被覆盖的问题
事件修饰符
按键修饰符
使用按键修饰符监听按键
四、条件渲染属性—显示切换
> v-show
² 条件渲染,判断是否隐藏,true 是现实 false 是隐藏
² 原理是修改 display 属性
代码
v-if，v-else 判断是否插值
² 根据条件的真假判断是否显示数据
² 原理是 append remove
代码：
案例：选项卡
五、列表渲染指令
> v-for 列表渲染
² 语法： v-for=“ item in 数组 ”
² 根据数据生成列表结构，隐式遍历
² 可以通过此语法获取到 item 子项，也可以获取到索引 index
当列表的数据变化时，默认情况下，vue 会尽可能的复用已存在的 DOM 元素，
从而提升渲染的性能。但这种
默认的性能优化策略，会导致有状态的列表无法被正确更新。
为了给 vue 一个提示，以便它能跟踪每个节点的身份，从而在保证有状态的列
表被正确更新的前提下，提升渲
染的性能。此时，需要为每项提供一个唯一的 key 属性：
六、双向数据绑定指令
> v-model 控制表单产生数据，双向绑定数据
² 设置或者获取表单元素的值
