一淆九、自定義指令
分類：全局指令 毛俏， 局部指令
1.自定義全局指令
使用全局方法Vue.directive(id,[definition])
2.自定義局部指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定義指令</title>
<script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
<div id="itany">
<!-- <div v-hello>{{msg}}</div> -->
<button @click="change">更新數(shù)據(jù)</button>
<br>
<div v-world="name">{{msg}}</div>
<div v-wbs>111</div>
<input type="text" v-model="msg" v-fous>
</div>
</body>
<script type="text/javascript">
// 自定義全局指令
// 注意：使用指令時必須在指令名稱前面加前綴v-
Vue.directive('hello',{
bind(){
alert('指令第一次綁定到元素煌寇，只調(diào)用一次逾雄，可執(zhí)行初始化操作');
},
inserted(){
alert('被綁定元素插入到dom中調(diào)用');
},
update(){
alert('被綁定元素所在模板更新時調(diào)用');
},
componentUpdated(){
alert("被綁定元素所在模板完成一次周期時使用");
},
unbind(){
alert('指令與元素解綁時調(diào)用，只調(diào)用一次');
}
});
// 鉤子函數(shù)的參數(shù)
Vue.directive('world',{
bind(el,binding){
// alert('111')
el.style.color = 'red';
console.log(el);
console.log(binding);
console.log(binding.name);//name 指令的名字
console.log(binding.value);
}
})
// 傳入一個簡單的函數(shù)
Vue.directive('wbs',function(){
alert('aaa');
})
var vm = new Vue({
el:'#itany',
data:{
msg:"hello",
name:'alice'
},
methods:{
change(){
this.msg = "你好";
}
},
directives:{
// 自定義局部指令
// focus:function(el){
// el.focus();
// }
focus:{
inserted(el){
el.focus();
}
}
}
})
</script>
</html>
