在vue中，我们知道有v-on监听事件指令、v-show隐藏元素指令、v-for循环指令、v-if指令等， vue还可以通过directive自定义指令。

基本语法

自定义指令分两种：

全局注册
局部注册

全局注册是用的类似于注册组件

Vue.directive('dirName',{ //指令名
	....
})

局部注册则直接在选项中注册

new Vue({
	directives:{
    	dirName:{ //指令名
        ....
        }
    }
})

使用方式为直接在要使用的元素上写 v-dirName即可

示例

// 全局指令
Vue.directive('x',{
	inserted(el){
    	el.addEventListener('click',()=>{
        	console.log('xxx')
        })
    }
})

//局部指令
  directives: { //注意这里要写成  directives 加了s
    x: {
      inserted(el) {
        el.addEventListener("click", () => {
          console.log("x");
        });
      },
    },
  },

directive指令选项

函数属性

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
inserted：被绑定元素插入父节点时调用
update：所在组件的 VNode 更新时调用，
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用
unbind：只调用一次，指令与元素解绑时调用。

函数参数

el：指令所绑定的元素，可以用来直接操作 DOM。
binding：里面包含事件信息
vnode：Vue 编译生成的虚拟节点。
oldNode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

binding包含内容:

name：指令名
value：绑定的值例如：v-my-directive="1 + 1" 中，绑定值为 2。
oldValue：绑定前的值。仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
arg 传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。

模拟click事件

我们可以不使用默认的v-on，来模拟一个监听click事件

首先创建一个指令

Vue.directive(on2,{
	insered(el,binding){
    	el.addEventListener(binding.arg,binding.value)
        })
    }
})

上面的代码，我创建了一个名为on2的全局指令，在被绑定元素插入父节点时，指令生效，获取到绑定的元素el,获取到绑定事件的信息binding,最后对el进行监听，参数为click,log函数

对照使用指令

<template>
  <div id="app">
  // 下面的 click、log会传给binding
    <button v-x:click="log">点击</button> 
    {{ value }}
  </div>
</template>

其余代码

<script>
export default {
  data() {
    return { value: 1 };
  },
  methods: {
    log() {
      this.value += 1;
    },
  },
};
</script>

指令的作用

vue的实例主要用于数据绑定、事件监听、dom更新

指令主要用于dom操作，它的一个优点是减少重复。当我们需要用到重复的dom操作时，可以使用vue给我们的指令封装，这样极大极少代码量。

参考资料

cn.vuejs.org/v2/guide/cu…

Vue-directive自定义指令使用