vue 自定义指令

指令(Directive):

是Vue对HTML标签新增加的、拓展的属性(也称之为特性), 这些属性不属于标准的html属性，只有Vue认为是有效的，能够处理它。

指令的职责是当表达式的值改变时，将其产生的连带影响，响应式(Reactive)地作用于 DOM。也就是双向数据绑定。

指令以"v-"作为前缀，Vue提供的指令有：v-model、v-if、v-else、v-else-if、v-show、v-for、v-bind、v-on、v-text、v-html、v-pre、v-cloak、v-once等。指令也可以自定义

指令既可以用于普通标签也可以用在<template>标签上。

指令的值是表达式，指令的值和在文本插值表达式{{ }} 的写法是一样的。

全局指令和局部指令：

【全局指令】 使用 Vue.diretive()来全局注册指令。

注册一个全局自定义指令（不带参数） v-focus,—语法—Vue.directive(‘focus’,function(){})

 <div id="app">
    <input type="text" v-focus>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*自定义指令*/
    Vue.directive('focus', {
      inserted: function(el){
        // el表示指令所绑定的元素
        el.focus();
      }
    });
    var vm = new Vue({
      el: '#app',
    });
  </script>

自定义带参数的全局指令

  <div id="app">
    <input type="text" v-color='msg'>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*自定义指令-带参数 */
    Vue.directive('color', {
      // bind声明周期, 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
      // el 为当前自定义指令的DOM元素  
      // binding 为自定义的函数形参   通过自定义属性传递过来的值 存在 binding.value 里面
      bind: function(el, binding){
        // 根据指令的参数设置背景色
        // console.log(binding.value.color)
        el.style.backgroundColor = binding.value.color;
      }
    });
    var vm = new Vue({
      el: '#app',
      data: {
        msg: {
          color: 'blue'
        }
      },
    });
  </script>

【局部指令】 也可以注册局部指令，组件或 Vue 构造函数中接受一个 directives 的选项。和methods平级

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

使用自定义指令的场景：需要对普通 DOM 元素进行底层操作。

钩子函数

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

update：所在组件的VNode 更新时调用，但是可能发生在其子VNode更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。

componentUpdated：指令所在组件的VNode及其子VNode 全部更新后调用。

unbind：只调用一次，指令与元素解绑时调用。

钩子函数参数

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

    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 钩子中可用。

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

根据用户权限隐藏菜单或者按钮

//main.js
var user = {
  permissions: ["user:add", "user:view"]
} 

Vue.directive('hasPermission', {
  inserted: function(el, binding) {
    var permission = binding.value
    var isContain = false
    for(var i = 0; i < user.permissions.length; i++) {
      if(user.permissions[i] === permission) {
        isContain = true
        break;
      }
    }

    if(!isContain) {
      el.parentNode.removeChild(el);
    }
  }
})

HelloWorld.vue

<template>
  <div>
    <button v-hasPermission="'user:add'">添加用户</button>
    <button v-hasPermission="'user:del'">删除用户</button>
    <button v-hasPermission="'user:update'">修改用户</button>
    <button v-hasPermission="'user:view'">查看用户</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {

    }
  }
}
</script>

结果：只有添加用户和查看用户两个按钮可见