1.插值表达式
1.插值表达式的作用是什么？
利用表达式进行插值，将数据渲染到页面中；
2.语法结构？
{{表达式}}
3.插值表达式的注意点是什么？
（1）使用的数据要存在，在data中；
（2）支持的是表达式，而不是语句；
（3）不能在标签属性中使用；<p title={{ 变量 }}></p> ×
2.Vue 指令
Vue 会根据不同的指令，针对标签实现不同的功能。指令：带有 v-前缀的特殊标签属性；
（1）v-html：
作用：动态的解析标签，（像插值表达式的话会以文本形式进行展示）
v-html = "表达式 " → 动态设置元素 innerHTML
（2）v-show & v-if：
作用：控制元素的隐藏
-v-show：控制元素显示隐藏
语法：v-show = "表达式" 表达式值 true 显示， false 隐藏
原理：切换 display:none 控制显示隐藏
场景： 频繁切换显示隐藏的场景
-v-if：控制元素显示隐藏（条件渲染）
语法： v-if = "表达式" 表达式值 true 显示， false 隐藏
原理： 基于条件判断，是否 创建 或 移除 元素节点
场景： 要么显示，要么隐藏，不频繁切换的场景
（3）v-else & v-else-if：
作用：辅助v-if 进行判断渲染
语法： v-else v-else-if = "表达式"
注意： 需要紧挨着 v-if 一起使用
（4）v-on：
作用：注册事件 = 添加监听+提供处理逻辑
语法：<1> v-on：事件名 = "内联语句" ； <2> v-on：事件名 = "methods中的函数名"
简写： @事件名="methods中的函数名"
注意：methods函数中的 this 指向 Vue 实例；同时，我们也可以通过v-on 来调用传参；
（5）v-bind：
作用：动态地设置 html 的标签属性和 -> src url title ...
语法：v-bind：属性名 = "表达式 "
注意：简写形式 ：属性名 = "表达式"
（6）v-for：
作用：基于数据循环，多次渲染整个元素 ->数组、对象、数字
语法：v-for = "（item,index） in 数组"；item 是每一项，index是索引；
省略 index 则 v-for = "item in 数组"
注意：v-for 的默认行为会尝试 原地修改元素 （就地复用），因而我们最好加上v-for 中的key，并且给元素添加的唯一标识，便于Vue进行列表项的正确排序复用。
注意点：
- key 的值只能是 字符串 或 数字类型
- key 的值必须具有 唯一性
- 推荐使用 id 作为 key（唯一），不推荐使用 index 作为 key（会变化，不对应）；
（7）v-model：
作用：给表单元素使用，双向数据绑定 -> 可以快读获取或设置表单元素内容
① 数据变化 → 视图自动更新
② 视图变化 → 数据自动更新
语法:v-model = '变量'
3.指令的修饰符
通过 " . " 指明一些指令的 后缀 ，不同 后缀 封装了不同的处理操作 -> 简化代码
（1）按键修饰符
@keyup.enter -> 键盘回车监听
（2）v-model 修饰符
v-model.trim -> 去除首尾空格
v-model.number -> 转数字
（3）事件修饰符
@事件名.stop -> 阻止冒泡
@事件名.prevent -> 阻止默认行为
4.v-bind 对于样式操作的增强*
（1）v-bind - 操作 class
语法： : class = "对象/数组"
1.对象 -> 键就是类名，值是布尔值。如果值是 true ，有这个类，否则没有这个类；
<div class="box" :class="{ 类名1: 布尔值, 类名2: 布尔值 }"></div>
适用的场景：一个类名，来回切换；
2.数组 -> 数组中所有类，都会添加到盒子上，本质就是一个 class 列表
<div class="box" :class="[ 类名1, 类名2, 类名3 ]"></div>
适用场景：批量添加或删除类；
示例：京东秒杀导航栏的切换
（2）v-bind - 操作 style （个人认为这个还是比较重要的）
语法： ：style = "样式对象"
<div class="box" :style="{ CSS属性名1: CSS属性值, CSS属性名2: CSS属性值 }"></div>
适用场景：某个具体属性的动态设置
注意的一些点：
<1>一些格式：首先，对于CSS属性值，我们需要对其加引号；其次，对于带有横杠的属性名，在JS对象中是不支持的，因而此时可以采取两种方法：一种是驼峰；另一种是我们可以对这种属性名加引号；
<div :style="{height:"400px";width:"600px";backgroundColor:'white';'background-color':'white';}"></div>
<2>如果对单个的属性进行动态的改变，则
<div :style="{height:"400px";width:len;}"></div>
/* 然后在 data 中定义 len */
5.v-model 应用于其他表单元素
这个暂时和之前的是一样的