vue自定义指令 vue.directive

directive/index.js

import Vue from "vue"

// 第一个参数：指令名称 (my-directive)
// 第二个参数：钩子函数对象
Vue.directive('my-directive',{
  // el:指令绑定的DOM元素
  // binding:对象参数
  //   name : 指令名，不包括 v- (v-my-directive:add = "1 + 1" ==> my-directive) 
  //   value: 指令的绑定值 (v-my-directive:add = "1 + 1" ==> 2) 
  //   expression : 字符串形式的参数表达式 (v-my-directive:add = "1 + 1" ==> '1 + 1')
  //   oldValue : 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
  //   arg: 传给指令的参数 (v-my-directive:add ==> add ); (v-my-directive:add = '1 + 1' ==> add)
  //   modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
  // vnode: Vue 编译生成的虚拟节点。
  // oldVnode: 上一个虚拟节点
  
  //  共有4个方法属性
  //  bind: 绑定时候执行，只执行一次
  //  unbind: 解除绑定时候调用，只执行一次
  //  inserted: 绑定元素插入时候调用（父节点一定存在，但不一定被插入到文档中)
  //  update: 所在组件更新时候调用
  //  componentUpdated: 所在组件的VNode及其子VNode全部更新后调用
  bind(el,binding){
    el.addEventListener('click',function(){
      console.log('v-my-directive')
    })
  },
})

直接在main.js里面导入以上文件 import './directive' 即可生效