Vue有很多内置的指令,比如说v-on,v-model,v-clock等等,每一个指令会完成一定的功能,但是这些内置的指令总会有些局限性,要是能够自定义指令就好了--
Vue的自定义指令分类:
全局指令和局部指令
Vue指令的定义和用法(以全局指令为例):
1.语法:Vue.directive(指令ID,定义对象),在这里“指令ID”就是指令的名字,“定义对象”就是一个对象,包含有该指令的钩子函数,例如:
Vue.directive("commd",{
// 当该指令第一次绑定到元素上时调用,只调用一次,可以用来执行初始化操作(简言之,指令绑定到元素)
bind:function(){//常用!!!
alert("当该指令第一次绑定到元素上时调用,只调用一次,可以用来执行初始化操作")
},
//被绑定有自定义指令的元素插入到DOM中时调用,在这里是插入到了#container中(简言之,元素插入到DOM元素中)
inserted:function(){
alert("被绑定有自定义指令的元素插入到DOM(父节点)中时调用,在这里是插入到了#container中")
},
// 当被绑定的元素所在模板更新时调用
update:function(){
alert("当被绑定的元素所在模板更新时调用")
},
// 当被绑定的元素所在模板完成一次更新时调用(模板更新后调用)
componentUpdated:function(){
alert("当被绑定的元素所在模板完成一次更新时调用(模板更新后调用)")
},
// 当指令和元素解绑的时候调用,只执行一次(因为毕竟解绑一次就完成了嘛!)
unbind:function(){
alert("当指令和元素解绑的时候调用,只执行一次(因为毕竟解绑一次就完成了嘛!)")
}
})
这里的bind,inserted,update等等都是该指令的钩子函数,所谓的
钩子函数就是在该指令不同的阶段执行不同的方法,一般常用的钩子函数是bind和update,最常用的是bind;
钩子函数的参数:
因为比较常用的钩子函数是bind阶段的,所以就以该阶段的钩子函数为例:
Vue.directive("hello",{
bind:function(el,binding){
alert("绑定好了!!");
console.log(el)//这里的el指的就是当前指令绑定的DOM元素;
console.log(binding)//返回的是一个对象,包含有以下属性:
// 1.name:指令名;这里是hello
// 2.value:指令的绑定值,(当前指令绑定的值,在这里绑定的值是字符串 "是的",已经解析过的),
// 3.expression:指令绑定值的字符串形式,在这里是字符串:"isTRue"
// 4.arg:传递给指令的参数,传递参数的方法----v-指令:参数,在这里的参数是“ererer”,
//5.modifiers:一个对象,包含当前的指令的修饰符,给指令添加修饰符的方法----v-指令.修饰符一.修饰符二....
}
})
var app = new Vue({
el:"#container",
data:{
greeting:"热爱编程...",
isTRue:"是的"
},
// 执行该方法时,由于改变了greeting,所以模板也发生了改变,执行update钩子函数
methods:{
changeData:function(){
this.greeting = "培养自己对编程的热爱";
this.isTRue = "不是的!"
}
}
})
HTML部分
<!-- 钩子函数的参数 -->
<h3 v-hello:ererer.huhu.hehe = "isTRue">{{greeting}}</h3>
<!--在这里该指令的参数就是字符串ererer,修饰符就是字符串"huhu"和"hehe",可以有多个修饰符 -->
以上是怎么定义全局指令的,那么该指令是怎么用的呢?如下:
<h3 v-commd>{{greeting}}</h3>
<!-- 注意:在元素中添加自定义指令时必须加前缀v- -->
自定义指令和内置指令一样都是需要在前面加前缀“v-”才起作用;
Vue全局指令的简化写法:
1.语法:Vue.directive("指令ID",callback),在这里的callback函数会在指令bind和update的时候执行和调用,例如:
Vue.directive("lala",function(){
alert("我被弹出来了!")
})
这里的function函数只有在bind和update阶段的时候会执行;
局部自定义指令:
语法:写在Vue实例中的directives选项中:
var app = new Vue({
el:"#container",
data:{
greeting:"热爱编程...",
isTRue:"是的"
},
// 执行该方法时,由于改变了greeting,所以模板也发生了改变,执行update钩子函数
methods:{
changeData:function(){
this.greeting = "培养自己对编程的热爱";
this.isTRue = "不是的!"
}
},
directives:{//自定义局部指令
//在这里fool就是指令ID:
fool:{
//各种钩子函数(可以有一个也可以有多个)
//bind:function(){},
//inserted:function(){},
//....
}
}
})