Vue.directive指令(自定义指令) 生命周期
自定义指令有5个生命周期(也叫作钩子函数)分别是bind ,inserted,update,componentUpdate,unbindbind 只调用一次,指令第一次绑定到元素时候调用,用这个钩子可以定义一个绑定时执行一次的初始化动作。inserted:被绑定的元素插入父节点的时候调用(父节点存在即可调用,不必存在document中)update: 被绑定与元素所在模板更新时调用...
·
自定义指令有5个生命周期(也叫作钩子函数)分别是bind ,inserted,update,componentUpdate,unbind
bind 只调用一次,指令第一次绑定到元素时候调用,用这个钩子可以定义一个绑定时执行一次的初始化动作。
inserted:被绑定的元素插入父节点的时候调用(父节点存在即可调用,不必存在document中)
update: 被绑定于元素所在模板更新时调用,而且无论绑定值是否有变化,通过比较更新前后的绑定值,忽略不必要的模板更新
componentUpdate :被绑定的元素所在模板完成一次更新更新周期的时候调用
unbind: 只调用一次,指令与元素解绑的时候调用
例子如下(需引入vue.js)
<!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">{{message}}</span>
<button @click="add"> 点击开始加1</button>
<button onclick="jiebang()">解绑</button>
</div>
</body>
<script>
//解绑vue
function jiebang(){
app.$destroy();
}
Vue.directive("hello",{
bind:function(el,bingind,vnode){
//只调用一次,指令第一次绑定到元素时候调用,
//用这个钩子可以定义一个绑定时执行一次的初始化动作。
el.style["color"] = bingind.value;
console.log("1-bind");
},
inserted:function(){
//被绑定的元素插入父节点的时候调用(父节点存在即可调用,不必存在document中)
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:{
message:10,
color3:"red"
},
methods:{
add:function(){
this.message++;
}
}
})
</script>
</html>
更多推荐
已为社区贡献30条内容
所有评论(0)