1. Vue的常用指令及作用2. vue常用的修饰符3. v-for 循环为什么一定要绑定key?4. 为什么不建议用index索引作为key?5. 计算属性computed 和watch 的区别

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:当一条数据影响多条数据的时候,例如搜索框
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值