vue.jpg
directive定義全局和局部指令以及指令簡寫
1.使用Vue.directive()定義一個全局指令 Vue.directive('指令名稱',{對象})
2.參數(shù)一：指令的名稱负蚊，定義時指令前面不需要寫v-
3.參數(shù)二：是一個對象诬辈，該對象中有相關(guān)的操作函數(shù)
4.在調(diào)用的時候必須寫v-
5.自定義指令中的常用的3個鉤子函數(shù)：
5.1bind：
1.指令綁定到元素上回立刻執(zhí)行bind函數(shù)雨饺，只執(zhí)行一次
2.每個函數(shù)中第一個參數(shù)永遠是el，表示綁定指令的元素钠龙，el參數(shù)是原生js對象
3.通過el.focus()是無法獲取焦點的炬藤，因為只有插入DOM后才生效
5.2inserted：
1.inserted表示一個元素，插入到DOM中會執(zhí)行inserted函數(shù)碴里，只觸發(fā)一次
5.3updated：
1.當VNode更新的時候會執(zhí)行updated沈矿，可以觸發(fā)多次
6.定義一個局部指令
測試案例步驟：
1.首先需要在html中創(chuàng)建一個盒子
2.接著需要通過實例化Vue并且通過el將盒子所對應(yīng)的id進行綁定
3.在盒子里面所對應(yīng)的要自定義的標簽上通過v-xxx標注
局部定義的格式：
directives：{
'xxx':{
bind:function(el,binding){
el.style.xxx = binding.value
}
}
}
7.指令函數(shù)的簡寫
function等同于將代碼寫入bind和update里
directive：{
'xxx'：function(el,binding){
el.style.xxx = binding.value
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue-2.4.0.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<p v-fontsize="'20px'" v-color="'green'">{{msg}}<input type="text" v-focus /></p>
<p v-color="'red'">{{msg}}<input type="text" v-color="'red'" /></p>
</div>
</body>
<script type="text/javascript">
//使用Vue.directive()定義一個全局指令
//1.參數(shù)一：指令的名稱，定義時指令前面不需要寫v-
//2.參數(shù)二：是一個對象咬腋，該對象中有相關(guān)的操作函數(shù)
//3.在調(diào)用的時候必須寫v-
Vue.directive('focus',{
//1.指令綁定到元素上回立刻執(zhí)行bind函數(shù)羹膳，只執(zhí)行一次
//2.每個函數(shù)中第一個參數(shù)永遠是el，表示綁定指令的元素根竿，el參數(shù)是原生js對象
//3.通過el.focus()是無法獲取焦點的陵像，因為只有插入DOM后才生效
bind:function(el){
//el.focus()
},
//inserted表示一個元素，插入到DOM中會執(zhí)行inserted函數(shù)寇壳，只觸發(fā)一次
inserted:function(el){
el.focus()
},
//當VNode更新的時候會執(zhí)行updated醒颖，可以觸發(fā)多次
updated:function(el){
//el.focus()
}
})
//自定義一個設(shè)置字體顏色指令
Vue.directive('color',{
//只要通過指令綁定給了元素，元素一定會顯示在頁面上
//一般情況和樣式有關(guān)的使用bind函數(shù)
bind:function(el,binding){ //通過binding來傳遞值
el.style.color = binding.value
}
})
//實例化Vue
var vm = new Vue({
el:'#box',
data:{
msg:'測試：'
},
//定義一個局部指令
directives:{ //自定義一個局部指令
'color':{ //設(shè)置字體顏色
bind:function(el,binding){
el.style.color = binding.value
}
},
//指令函數(shù)的簡寫：
//function等同于將代碼寫入bind和update里
'fontsize':function(el,binding){ //設(shè)置字體大小
el.style.fontSize = parseInt(binding.value) + 'px'
}
}
})
</script>
</html>
0.jpg
