当你第一次接触vue的时候，一定会使用到其中的几个指令，比如：v-if、v-for、v-bind...这些都是vue为我们写好的，用起来相当的爽。如果有些场景不满足，需要我们自己去自定义，那要怎么办呢？下面来一步步学习如何自定义一个属于我们自己的指令。
vue自定义指令的基础知识
钩子函数
在消息处理机制中必不可少的一组CP，即回调和钩子。
钩子的概念源于Windows的消息处理机制，通过设置钩子，应用程序可e799bee5baa6e79fa5e98193e78988e69d8331333365656563以对所有的消息事件进行拦截，然后执行钩子函数，对消息进行想要的处理方式。
接下来是一段js代码，主要用于给btn设置点击的钩子函数
let btn = document.getElementById("btn");
btn.onclick = () => { console.log("i'm a hook");}钩子是在捕获消息的时候立即执行钩子函数。
下面是一段给btn添加click的监听器。
btn.addEventListener("click",() =>{ console.log(this.onclick);//undefined});
这是给btn绑定了一个监听器，后面那个函数是它的回调函数，因为消息捕获的过程我们并不能参与，而在捕获执行完毕的时候，回调函数才会执行，我们可以把对消息的处理写在回调函数里。
回调函数和钩子函数的区别 根本上，他们都是为了捕获消息而生的，但是钩子函数在捕获消息的第一时间就会执行，而回调函数是在整个捕获过程结束时，最后一个被执行的。
钩子函数 和 回调函数 一般都可用来处理事件“回调”。
回调函数是你留个处理方法给事件，事件发生了以后会自动执行你留下调处理方法；
钩子函数是好比找了个代理，监视事件是否发生，如果发生了这个代理就执行你的事件处理方法；在这个过程中，代理就是钩子函数；
在某种意义上，回调函数做的处理过程跟钩子函数中要调用调方法一样
但是有一点需要明确： 钩子函数一般是又事件发生者提供的。直白了说，它留下一个钩子，这个钩子的作用就是钩住你的回调方法。
在vue中：
一个指令定义对象可以提供如下几个钩子函数 (均为可选)：
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。unbind：只调用一次，指令与元素解绑时调用。
接下来我们来看一下钩子函数的参数 (即 el、binding、vnode 和 oldVnode)。
钩子函数参数
指令钩子函数会被传入以下参数：
el：指令所绑定的元素，可以用来直接操作 DOM 。binding：一个对象，包含以下属性：name：指令名，不包括 v- 前缀。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 }。
vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。oldVnode：上一个虚拟节点，仅在update和componentUpdated钩子中可用。
vue自定义指令的使用场景
按钮级别权限控制
权限控制分为页面级别和按钮级别，这两种思路基本是一致的。
-
页面级别：用户登录后，获取用户role，将role和路由表每个页面的需要的权限作比较，生成最终用户可访问的路由表。最后通过
router.addRoutes动态挂载。现在是通过获取到用户的role之后，在前端用v-if手动判断来区分不同权限对应的按钮的。。 -
按钮级别：用户登录后，获取用户role，在前端用 v-if 或者封装一个自定义指令，手动判断来区分不同权限对应的按钮的。