【vue】牛客专题训练01

【vue】牛客专题训练

• 1.来源
• 2.Vuex
• 3. watch
• 4.Vue自定义指令钩子函数
  • 4.1 钩子函数
• 5.v-model修饰符
• 6. 图片懒加载v-lazy
• 7. 双向数据绑定
• 8. ref

1.来源

刷题地址

2.Vuex

• Vuex可以用来管理数据
• Vuex也可以实现组件间的传值
• Vuex的属性有state、mutations、actions、getters、module等
• mutation中的方法按照规定最好不要涉及异步方法

在这里插入图片描述

3. watch

在这里插入图片描述

答案 打印语句不执行 注意👇

• watch里面的handler第一次不会执行，如果我们想第一次就执行需要设置immediate：true
• watch方法能执行异步操作

4.Vue自定义指令钩子函数

在这里插入图片描述

4.1 钩子函数

自定义指令提供了五个钩子函数，钩子函数是到一定时期会自动执行

在这里插入图片描述

在这里插入图片描述

5.v-model修饰符

在这里插入图片描述

6. 图片懒加载v-lazy

在这里插入图片描述

图片是网站优化的一个重点，图片懒加载是其中比较好用的一个方法。vue的图片懒加载插件 ---- vue-lazyload 注意👇

• img标签中使用懒加载：v-lazy 代替 v-bind:src ；
• 背景图片中使用懒加载：v-lazy:background-image = “” ==>> 注意图片和盒子大小问题，否则显示可能有问题哦。
• 使用时最好给一个 key 属性，即：

 <img v-lazy="图片地址" :key="图片地址">

• :key=“” 必须要加，否则就会出现，页面刷新，其他内容都刷新了，但是只有图片不刷新的情况 。因为key可能相同，所以页面不会更新

7. 双向数据绑定

在这里插入图片描述

8. ref

Vue 中通过给元素添加哪个属性绑定DOM元素（ ）

• 给元素添加ref属性，通过this.$refs获取