为何需要自定义指令

如果你需要对普通 DOM 元素进行底层操作，而vue并没有提供这种指令，这时候使用自定义指令。注册分为全局注册和局部注册，本文是全局注册

注册自定义指令的基本语法

在main.js用 Vue.directive()方法来进行注册, 以后任意.vue文件都可以直接用自定义指令
inserted钩子函数在什么时候执行？自定义指令要绑定到具体元素的标签上（元素=内容+标签），当该指令所绑定的元素插入到DOM树上时，inserted()函数自动执行。
讲人话：绑定指令的标签在页面上显示的时候，自动执行inserted()函数

Vue.directive('自定义指令名称', {

    inserted：function (el, binding) { /* do something */ }
    
})

参数说明：

el是什么？简单理解：指令绑定的标签所对应的DOM元素，你要操作的就是这个DOM元素
binding是什么？binding是一个对象，它不是指令等号后的变量，而是对该变量的解释，因此它有以下的属性：

name属性：没有加“v-”的指令名
value属性：例如 <button v-btnAllow="某变量">按钮</button> 中，value属性就是" 某变量 "的值，所以 binding.value 就是"某变量"的值

需求复现

需求：当用户头像失效时，指定一个固定图片作为头像

结构：

     <img v-imageerror="defaultPic" :src="avatar" class="user-avatar">

行为：

export default {
  data() {
    return {
      defaultPic: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
    }
  },
}

需求实现

在 src/directives/index.js 中创建自定义指令：

/* 定义处：自定义指令全部放在 directives 文件夹的index.js中 */
/* 注册处：main.js */

// ! 自定义指令1：v-imageerror
// 作用：在线图片失效时，自动替换为本地指定
export const imageerror = {
  inserted(el, binding) {
    // 监听图片加载失败事件
    el.addEventListener('error', () => {
      // el是当前绑定自定义指令的DOM元素
      // binding是一个对象，它不是指令等号后的变量，而是对该变量的解释。binding.value是自定义指令的变量值，即binding.value就是defaultPic的在线图片地址
      // 将在线图片地址赋值给<img>的src属性
      el.src = binding.value
    })
  }
}

在 main.js 中实现全局注册：

// 导入所有自定义指令
import * as customDirectives from '@/directives/index.js'

// 遍历所有自定义指令，利用Vue.directive()实现全局注册
Object.keys(customDirectives).forEach((item) => {
  const obj = customDirectives[item]
  // item 是当前自定义指令的名字；obj 是含有inserted钩子函数的对象
  Vue.directive(item, obj)
})

【30秒系列】自动批量注册全局自定义指令

为何需要自定义指令

注册自定义指令的基本语法

需求复现

需求实现