自定义指令

基本用法

跟组件类似分全局注册和局部注册,区别就是把component换成derective

Vue.derective('nanme',{
    钩子函数:function(el,binding){

    }
})

钩子函数

指令定义提供了几个钩子函数(可选)

bind:只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作.

inserted:被绑定元素插入父接点时调用(父节点存在即可调用,不必存在于document中).

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

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

unbind:只调用一次,指令与元素解绑时调用.

钩子函数的参数

el:指令所绑定的元素,可以直接用来操作DOM.

binding:一个对象.包含以下属性:

1. name:指令名,不包括v-前缀.
2. value:指令的绑定值,例如v-mydirective=”1 + 1”,value=”2”.
3. oldValue:指令绑定的前一个值,仅在update和componentUpdated钩子中可用.无论值是否改变都可用.
4. expression:绑定值的字符串形式.如上例:expression=”1+1”.
5. arg:传给指令的参数. 如:v-my-directive:foo,arg=”foo”.
6. modifiers:一个包含修饰符的对象.例如v-my-directive.a.b modifiers的值是{a:true,b:true}
7. vnode:Vue编译生成的虚拟节点.
8. oldVnode:上一个虚拟节点,仅在update和componentUpdated钩子中可用.

例:

    <div id="app">
        <p v-test:goudan.a.b.c="obq"></p>
    </div>
    <script>
        Vue.directive('test',{
            bind:function(el,binding){
                el.innerHTML = 'v-test:goudan.a.b.c="obq"' + '<br/>' + 
                                'name' + ':' + binding.name + '<br>' +  //test
                                'value' + ':' + binding.value + '<br>' + //我是value
                                'argument' + ':' + binding.arg + '<br>' + //goudan
                                'modifiers' + ':' + JSON.stringify(binding.modifiers)  + '<br>' //{a:true,b:true,c:true}
            }
        })
        var app = new Vue({
            el:'#app',
            data:{
                obq:'我是value'
            }
        })
    </script>