Vue除了核心功能默认内置的指令 ,Vue 也允许注册自定义指令。 自定义指令是用来操作DOM的。尽管Vue推崇数据驱动视图的理念,但并非所有情况都适合数据驱动。自定义指令就是一种有效的补充和扩展,不仅可用于定义任何的DOM操作,并且是可复用的。
1.注册自定义指令的方式---两种注册方式-全局指令&局部指令
- 全局指令: 通过 Vue.directive() 函数注册一个全局的指令。
- 局部指令:通过组件的 directives 属性,对该组件添加一个局部的指令。
- 如何注册使用自定义指令:blog.csdn.net/qq_44182284…
2.参数介绍
3注册使用自定义指令--处理图片异常---自定义指令统一管理
自定义指令可以采用统一的文件来管理
src/directives/index.js,这个文件负责管理所有的自定义指令
3.1定义自定义指令
当图片有地址,但是地址没有加载成功的时候,会报错,会触发图片的一个时间=====>onerror事件
3.2在main.js完成自定义指令全局注册+object.keys()+import * as 变量----重要
在**
main.js**中完成对于该文件中所有指令的全局注册
3.3使用自定义指令
完整代码:
导入异常时替换的照片
使用自定义指令:
4.使用场景---处理图片异常案例
- 防抖
- 图片懒加载
- 一键复制功能
5.import * +Object.keys()
5.1暴露及引用文件
5.2Object.keys()----遍历对象的属性+forEach()
Object.keys()的用法------拿到对象的属性
作用:遍历对象
返回结果:返回对象中每一项key的数组
结合forEach一起使用
map和forEach的区别