Vue自定义指令

除了核心功能默认内置的指令（v-model 和 v-show），Vue也允许注册自定义指令。注意，在Vue2.0中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通DOM元素进行底层操作，这时候就会用到自定义指令。

接下来实现一个通个按钮去控制另一个按钮（管理员按钮）的显示与隐藏

<button v-rolt="admin">管理员</button>  // 使用指令rolt
<button @click="admin = !admin">显示和隐藏管理员按钮</button>

自定义指令

// 定义一个哈希表映射一下按钮的none/block
const control =(value)=>{
  const rolt = new Map()
  rolt.set(true, 'block')
  rolt.set(false, 'none')
  return rolt.get(value)
}
directives: {
  rolt: {
    // 指令与元素成功绑定时（一上来）
    bind(element, binding){
      console.log('rolt--- element, binding',element, binding);
      control()
      !binding.value && (element.style.display = 'none')
    },
    // 指令所在元素被插入页面时
    inserted(element, binding){
      console.log('inster',element, binding);
    },
    // 指令所在的模板被重新解析时
    update:(element, binding)=>{
      console.log('update',element, binding);
      element.style.display = control(binding.value)
    }
  }
}

钩子函数

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

• bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
• inserted：被绑定元素插入父节点时调用（仅保证父节点存在，但不一定已被插入文档中）
• updata：所在组件的VNode更新时调用，
• componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
• unbind：只调用一次，指令与元素解绑时调用。

钩子参数

指令钩子函数会被传入以下参数：

• el：指令所绑定的元素，可以用来
• binding：一个对象
• vnode：Vue编译生成的虚拟节点，移步 VNode API 来了解更多详情。
• oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

注意：除el外，其它参数都应该是只读的，切勿进行修改。如果需要钩子之间共享数据，建议通过元素dataset进行

还可以定义全局指令，参数和以上局部指令一模一样

Vue.directive("focus",{})