vue-directive
2018-10-25 本文已影响0人
AoeKeller
vue中有开放指令的api，可以给我们自定义一些指令。
看下面例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>directive</title>
<script src="../asset/lib/vue.js"></script>
</head>
<body>
<div id="app">
<div id="num" v-jsppm="color">{{num}}</div>
<button @click="add">add</button>
</div>
</body>
<script>
Vue.directive('jsppm', function (el, binding) {
console.log(el);
console.log(binding);
el.style = 'color:' + binding.value;
});
var app = new Vue({
el: '#app',
data: {
num: 1
},
methods: {
add:function () {
this.num ++;
}
}
})
</script>
</html>
给id为num的div加了一个自定义的属性，然后用Vue.directive全局注册该指令，注册函数的参数如可参见日志
其中el是指的当前指令绑定的对象标签
binding对象中包含了指令相关信息
其中自定义指令的生命周期函数如下：
bind: function(el, binding) { //刚绑定指令触发
console.log('1-bind');
console.log(binding)
el.style = 'color:' + binding.value
},
inserted: function() { //元素插入父节点时候触发
console.log('2-inserted');
},
update: function() { //每次元素更新时触发
console.log('3-update');
},
componentUpdated: function() { //元素更新完成时触发
console.log('4-componentUpdated');
},
unbind:function() { //指令解绑这时候触发
console.log('5-unbind');
}
可以运行如下代码打开控制台看一下效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>directive</title>
<script src="../asset/lib/vue.js"></script>
</head>
<body>
<div id="app">
<div v-jsppm="color">{{num}}</div>
<button @click="add">add</button>
</div>
<button onclick="unbind()">ubind</button>
</body>
<script>
function unbind() {
app.$destroy();
}
Vue.directive('jsppm', {
bind: function(el, binding) { //刚绑定指令触发
console.log('1-bind');
console.log(binding)
el.style = 'color:' + binding.value
},
inserted: function() { //元素插入父节点时候触发
console.log('2-inserted');
},
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: {
num: 1,
color: 'red'
},
methods: {
add:function () {
this.num ++;
}
}
})
</script>
</html>
vue.directive的详情见官网
