Vue自定义指令

vue官方文档中介绍了两种自定义指令的方法：全局自定义和局部自定义。

全局自定义组件可以在main.js中直接注册。领用directive方法：

// 自定义一个全局自定义指令 v-addOne

Vue.directive("addOne",{
        bind: function(){
                //只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
        },
        inserted: function(){
                //被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）
       },

        update: function(){

                      // 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新

        },
        componentUpdated: function(){

                    //被绑定元素所在模板完成一次更新周期时调用。

        },
       unbind: function(){

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

        }
})

结构模板中使用： <div v-addOne></div>

局部自定义组件：在组件中添加一个directives选项：

directives: {

         addOne:{

               // 里面和全局注册的钩子函数一样

           }

}

若是自定义的指令只使用update时，直接传入函数即可，如下：

Vue.directive('my-directive',function(){
          // ............
})

自动获取input焦点的示例

//注册一个全局自定义指令v-focus

html部分：<input v-focus>

Vue.directive('focus', {

         // 当绑定元素插入到DOM中

         inserted: function (el) {

                  // 聚焦元素

                  el.focus()

          }

});

var app = new Vue({

        el: '#app'

});

当指令需要多个值时也可以传入一个字面量对象

<div id="hook-arguments-example"  v-demo-directive="{ color: 'white', text: 'hello!' }"></div>

Vue.directive('demoDirective', function(el, binding, vnode){

           console.log(binding.value.color);

           console.log(binding.value.text);

});

var demo = new Vue({

           el: '#hook-arguments-example'

})