Vue.directive使用注意(小结)

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

1. el：指令所绑定的元素，可以用来直接操作 DOM 。
2. binding：一个对象，包含以下属性：vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
   1. "1 + 1" 中，绑定值为 2。
   2. "1 + 1" 中，表达式为 "1 + 1"。
   3. "foo"。
   4. "htmlcode">

      export default {
       /*
        @param el 指令所绑定的元素
        @param binding {Object} 
        @param vnode vue编译生成的虚拟节点
        */
       bind (el, binding, vnode) {
        const documentHandler = function(e) {  
         if(!vnode.context || el.contains(e.target)) {
          return false;
         }
         if (binding.expression) {
          binding.value(e)
         }
        }
       
         document.addEventListener('click', documentHandler)
       },
       update (el, binding) {
       
       },
       unbind(el) {
        document.removeEventListener('click', documentHandler);
       }
      }
      
      

      Vue.directive使用注意
      

      首先，Vue.directive要在实例初始化之前，不然会报错，还有，定义的指令不支持驼峰式写法，也会报下面同样的错，虽然在源码中没有找到在哪里统一处理大小写，但是在有关directive的方法中捕捉到的指令命名统一变为小写,所以，还是用'-'或者'_'分割吧。

      vue.js:491 [Vue warn]: Failed to resolve directive: xxx
      

      然后，其定义方式有两种，一种是Vue.directive('xxx', function(el, bind, vNode){}),其中el为dom，vNode为vue的虚拟dom，bind为一较复杂对象，详情可见Vue-directive钩子函数中的参数的参数，还有一种，为

      Vue.directive('my-directive', {
       bind: function () {},
       inserted: function () {},
       update: function () {},
       componentUpdated: function () {},
       unbind: function () {}
      })
      

      参数代表的含义，参见钩子函数描述

      最后，要使用自定义的指令，只需在对用的元素中，加上'v-'的前缀形成类似于内部指令'v-if'，'v-text'的形式。

      // Vue.directive
            Vue.directive('test_directive', function(el, bind, vNode){
              el.style.color = bind.value;
            });
            var app = new Vue({
              el: '#app',
              data: {
                num: 10,
                color: 'red'
              },
              methods: {
                add: function(){
                  this.num++;
                }
              }
            });
      

      当然，也可以将method中的方法加入，bind.value即为methods中的方法。

      <div id="app">
            <div v-test_directive="changeColor">{{num}}</div>
            <button @click="add">增加</button>
          </div>
      
          <script type="text/javascript">
            // Vue.directive
            Vue.directive('test_directive', function(el, bind, vNode){
              el.style.color = bind.value();
            });
            var app = new Vue({
              el: '#app',
              data: {
                num: 10,
                color: 'red'
              },
              methods: {
                add: function(){
                  this.num++;
                },
                changeColor: function(){
                  return this.color;
                }
              }
            });

      这种形式，可以模仿'v-once'，并进行一定的复杂逻辑，但是想要完全达到'v-once'，可能需要考虑Vue-directive的钩子函数各个周期。下面是固定num的值，使得add的方法无效。

      <div id="app">
            <div v-test_directive="changeColor">{{num}}</div>
            <button @click="add">增加</button>
          </div>
      
          <script type="text/javascript">
            // Vue.directive
            Vue.directive('test_directive', function(el, bind, vNode){
              el.style.color = bind.value();
            });
            var app = new Vue({
              el: '#app',
              data: {
                num: 10,
                color: 'red'
              },
              methods: {
                add: function(){
                  this.num++;
                },
                changeColor: function(){
                  this.num = 20;
      
                  return this.color;
                }
              }
            });
      
      

      因为小生刚刚接触vue，所以，希望前辈能多加指点。也希望大家多多支持。