Vue指令初识

原创 heliang090034 随笔 JS 208阅读 2017-12-05 16:10:18 举报

1.Vue指令分为两类:
1).全局指令
2).局部指令

全局指令:在Vue函数上注册 使用
Vue.driective("指令名称",{
bind:function(el,ref,vnode){

   },
   inserted:function(el,binding,vnode){
   },
   update:function(el,ref,vnode){

   },
   componentUpdated:function(){

   },
   unbind:function(el,binding,vnode){

   }

})
bind方法在指令第一次绑定到元素时执行,inserted在被绑定元素插入父节点时调用
update是在虚拟dom更新时调用 unbind在元素指令解绑时调用 componentUpdated 指令所在组件虚拟dom及子虚拟dom全部更新后调用

钩子函数涉及到的参数:
el:为当前绑定元素的dom节点
binding:为绑定对象信息包含:
name:指令名称
value:绑定指令的值 注意:这个值是运算后的值 如: v-driective="1+1" 此时获取binding.value 值为:2 而不是"1+1"
expression:指令表达式 和上边的值注意区分该属性返回对应的表达式:"1+1" 而不会返回"2"
arg:传给指令的参数 如:v-driective:foo="1+1" 其中的foo就是参数
modifiers:返回一个装饰器对象 如:v-my-directive.foo.bar 中修饰符对象为{foo:true,bar:true}

类似 
Vue.driective("指令名称",function(){

});
实际是在bind和update的简写形式
局部指令:是在vue实例对象上注册的指令,在这个实例绑定的作用域内有效,如:
 var vm=new Vue({
    el:'body',
    directives:{
       '指令名称':function(el,binding){

       }
    }
 })

以上就是vue中指令的基本使用,今天就先写到这里吧,之后有时间在补充

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复