【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中的方法按照规定最好不要涉及异步方法
    【vue】牛客专题训练01_第1张图片

3. watch

【vue】牛客专题训练01_第2张图片
答案 打印语句不执行
注意

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

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

【vue】牛客专题训练01_第3张图片

4.1 钩子函数

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

【vue】牛客专题训练01_第4张图片

【vue】牛客专题训练01_第5张图片

5.v-model修饰符

【vue】牛客专题训练01_第6张图片

6. 图片懒加载v-lazy

【vue】牛客专题训练01_第7张图片

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

  • img标签中使用懒加载:v-lazy 代替 v-bind:src ;
  • 背景图片中使用懒加载:v-lazy:background-image = “” ==>> 注意图片和盒子大小问题,否则显示可能有问题哦。
  • 使用时最好给一个 key 属性,即:
 <img v-lazy="图片地址" :key="图片地址">
  • :key=“” 必须要加,否则就会出现,页面刷新,其他内容都刷新了,但是只有图片不刷新的情况 。因为key可能相同,所以页面不会更新

7. 双向数据绑定

【vue】牛客专题训练01_第8张图片

8. ref

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

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

你可能感兴趣的:(前端项目,vue.js,javascript,前端)