Vue.directive —— 自定义指令
Vue中除了默认设置的核心指令( v-model 和 v-show ),Vue 也允许注册自定义指令,可以对纯 DOM 元素进行底层操作,这时候就会用到自定义指令。
创建全局自定义指令
使用Vue.directive()
创建全局自定义指令。其中my-color
为指令名称。
定义指令名称的时候,不需要加v-前缀,调用的时候,必须在名称前加上v-。
Vue.directive('my-color', function(el, binding, vnode){
// el: 指令所绑定的元素,可以用来操作dom
// binding: 一个对象,包含指令的信息(属性)
// vnode: Vue生成的虚拟节点
})
使用自定义指令设置背景颜色和文本。
<div id="app">
// 指令函数可以接受合法的javaScript表达式
<h4 v-run="{text: 'blue', color: 'pink'}"></h4>
</div>
<script>
Vue.directive("v-run", function(el, binding{
// 设置背景颜色和文本
el.innerHTML = binding.value.text;
el.style.backgroundColor = binding.value.color;
}))
</script>
创建局部自定义指令
组件或Vue构造函数中接受一个 directives 的选项。
<div id="app">
<span v-tc="{myColor: 'green'}">局部自定义指令</span>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
isShow: true
},
// 局部自定义指令
directives: {
'tc': { //指令名称
bind: function(el, binding){
el.style.color = binding.value.myColor
}
}
}
})
</script>
然后可以在模板中任何元素上使用自定义指令。
//调用:
<h1 v-my-color>自定义指令</h1>
自定义指令的生命周期
自定义指令有5个生命周期(也叫作钩子函数)分别是:
bind
:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。inserted
:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。update
:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode
更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 。componentUpdated
:指令所在组件的 VNode 及其子 VNode 全部更新后调用。unbind
:只调用一次,指令与元素解绑时调用。(解绑元素需要移除dom,否则unbind不会被调用。绑定一个类似开关一样的值,通过改变这个值来达到的效果,比如:v-if和v-show)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<span v-hello="color3" v-if="isShow">{{message}}</span>
<button @click="add"> 点击开始加1</button>
<button onclick="jiebang()">解绑</button>
// 指令函数可以接受合法的javaScript表达式
<h4 v-run="{text: 'blue', color: 'pink'}"></h4>
// 使用局部自定义指令
<span v-tc="{myColor: 'green'}">局部自定义指令</span>
</div>
</body>
<script>
function jiebang(){
this.isShow = !this.isShow;
}
// 全局自定义指令
Vue.directive("v-run", function(el, binding{
// 设置背景颜色和文本
el.innerHTML = binding.value.text;
el.style.backgroundColor = binding.value.color;
}))
Vue.directive("hello",{
bind:function(el,bingind,vnode){
// bingind.value 指令绑定的值
el.style["color"] = bingind.value;
console.log("1-bind");
},
inserted:function(){
console.log("2-insert");
},
update:function(){
console.log("3-update");
},
componentUpdated:function(){
console.log('4 - componentUpdated');
},
unbind:function(){
console.log('5 - unbind');
}
})
var app = new Vue({
el:"#app",
data:{
isShow: true,
message:10,
color3:"red",
myColor: "blue"
},
methods:{
add:function(){
this.message++;
}
},
//定义局部自定义指令
directives: {
'tc': { //指令名称
bind: function(el, binding){
el.style.color = binding.value.myColor
}
}
}
})
</script>
</html>