继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

【学习打卡】第14天 打造音乐App 第十四讲

前端杂货铺_CSDN
关注TA
已关注
手记 60
粉丝 1
获赞 4

课程名称:Vue3.0高阶实战:开发高质量音乐Web app

课程章节:推荐页面开发

主讲老师:usthuangyi

课程内容:图片懒加载,v-loading 指令

今天学习内容包括:

  1. 实现图片懒加载

  2. 开发和优化v-loading指令

课程收获:

图片懒加载:

  • 安装 vue3-lazy,在 main.js 文件中导入并使用

  • 传入两个参数,一个是 lazyPlugin,一个是要加载的图片的相对地址

  • 修改 :src 为 v-lazy,实现图片的懒加载

v-loading 指令

  • 该文件自定义 loading 指令

  • 挂载和更新的时候做出相应变化

  • 仅适用于 absolute | fixed | relative 的定位(后面还会优化)

优化:

  • 当没有设置 position 为 absolute | fixed | relative 其中一个时,自动添加 position: relative

  • 如果没有 absolute | fixed | relative,则添加样式

  • binding.value 为 false 时,移出样式

  • 至此,推荐页面的基本开发先告一段落,接下来将进行歌手页面的开发

课程学习截图:

http://img1.mukewang.com/62fb4c1f0001929411970671.jpg






打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP