一、文本指令
1.文本插值
语法
{{ 声明式变量 }}
缺点
刷新页面时会出现“一闪而过”的效果
解决方案:
1.用v-text代替；
2.加css样式[v-cloak]{dispaly:none}
2.渲染文本式
语法
v-text="申明式变量"
渲染缺陷
1.只能渲染字符串，数值等
2.如果渲染null、undefined则会没有显示效果
3.如果渲染布尔值会隐式转换为字符串
理解
v-text实际上是DOM中的innerText
3.渲染HTML字符串
语法
v-html=“申明式变量”
原理
这里的HTML字符串会被浏览器渲染引擎渲染成真实的DOM结构
优点
具有防注入攻击xss的功能
拓展:什么是xss?防注入攻击(xss)
4.v-once
语法
和v-cloak一样没有值
特点
它所作用的DOM节点上的申明式变量，只渲染一次（只编译一次）
说明
工作中很少使用
5.v-pre
语法
v-pre=“申明式变量”
特点
显示原始信息，跳过编译过程
二、动态属性
1.v-bind
给标签添加动态属性，凡是你可以使用的属性都可以变成动态的
2.简写
v-bind:attr可以简写为:attr
3.进阶
使用v-bind动态实现class、动态style，是非常重要的，在组件化时用的非常多
三、事件绑定
1.v-on
给标签绑定事件，什么事件都能绑定，比如鼠标事件、表单事件等
2.简写
v-on:时间名="事件处理器" 简写为 @事件名="事件处理器"
3.事件修饰符
可以链式调用:@事件名.enter.stop.prevent
4.事件对象
当没有事件传参时，事件处理器默认的第一个参数就是事件对象，当有事件传参时，要使用$event手动传递事件对象
语法1:没有事件传参时 <tag @click=′handle′></tag>
语法2:有事件传参时 <tag @click=′handle(变量1, $event, 变量2)′></tag>
四、表单绑定
1.v-model
用于表单的双向绑定，也就是方便取值
2.约定
一般我们谈论的"双向绑定"指的就是表单的v-model，谈论"响应式/声明式"指的就是vue响应式原理
3.如何理解双向绑定？
当表单视图发生变化时，v-model所对应的申明式变量自动更新，反之当v-model对应的声明式变量发生变化时，表单视图自动更新
4.优点
表单取值变得更为简单
5.三个表单修饰符
.trim:去掉文本类表单值的首尾字符串
.number:用于把由数字组成的字符串，转化成Number类型
五、列表循环
1.用处
常用于循环数组、数值、字符串、对象，一切可迭代的变量（比如Map、Set）
2.工作中
工作中很少使用Map、Set,原因是Vue没有办法把Map、Set这类数据变成响应式数据
3.注意
v-for很少用于循环Map、Sei结构
4.说明
常用于循环数组、数值
5.问题
v-for循环时要加key
六、条件渲染
1.v-show
用于对元素进行隐藏和显示
原理:给元素节点添加或移除"display:none"来显示和隐藏
语法的坑:
v-show=′Boolean(表达式)′，v-show的值永远都是布尔值，一定要留意v-show值的数据类型。
2.v-if/v-else-if/v-else
用于对元素进行显示和隐藏
原理:通过dom操作对元素节点进行插入或删除
语法的坑:
1.当v-if/v-else-if/v-else成为“一组”时，在这一组兄弟节点之间不能插入其它任何节点。
2.v-else是不用给值的
七、其他指令
1.v-slot{}
插槽，是组件化的基础语法之一。它可以简写 #
2.v-pre{}
一般用于调试。特点：被v-pre所包裹的节点，都不再参与vue的编译与解析的。这个指令很少使用
