第三阶段 Vue day02

发布于:2022-08-02 ⋅ 阅读:(522) ⋅ 点赞:(0)

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


网站公告

今日签到

点亮在社区的每一天
去签到