“携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情”

Vue项目中使用自定义指令

使用场景：需要对DOM元素进行底层操作

局部自定义指令

当指令第一次被绑定到元素上的时候，会立即触发 bind()

1 定义

与 data 同级在 directives 节点下声明私有自定义指令。`directives:{ 指令名：{} }`

 directives:{
     color:{
         bind(el){
             // el 是绑定了此指令的、原生的 DOM 对象
             el.style.color = 'red'
         }
     }
 }

2 使用指令

<h1 v-color> APP 组件 </h1>

为自定义指令动态绑定参数值

 data(){
     return {
         color:'red'
     }
 }
 <h1 v-color="color">App 组件</h1>

通过 binding 获取指令的参数值

在声明自定义指令时，可以通过形参中的第二个参数，来接收指令的参数值：

 directives:{
     color:{
         bind(el,binding){
             // 通过 binging 对象的 .value 属性，获取动态的参数值
             // 标签上写 v-color="'red'"/ v-color="color" 都可
             el.style.color = binding.value
         }
     }
 }

update 函数

bind 函数只调用 1 次：当指令第一次绑定到元素时调用，当 DOM 更新时 bind 函数不会被触发。 update 函数会在每次 DOM 更新时被调用。

 directives:{
     color:{
         // 当指令第一次被绑定到元素时被调用（必写）
         bind(el,binding){
             // 通过 binging 对象的 .value 属性，获取动态的参数值
             el.style.color = binding.value
         },
         // 每次 DOM 更新时被调用
         update(el,binding){
             el.style.color = binding.value
         }
     }
 }

函数简写

如果 bind 和 update 函数中的逻辑完全相同，则对象格式的自定义指令可以简写成函数格式：

 directives:{
     color(el,binding){ // 'big-number'(el,binding)
             el.style.color = binding.value
         }
     }
 }

全局自定义指令

全局共享的自定义指令需要通过Vue.directive()进行声明

以处理图片错误对象的自定义指令为例

定义全局指令

在src文件夹下创建一个directive文件夹(这个文件夹下全部放入一些自定义指令),创建一个fiximg.js文件

 export const fiximg = {
   inserted(dom, options) {
     // options 是指令中的变量的解释  其中有一个属性叫做 value
     // dom 表示当前指令作用的 dom 对象
     // dom 认为此时就是图片
     // 当图片有地址 但是地址没有加载成功的时候 会报错 会触发图片的一个事件 => onerror
     dom.onerror = () => {
       // 当图片出现异常的时候 会将指令配置的默认图片设置为该图片的内容
       // dom 可以注册 error 事件
       dom.src = options.value // 这里不能写死
     }
     // 还需要检测图片为空的状况
     dom.src = dom.src || options.value
   },
   // 插入节点的钩子里面判断空，然后在组件更新之后的钩子中同样判断空
   componentUpdated(dom, options) {
     dom.src = dom.src || options.value
   }
 }

在`src/main.js`导入全局指令

 // 自定义指令
 import { fiximg } from '@/directives/index'
 Vue.directive('fiximg', fiximg)

使用全局指令

v-fiximg="require('@/assets/common/bigUserHeader.png')"

加上require 导入图片是因为：执行 npm run dev 的时候加上require才会当成图片路径来处理

补充

钩子函数

 bind：只调用一次，指令第一次绑定到元素时调用
 
 inserted：被绑定元素插入父节点时调用
 
 update：所在组件的 VNode 更新时调用
 
 ✨componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用
 
 unbind：指令与元素解绑时调用

参数：

el：是绑定了此指令的、原生的 DOM 对象

binding： 指令核心对象，描述指令全部信息属性。通过 bing 对象的 .value 属性，获取动态的参数值 {value} = bing

name：指令名

value：指令的绑定值

oldValue：指令绑定的前一个值，仅在 update和 componentUpdated钩子中可用。

expression：绑定值的字符串形式。

arg：传给指令的参数

modifers：modifiers：一个包含修饰符的对象。

vnode  虚拟节点
oldVnode：上一个虚拟节点（更新钩子函数中才有用）

Vue项目中使用自定义指令---处理错误图片对象