Vue指令v-loading变v-showimg，长尾疑问：如何实现图片加载占位效果？

本文共计1513个文字，预计阅读时间需要7分钟。

目录 + 了解自定义指令的锤子函数 + 注册为全局指令 + 需求描述 + 组件列表 + ListCom.vue + 加载动画组件 + LoadingCom.vue + 指令函数 + loading.js + 分析代码 + main.js 中 + 注册为全局指令 + 页面中使用

目录

• 了解自定义指令的钩子函数
• 注册成为全局指令
• 需求描述
• 列表组件 ListCom.vue
• 加载动画组件 LoadingCom.vue
• 钩子函数 loading.js
• 分析上面的代码
• main.js 中 注册成为全局指令
• 页面中使用加载动画指令 v-loading
• 占用图指令 v-showimg
• 占位图组件 ShowImgCom.vue
• 指令的书写 showimg.js
• main.js注册
• 指令的使用v-showimg指令

了解自定义指令的钩子函数

bind(){}：每当指令绑定到元素上的时候，就会立刻执行bind这个函数。只调用一次。
和css相关的操作，可以放在这个钩子函数中。

inserted(){}：元素插入到DOM中的时候，会执行inserted函数。只调用一次。