vue的自定义指令

      在开发的过程中，我们虽然使用过很多vue的内置指令，如;v-if、 v-for v-model、v-show

但是没有自己写过一个自定义的指令，因为要做用户的权限操作，就自己写一个v-perssion的指令。

首先我们看一下官方的描述：

自定义指令主要是为了重用涉及普通元素的底层 DOM 访问的逻辑。

一个自定义指令由一个包含类似组价生命周期钩子的对象来定义。钩子函数会接受到指令所绑定元素作为参数。我们看一下官方给出的自动聚焦的

const focus = {

   mounted:(el)=>{
     el.focus()
   }

}
export default {
   directives :{
      focus
   }
}

<input v-foucs/>

我们在看一下指令钩子：

const myDirective = {
  // 在绑定元素的 attribute 前
  // 或事件监听器应用前调用
  created(el, binding, vnode, prevVnode) {
    // 下面会介绍各个参数的细节
  },
  // 在元素被插入到 DOM 前调用
  beforeMount(el, binding, vnode, prevVnode) {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都挂载完成后调用
  mounted(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件更新前调用
  beforeUpdate(el, binding, vnode, prevVnode) {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都更新后调用
  updated(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件卸载前调用
  beforeUnmount(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件卸载后调用
  unmounted(el, binding, vnode, prevVnode) {}
}

我们可以看到在元素的不同生命周期中有对应的钩子函数。我们可以在合适的钩子函数中去使用。

我们可以看到每一个钩子函数中基本包含了el，binding，vnode，prevNode

el:指令绑定到的元素。这可以用于直接操作DOM。

binding: 一个对象，包含以下的属性。

      value：传递给指令的值。eg：v-dome="1+1",值是2

     oldValue：之前的值，仅在beforeUpdate和update中可用，无论值是否更改，它都可用。

     arg：传递给指令的参数v-dome：foo中参数是“foo”

    modifiers：一个包含修饰符的对象 (如果有的话)。例如在 v-dome.foo.bar 中，修饰符对        象是 { foo: true, bar: true }。
    instance：使用该指令的组件实例。
    dir：指令的定义对象。
    vnode：代表绑定元素的底层 VNode。

     prevNode：之前的渲染中代表指令所绑定元素的 VNode。仅在 beforeUpdate 和 updated 钩子       中可用。

举例来说，像下面这样使用指令：

<div v-example:foo.bar="baz">

binding 参数会是一个这样的对象：

{
  arg: 'foo',
  modifiers: { bar: true },
  value: /* `baz` 的值 */,
  oldValue: /* 上一次更新时 `baz` 的值 */
}