1.自定义全局指令:Vue.directive('指令名字',{钩子函数 提供的一些接口,可以执行一些操作 bind inserted update unbind}})
a.bind是指标签插入到页面中
b.inserted是指标签插入到页面中,一般书写自己的代码,有两个参数:
el:代表的当前标签
obj:获取的是当前指令的一些信息,obj.arg获取的是传递的常量参数;obj.value获取的是传递的变量量参数
c.updated:数据更新的时候,执行
d.unbind:解除绑定的时候,执行
下面举例说明:
<body>
<div id="root">
<button type="button" @click="change()" v-color:blue>该按钮自定义绑定以常量形式</button>
<p v-color:red v-if="show">该p绑定自定义指令并设置v-if</p>
<button v-color='red'>该按钮自定义绑定以变量形式</button>
{{msg}}
</div>
</body>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
Vue.directive('color',{
bind(){
console.log('指令绑定到标签身上')
},
inserted(el,obj){
console.log('标签插入到页面中');
console.log(el,obj)
if(obj.value){
el.style.color=obj.value
}else{
el.style.color=obj.arg
}
},
update(){
console.log('数据更新的时候,执行');
},
unbind(){
console.log('解除绑定的时候,执行代码');
}
})
new Vue({
el:"#root",
data(){
return{
msg:0,
show:true,
red:'orange'
}
},
methods:{
change(){
this.msg++
this.show=!this.show
}
}
})
</script>
运行打开界面触发bind和inserted如下图所示控制台输出:
然后点击蓝色按钮,这部执行的操作是将msg数据改变,show的值由true改为false,触发了updated和unbind:
2.自定义局部指令与全局同,区别在于局部在Vue实例内部指定
directives:{
指令名字:{钩子函数}
}