vue自定義指令
阿新 • • 發佈：2017-11-29
自定義指令 vue bind <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>自定義指令</title>
</head>
<script type="text/javascript" src="js/vue.js" ></script>
<body>
<div id="div1">
<h2 v-message>{{msg}}</h2>
<hr>
<button @click="change">更改</button>
<hr>
<span v-content:header.footer="cont">{{content}}</h2>
<hr>
<input type="text" v-onfocus>
</div>
</body>
<script>
Vue.directive('message',{
bind(){
alert('指令第一次綁定到元素上時調用，只能調用一次，可執行初始化操作');
},
inserted(){
alert('被綁定元素插入到DOM中時調用');
},
update(){
alert('被綁定元素所在模板更新時調用');
},
componentUpdated(){
alert('被綁定元素所在模板完成一次更新周期時調用');
},
unbind(){
alert('指令與元素解綁時調用，只調用一次');
}
})
Vue.directive('content',{
bind(el,binding){
console.log(el); //打印DOM
el.style.color = 'red';
console.log(binding); //打印對象
}
})
let vm = new Vue({
el: "#div1",
data:{
msg:"科比：你見過淩晨四點的洛杉磯嗎？",
content:"這是內容！！！",
cont:'內容'
},
methods:{
change(){
this.msg = '程序員：淩晨四點還沒下班...';
}
},
directive:{
//局部自定義指令
onfocus:{
inserted(el){
el.focus();
}
}
}
});
</script>
</html>
vue自定義指令