自定义指令directive

120 阅读1分钟

Vue除了核心功能默认内置的指令 ,Vue 也允许注册自定义指令。 自定义指令是用来操作DOM的。尽管Vue推崇数据驱动视图的理念,但并非所有情况都适合数据驱动。自定义指令就是一种有效的补充和扩展,不仅可用于定义任何的DOM操作,并且是可复用的。

1.注册自定义指令的方式---两种注册方式-全局指令&局部指令

  • 全局指令: 通过 Vue.directive() 函数注册一个全局的指令。
  • 局部指令:通过组件的 directives 属性,对该组件添加一个局部的指令。
  • 如何注册使用自定义指令:blog.csdn.net/qq_44182284…

2.参数介绍

image.png image.png

3注册使用自定义指令--处理图片异常---自定义指令统一管理

自定义指令可以采用统一的文件来管理 src/directives/index.js,这个文件负责管理所有的自定义指令

3.1定义自定义指令

当图片有地址,但是地址没有加载成功的时候,会报错,会触发图片的一个时间=====>onerror事件 image.png

3.2在main.js完成自定义指令全局注册+object.keys()+import * as 变量----重要

在**main.js**中完成对于该文件中所有指令的全局注册

image.png

3.3使用自定义指令

image.png 完整代码:

导入异常时替换的照片 image.png 使用自定义指令: image.png

4.使用场景---处理图片异常案例

  • 防抖
  • 图片懒加载
  • 一键复制功能

5.import * +Object.keys()

5.1暴露及引用文件

image.png

5.2Object.keys()----遍历对象的属性+forEach()

Object.keys()的用法------拿到对象的属性
作用:遍历对象
返回结果:返回对象中每一项key的数组

image.png

结合forEach一起使用

image.png

map和forEach的区别 image.png