版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Tyro_java/article/details/81914726
指令的定义
通过全局API的定义
Vue.directive定义指令的多种方式
- 简单定义
Vue.directive('test', function(el, binding, vnode) {
// el 是当前元素
el.style="color:" + binding.value;
console.log(binding);
// binding 是一个指令中的对象
// binding.name
// binding.expression
// binding.value 自定义指令的值
// binding.name
})- 定义带有钩子函数的指令
// 复杂的设置指令的方法，指令的生命周期
Vue.directive('test2', {
bind() {
// bind只执行一次，在初始化时执行
console.log('bind')
},
inserted() {
// 被绑定元素插入父节点时即可调用
console.log('inserted')
},
update() {
// 被绑定元素模板更新时调用
console.log('update')
},
componentUpdated() {
// 被绑定元素所在模板更新时调用
console.log('componentUpdated');
},
unbind() {
// 只调用一次，即在指令与元素解绑时调用
console.log('unbind');
}
});完整例子演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
</head>
<body>
<div id="app">
<div v-test="color">{{msg}}</div>
<div>{{num}}</div>
<div><button @click="add">Add</button></div>
<h3 v-test2="color" @click="unbind">test{{num}}</h3>
</div>
</body>
</html>
<script>
// 第一种定义指令的方法: 简单设置一个指令
Vue.directive('test', function(el, binding, vnode) {
// el 是当前元素
el.style="color:" + binding.value;
console.log(binding);
// binding 是一个指令中的对象
// binding.name
// binding.expression
// binding.value 自定义指令的值
// binding.name
})
// 复杂的设置指令的方法，指令的生命周期
Vue.directive('test2', {
bind() {
// bind只执行一次，在初始化时执行
console.log('bind')
},
inserted() {
// 被绑定元素插入父节点时即可调用
console.log('inserted')
},
update() {
// 被绑定元素模板更新时调用
console.log('update')
},
componentUpdated() {
// 被绑定元素所在模板更新时调用
console.log('componentUpdated');
},
unbind() {
// 只调用一次，即在指令与元素解绑时调用
console.log('unbind');
}
});
var app = new Vue({
el: '#app',
data: {
msg: 'Hello',
color: 'pink',
num: 6
},
methods: {
add() {
this.num ++;
},
unbind() {
app.$destroy(); // 此处会销毁全部指令
}
}
})
</script>