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