Vue2相关知识点

Vue2指令

vue指令，你可以理解为文档API 方便快速渲染页面的基本接口,可分为6大类

1.内容渲染指令

1. v-text 注意：指令会覆盖元素内默认的值
2. 格式 <元素 v-text=“ 值”></元素>
3. {{}}：插值表达式，解决v-text会覆盖默认文本内容问题（使用频繁）
4. `格式 ：<元素 >{{值}}</元素>``
5. 插值表达式 中除了以上简单的放入值还支持
6. 1.简单计算
7. 2.三元判断
8. 4.字符串处理
9. …
10. v-html ：v-text 指令和插值表达式只能渲染纯文本，为了解决此类问题，可采用此指令
11. 格式 <元素 v-html=“ 值”></元素>

2.属性绑定指令

v-bind ：为元素属性绑定动态属性值 使用频繁）
. 格式 <元素 v-bind:属性名='' 属性值“></元素>
注意：v-bind 可以简写为：

3.事件绑定指令

v-on 绑定事件处理函数，需放置在methods节点中声明
注意：简写格式为@
在事件中如果不传递参数，可通过方法中第一个参数接收到事件对象event
如需要传递参数并不覆盖事件对象event 可通过传递参数$event ，进行接收
事件修饰符
.prevent 阻止默认行为 （例如：阻止a链接跳转，阻止表单的提交）
.stop 阻止事件冒泡
.capture以捕获模式触发当前事件处理函数
.once 绑定的事件之触发一次
.self 只有在event.target是当前元素自身触发事件处理函数

4.双向绑定指令

v-model 双向数据绑定，只能配合表单元素一起使用,可添加修饰符
.number 自动将用户的输入入职转为数值类型
.trim 自动过滤用户输入的守卫空白字符
.lazy 在change时而非input 时更新

格式：<表单元素 v-model. 修饰符=“值”><>

5.条件渲染指令

v-if 用于控制元素显示和隐藏 ,会动态地创建和移除DOM元素， 如果在运行时条件很少改变，使用v-if较好
v-show 用于控制元素显示和隐藏 ,会动态运用css 中display 属性，显示和隐藏，并不会删除元素， 如果在使用频繁的情况下，使用v-show较好
v-else 需要和v-if配合使用
v-else-if 多层判断元素显示隐藏，可使用

<元素  v-if/v-show=“条件”><元素>

6.列表渲染指令

v-for 用于循环数组和对像值进行渲染页面

<元素 v-for=“（item,index）in list  ：key =“唯一值””><元素>

list 待循环的数组和对象
item 带循环的数组和对象每一项的元素
index 待循环的数组和对象每一项的元素索引
如果不添加key ，当列表的数据变化时，默认情况下，vue会尽可能的复用已存在的DOM ，默认的规则会导致状态的泪飙无法被正确渲染更新，因此key的值做为每个节点的身份，具有唯一性
注意：

1. key的值只能是字符串或数字类型
2. key的值必须具有唯一性（key的值不能重复）
3. 建议把数据的id 属性的值座位key的值（因为index）具有唯一性
4. 建议使用v-for 指令时，一定要指定key的值（既能提升性能，又放置列表状态）