一、条件渲染
v-if写法:
(1) v-if="表达式"
(2) v-else-if="表达式"
(3) v-else
适用于:切换频率较低的场景
特点: 不展示的DOM的元素直接被移除
注意:
(1) v-if可以和v-else-if、v-else一起使用,但要求结构不能被打断
(2) v-if可以搭配template标签一起使用,且不会破坏原先层级
v-show
写法: v-show="表达式"
适用于: 切换频率较高的场景
特点: 不展示的DOM元素未被移除, 仅仅是使用样式隐藏(display: none)
备注: 使用v-if时,元素可能无法获取到,而使用v-show一定可以获取到
二、列表渲染
v-for指令
(1) 用于展示列表数据
(2) 语法: v-for="(item, index) in xxx" :key="yyy"
(3) 可遍历: 数组、对象、字符串(用的较少)、指定次数(用的较少)
面试题: react、vue中的key有什么作用(key的内部原理)
(1) 虚拟DOM中key的作用
key是虚拟DOM对象的标识,当状态中的数据发生变化时,Vue会根据新数据生成新的虚拟Dom,
随后Vue进行新虚拟DOM与旧虚拟DOM的差异比较
(2) 对比规则(diffing算法)
a,旧虚拟DOM中找到了与新虚拟DOM相同的key: 若虚拟DOM中内容没变,直接使用之前的真实DOM; 若虚拟DOM中内容变了,则生成新的真实DOM, 随后替换掉页面中之前的真实DOM
b.旧虚拟DOM中未找到与新虚拟DOM相同的key: 创建新的真实DOM,随后渲染到页面
(3) 用index作为key可能会引发的问题:
a,若对数据进行逆序添加、逆序删除等破坏顺序操作,会产生没有必要的真实DOM更新(界面没问题,但效率低)
b,如果结构中还包含输入类的DOM,会产生错误DOM更新(界面有问题)
(4) 开发中如何选择key:
a、最好使用每条数据的唯一标识作为key,比如id、手机号、身份证号、学号等唯一值
b、如果不存在对数据的逆序添加、逆序删除等破坏顺序的操作,仅用于渲染列表用于展示,使用index作为key是没问题的
三、Vue检测数据的原理
(1) vue会监视data中所有层次的数据
(2) 如何监视对象中的数据
原理:通过setter实现监视,且要在new Vue时就传入要监测的数据
a、对象中后追加的属性,vue默认不做响应式处理
b、如需给后添加的属性做响应式,请使用如下API:Vue.set(target, propertyName/index,value)、vm.$set(target, propertyName/index, value)
(3) 如何监测数组中的数据
原理: 通过包裹数组更新元素的方法实现,本质就是做了两件事:
a、调用原生对应的方法对数组进行更新
b、重新解析模版,进而更新页面
(4) 在vue修改数组中的某个元素一定要用如下方法
a、使用API:push、pop、shift、unshift、splice、sort、reverse
b、Vue.set或者vm.$set
特别注意: Vue.set和vm.$set不能给vm或vm的根数据对象添加属性!!!
四、收集表单数据
若<input type="text" />,则v-model收集的是value值,用户输入的就是value值
若<input type="radio" />, 则v-model收集的是value值,且要给标签配置value值
若<input type="checkbox" />: 情况a,没有配置input的value属性,那么收集的就是checked(布尔值); 情况b,配置input的value值,v-model是非数组,那么收集的就是checked,v-model的初始值是数组,那么收集的就是value组成的数组
备注: v-model的三个修饰符
lazy: 失去焦点再收集数据
number: 输入字符串转为有限的数字
trim: 输入首尾空格过滤
五、过滤器
定义: 对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)
语法:
(1) 注册过滤器: [全局注册]Vue.filter(name, callback)、[局部注册] new Vue{filters: {}}
(2) 使用过滤器: {{xxx | 过滤器名}} 或 v-bind:属性="xxx | 过滤器名"
备注:
(1) 过滤器也可以接收额外参数,多个过滤器也可以串联
(2) 并没有改变原本的数据,是产生新的对应的数据
六、内置指令
指令复习:
v-bind: 单向绑定解析表达式,可简写为:xxx
v-model: 双向数据绑定
v-for: 遍历数组/对象/字符串
v-on: 绑定事件监听,可简写为@
v-if: 条件渲染(动态控制节点是否存在)
v-else: 条件渲染(动态控制节点是否存在)
v-show: 条件渲染(动态控制节点是否展示)
新指令:
(1) v-text指令
a、作用: 向其所在的节点中渲染文本内容
b、与插值语法({{}})的区别: v-text会替换掉节点中的内容过,{{xxx}}则不会
(2) v-html指令
a、作用: 向指定节点中渲染包含html结构的内容
b、与插值语法的区别: v-html会替换掉节点中所有的内容,{{xxx}}则不会; v-html可以识别html结构
c、严重注意(v-html有安全性问题): 在网站上动态渲染任意HTML是非常危险的,容易导致XSS攻击; 一定要在可信的内容上使用v-html,永远不要在用户提交的内容上
(3）v-cloak指令
a、本质是一个特殊属性,Vue实例创建完毕并接管容器后,会删掉v-cloak属性
b、使用css配置([v-cloak] {display: none;}) 可以解决网速慢时页面展示出{{xxx}}的问题
(4) v-once指令
a、v-once所在节点在初次动态渲染后,就视为静态内容
b、以后数据的改变不会引起v-once所在结构的更新,可以用于优化性能
(5）v-pre指令
a、跳过其所在节点的编译过程
b、可利用它跳过: 没有使用指令语法、没有使用插值语法的节点,会加快编译
七、自定义指令
(1) 定义语法:
a、局部指令(对象形式和函数形式)
new Vue({ directives: {指令名: 配置对象}}) 或 new Vue({directives(){}})
b、全局指令(配置对象和回调函数)
Vue.diretive(指令名, 配置对象) 或 Vue.directive(指令名, 回调函数)
(2) 配置对象中常用的3个回调(vue2.x中有效, vue3.0中对象形式无效)
bind: 指令与元素成功绑定时调用
inserted: 指令所在元素被插入页面时调用
update: 指令所在模板结构被重新解析时调用
(3) 备注
a、指令定义时不加'v-',但是使用时要加v-
b、指令名如果是多个单词,要是用kebab-case命名方式,不要用camelCase命名