Vue非常好用的directive 方法指令

#指令使用Vue.directive()参数说明
###参数1 ：*指令的名称，注意，在定义的时候，名称前面不需要加 v- 前缀，但在调用的时候，必须在指令名称前加上 v- 前缀来进行调用
###参数2： 是一个对象，这个对象身上，有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作。
#常用的指令相关函数有bind, inserted, update#
在每个函数中，第一个参数，永远是 el ，表示被绑定了指令的那个元素，这个 el 参数，是一个原生的JS对象

• bind：每当指令绑定到元素上的时候，会立即执行这个 bind 函数，只执行一次，样式相关的可以在bind中设置
• inserted： 元素插入到DOM中的时候，会执行 inserted 函数【触发1次】，和JS行为有关的操作，最好在 inserted 中去执行
• updated： 当VNode更新的时候，会执行 updated， 可能会触发多次
  自定义全局和局部的自定义指令：
  #全局自定义指令#

import hasPermi from './permission/hasPermi'
const install = function(Vue) {
  Vue.directive('hasPermi', hasPermi)
}
if (window.Vue) {
  window['hasPermi'] = hasPermi
  Vue.use(install); // eslint-disable-line
}
export default install
###使用方式
 <el-button @click="addRole()"  v-hasPermi="['system:power:add']" >新增</el-button>

#局部自定义指定#
在指定的页面使用 自定义局部指令 v-color 为绑定的元素设置指定的字体颜色

      directives: {
        color: {
          bind(el, binding) {
            el.style.color = binding.value;
          }
        }
      }
### 使用方式
<input type="text" v-model="search" v-color="'red'" >

#钩子函数被赋予了以下参数说明#

• el 指令所绑定的元素，可以用来直接操作 DOM。
• binding 一个对象，包含以下属性：

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

技术参考：https://www.yixzm.cn/blog/523999