13-Vue指令-自定义指令
介绍
-
在Vue中，我们除了可以使用内置指令之外，还可以自定义指令来实现我们的需求
自定义全局指令
/* 通过在全局Vue对象上调用directive方法
格式
Vue.directive("指令名称"， {
生命周期钩子函数名称： function (el, obj) {
// el:被绑定的元素
// obj:指令被绑定时,传递的参数
}
})
0.自定义全局指定可以被任何一个Vue实例挂载的模板使用
1.在定义的时候，指令名称不需要添加v-
2.指令需要挂载到vue的生命周期钩子函数上，所以在自定指令的时候需要确定在该生命周期能获取在需要的元素
3.生命周期详解
bind：只调用一次，指令第一次绑定到元素时调用，在这里可以进行一次性的初始化设置
inserted：被绑定元素插入父节点时调用
... */
Vue.directive("color", {
bind: function (el, obj) {
el.style.color = obj.value
}
})
Vue.directive("focus", {
inserted: function (el) {
el.focus();
}
})
let vue = new Vue({
el: '#app',
});
<div id="app">
<p v-color="'red'">我是P标签</p>
<input type="text" v-focus>
</div>
自定义局部指令
/* 通过在Vue实例对象的directives属性添加
格式
new Vue({
el: '模板ID',
directives: {
"指令名称": {
生命周期钩子函数名称: function (el, obj) {}
}
}
});
0.自定义局部指令只能在对应的Vue实例挂载的模板使用
1.在定义的时候，指令名称不需要添加v-
2.指令需要挂载到vue的生命周期钩子函数上，所以在自定指令的时候需要确定在该生命周期能获取在需要的元素
3.生命周期详解
bind：只调用一次，指令第一次绑定到元素时调用，在这里可以进行一次性的初始化设置
inserted：被绑定元素插入父节点时调用
... */
let app1 = new Vue({
el: '#app1',
directives: {
"color": {
bind: function (el, obj) {
el.style.color = obj.value
}
}
}
});
let app2 = new Vue({
el: '#app2',
});
<div id="app1">
<p v-color="'red'">我是P标签</p>
</div>
<!--该模板不能使用v-color-->
<div id="app2">
<p v-color="'red'">我是P标签</p>
</div>
