指令
v-bind 单项数据解析表达式 可简写为 :xxx
v-model 双向数据绑定
v-for 遍历数组/对象/字符串
v-on 绑定事件监听 可简写为 @
v-if 条件渲染 切换频率较低的场景 不展示的DOM元素直接被移除
v-else 条件渲染
v-show 条件渲染 切换频率较高的场景
v-text 不支持结构的解析
v-html 指令
1.作用 向指定节点中渲染包含html结构的内容
2.与插值语法的区别
(1)v-html会替换掉节点中所有的内容 {{xxx}}则不会
(2)v-html可以识别html结构
3.严重注意 v-html有安全性问题
(1)在网站上动态渲染任意HTML是非常危险的 容易导致xss攻击
(2)一定要在可信的内容上使用v-html 永不要在用户提交的内容上
v-cloak指令
1.本质是一个特殊属性 Vue实例创建完毕并接管容器后 会删掉v-cloak属性
2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题
<style>
[v-cloak]{
display: none;
}
</style>
v-once指令
1.v-once所在的节点在初次渲染后 就视为静态内容了
2.以后数据的改变不会引起v-once所在结构的更新 可以用于优化性能
<h2 v-once>初始化的n值是{{n}}</h2>
1 . v-if
写法：
(1)v-if="表达式"
(2)v-else-if="表达式"
(3)v-else="表达式"
适用于:切换频率较低的场景
特点：不展示的DOM元素直接被移除
注意：v-if可以和:v-else-if v-else一起使用 但要求结构不能被打断
<template v-if="n == 1"> //只有v-if可以使用template样式
<h2 >年后</h2>
<h2 >念好</h2>
<h2 >你好</h2>
</template>
2.v-show
写法 v-show="表达式"
适用于:切换频率较高的场景
特点：不展示的DOM元素未被移除 仅仅是使用样式隐藏掉
3.备注
使用v-if时 元素可能无法获取到 而使用v-show一定可以获取到
react Vue 中的key有什么作用
1.虚拟DOM中key的作用
key是虚拟DOM对象的标识 当数据发生变化时Vue会根据 新数据 生成 新的虚拟
DOM随后Vue进行 新虚拟DOM 与 旧虚拟DOM 的差异比较 比较规则如下
2.对比规则
(1)旧虚拟DOM中找到了与新虚拟DOM相同的key
1.若虚拟DOM中的内容没变 直接使用之前的真实DOM
2.若虚拟DOM中的内容变了 则直接生成新的真实DOM 随后替换掉页面中之
前的真实DOM用index作为key可能会引发问题
1.若对数据进行 逆序添加 逆序删除等会破坏顺序操作
会产生没有必要的真实DOM更新 ==> 界面效果没问题 但效率低
2.如果结构中还包含输入类的DOM
会产生错误DOM更新 ==> 界面有问题
4.开发中如何选择key
1.最好使用每条数据的唯一标识作为key 比如id，手机号，身份证号，学号等唯一值
2.如果不存在对每条数据的逆序添加，逆序删除操作 仅用于渲染列表用于展示
使用index是没有问题的
