Vue之自定义指令

8.1 基本用法

自定义指令的注册方法和组件很像，也分全局注册和局部注册，比如注册一个v-focus 的指令，用于在＜input> 、＜textarea>元素初始化时自动获得焦点，两种写法分别是：

//全局注册
Vue.directive('focus',{
        //指令选项
    }
);

//局部注册
var app =new Vue({
    el:'#app',
    directives: {
        focus: {
    //指令选项
    }}
})

写法与组件基本类似，只是方法名由component 改为了directive.

自定义指令的选项是由几个钩子函数组成的，每个都是可选的。

 

• bind ： 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定

时执行一次的初始化动作．

• inserted ： 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document 中） ．

• update： 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后

的绑定值，可以忽略不必要的模板更新。

• componentUpdated ： 被绑定元素所在模板完成一次更新周期时调用．

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

 

每个钩子函数都有几个参数可用

• 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 ：“o, arg 的值是foo .

> modifiers 一个包含修饰符的对象。例如v-my-directive.foo.bar ，修饰符对象modifiers的值是｛ foo: true, bar: true ｝。

• vnode Vue 编译生成的虚拟节点，在进阶篇中介绍．

• oldVnode 上一个虚拟节点仅在update 和componentUpdated 钩子中可用。

 

<div id="app">
    <div v-test:msg.a.b="message"></div>
</div>
<script>
    Vue.directive('test',{
        bind:function (el,binding,vnode) {
            var keys = [];
            for(var i in vnode){
                keys.push(i);
            }
            el.innerHTML = 
                'name:' + binding.name + '<br>' + 
                'value:' + binding.value + '<br>' + 
                'expression:' + binding.expression + '<br>' + 
                'argument:' + binding.arg + '<br>' + 
                'modifiers:' + JSON.stringify(binding.modifiers) + '<br>' + 
                'vndode keys:' + keys.join(',')
        }
    });
    var app = new Vue({
        el: '#app',
        data:{
            message: 'some text'
        }
    })
</script>

在大多数使用场景，我们会在bind 钩子里绑定一些事件，比如在document 上用

addEventListener 绑定，在unbind 里用removeEventListener 解绑， 比较典型的示例就是让这个元

素随着鼠标拖拽。