自定义指令directive

通用的做法，在src文件夹下新建directives文件夹，新建index.js文件 写入自定义的指令并按需导出，如

export const imgerror = {
       // 被inserted 插入到当前组件，或者被插入到页面中时执行（操作节点）
  inserted(el,binding){
        // el 指令所在元素
       // img.onerror 只要图片加载失败，就会触发
    el.onerror = () => {
        // binding 指令相关信息对象 => binding.name(指令名)  binding.value(指令值)
      el.src = binding.value
    }
  }
}

在main.js中导入

// 全部导入进来后，遍历进行批量注册
import * as directives from '@/directives'

// 方法一：for in 是无序的（对象就是无序的键值对的集合）
for(const key in directives) {
  Vue.directive(key, directives[key])
}
// 方法二：object.keys(obj)  可以收集到对象中所有的键，存到一个数组中（数组中可以排序，过滤，……）
Object.keys(rectives).forEach(item => {
  Vue.directive(item, directives[key])
}