<!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自定義指令
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章