key的使用
当使用 v-for 时,必须要跟着一个动态的 key 属性
1. key 不能写死,需要保证循环的每一项都是一个唯一的key
2. key 一般使用数据的 id ,不推荐使用 index 下标
v-for时,为什么需要使用key。 diff 算法
1. vue 在数组更新的时候,为了更高效的去复用之前已经渲染出来的 dom 。需要给他提供一个位置的标记,就是key
2. 为什么不推荐 index 下标呢,因为当使用下标的时候,没有高效一说
不用key: 没法根据特有的属性去判断是否需要重新创建标签。
数组更新检测
- push() 尾部追加
- pop() 尾部删除
- shift() 头部删除
- unshift() 头部追加
- splice(index, delCount, item) 高级的用法,1. 删除 2. 替换 3. 增加
- sort() 排序
- reverse() 反装
上面这七个方法,在 vue 中使用的话,页面会自动更新。
1,针对数组,下面的操作方式不会引起页面更新
1. 直接通过下标去修改数组中的某一项
2. 直接修改数组的长度
2.针对对象,下面的操作方式不会引起页面更新
1. 直接给对象增加一个之前没有写在 data 中定义的属性时
为什么会这样呢? vue2.x
1. vue的原理是通过ES5中 Object.defineProperty 去劫持数据的 get 与 set 。当数据发生变化时,额外做些事情,通知页面更新。
2. 上面第一点的 Object.defineProperty 的缺陷。
小知识,3.x 中更换了内部的使用,不再用 Object.defineProperty ,而是使用 ES6 proxy
事件处理
基础事件处理
1. 不带括号调用 默认传参 事件对象$event
2. 带括号调用 传参
3. 需要带括号传参,且也需要拿到 事件对象时,怎么做
vue中的特殊变量 $event
事件修饰符
vue给我们的事件做了一些方便我们使用的小功能。比如快速阻止默认行为,快速阻止事件冒泡
v-on:xx事件.yyy => .yyy 就是修饰符
.prevent 阻止默认行为 (常用)
.stop 阻止冒泡 (常用)
.capture 将事件触发模式,修改为捕获阶段,(不常用)
.once 一次,只触发一次事件,触发完之后就不生效了 (不常用)
.self 自身,触发事件的元素与绑定事件的元素 target 一致时,才触发 (不常用)
.passive 明确告诉浏览器,我绝对不会去阻止你的默认行为。(常用于移动端长列表滚动时)
注意点:事件修饰符可以并用
按键修饰符
1. 绑定键盘事件,使用keyup
2. 只有回车键keyup的才触发? 就需要用到按钮修饰符 .enter
系统修饰符
.ctrl
.alt
.shift
.meta
- window图标
- command
.exact
简写:
v-bind:title="xxx" => :title="xxx"
v-on:click="xxx" => @click="xxx"
注意:在Vue中函数的this指向,一般指向了Vue的实例化对象,
但是箭头函数的this指向了window