1. Vue的常用指令及作用
1)内容渲染指令: v-text,v-html,{{ }}
用来辅助开发者渲染 DOM 元素的文本内容
2)属性绑定指令: v-bind,可省略为:
用来动态设置属性值
3)事件绑定指令: v-on: 简写为@
为DOM注册事件
4)双向绑定指令: v-model
在不操作 DOM 的前提下,快速获取表单的数据
5)条件判断指令: v-show ,v-if
控制 DOM 的显示与隐藏
6)循环渲染指令: v-for
基于数组来循环渲染一个列表结构
2. vue常用的修饰符
一、表单修饰符
1.lazy 失去焦点更新值
2.trim 去除字符串首尾的空白字符
3.number 自动将用户的输入值转为数值类型
二、事件修饰符
1.stop 阻止事件的冒泡
2.prevent 阻止事件的默认行为
3.capture 以捕获模式触发事件
4.once 绑定的事件只触发一次
5.self 只有在 event.target 是当前元素自身时 才触发事件处理函数
6.enter 键盘事件才能用。表示按下 enter 键时才触发
7.esc 键盘事件才能用。表示按下 esc 键时才能触发
8.49 键盘事件才能用。如果是数字,则表示键盘的 keyCode 值
3. v-for 循环为什么一定要绑定key ?
v-for遍历时,用id,uuid之类作为key
key的作用主要是为了高效的更新虚拟DOM,使用key来给每一个节点做一个唯一标识;diff算法可以正确的识别此节点,找到正确的位置对此节点进行操作。
4. 为什么不建议用index索引作为key?
实际开发中,推荐使用具有唯一性的值来作为key (例如id),并不推荐使用索引(index),当使用数组的索引来作为key时,对数组的指定位置插入一个元素后,数组后续所有的元素的索引都发生了变化,届时diff算法就会认为key并不相同,就会引起不必要的更新
5. 计算属性computed 和watch 的区别是什么及其各自的运用场景?
一、区别:
computed是计算属性
支持缓存,只有依赖数据发生变化时,才会重新计算函数。
不支持异步操作
自动监听依赖值的变化,从而动态返回内容。
watch是侦听属性
不支持缓存,只要数据变化,就会执行侦听函数
支持异步操作
侦听属性的值可以是一个对象,接受handler回调,deep,immediate三个属性
二、各自的运用场景:
computed:当一个属性受多个属性影响的时候;例如购物车商品结算
watch:当一条数据影响多条数据的时候,例如搜索框