這篇文章主要介紹了vue directive定義全局和局部指令及指令簡寫,本文分步驟給大家介紹的非常詳細，具有一定的參考借鑑價值，需要的朋友可以參考下
directive定義全局和局部指令以及指令簡寫
1.使用Vue.directive()定義一個全局指令 Vue.directive('指令名稱',{對象})
2.參數一：指令的名稱，定義時指令前面不需要寫v-
3.參數二：是一個對象，該對象中有相關的操作函數
4.在調用的時候必須寫v-
5.自定義指令中的常用的3個鉤子函數：
5.1bind：
1.指令綁定到元素上回立刻執行bind函數，只執行一次
2.每個函數中第一個參數永遠是el，表示綁定指令的元素，el參數是原生js對象
3.通過el.focus()是無法獲取焦點的，因爲只有插入DOM後才生效
5.2inserted：
1.inserted表示一個元素，插入到DOM中會執行inserted函數，只觸發一次
5.3updated：
1.當VNode更新的時候會執行updated，可以觸發多次
6.定義一個局部指令
測試案例步驟：
1.首先需要在html中創建一個盒子
2.接着需要通過實例化Vue並且通過el將盒子所對應的id進行綁定
3.在盒子裏面所對應的要自定義的標籤上通過v-xxx標註
局部定義的格式：
directives：{
'xxx':{
bind:function(el,binding){
el.style.xxx = binding.value
}
}
}
7.指令函數的簡寫
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.參數一：指令的名稱，定義時指令前面不需要寫v-
//2.參數二：是一個對象，該對象中有相關的操作函數
//3.在調用的時候必須寫v-
Vue.directive('focus',{
//1.指令綁定到元素上回立刻執行bind函數，只執行一次
//2.每個函數中第一個參數永遠是el，表示綁定指令的元素，el參數是原生js對象
//3.通過el.focus()是無法獲取焦點的，因爲只有插入DOM後才生效
bind:function(el){
//el.focus()
},
//inserted表示一個元素，插入到DOM中會執行inserted函數，只觸發一次
inserted:function(el){
el.focus()
},
//當VNode更新的時候會執行updated，可以觸發多次
updated:function(el){
//el.focus()
}
})
//自定義一個設置字體顏色指令
Vue.directive('color',{
//只要通過指令綁定給了元素，元素一定會顯示在頁面上
//一般情況和樣式有關的使用bind函數
bind:function(el,binding){ //通過binding來傳遞值
el.style.color = binding.value
}
})
//實例化Vue
var vm = new Vue({
el:'#box',
data:{
msg:'測試：'
},
//定義一個局部指令
directives:{ //自定義一個局部指令
'color':{ //設置字體顏色
bind:function(el,binding){
el.style.color = binding.value
}
},
//指令函數的簡寫：
//function等同於將代碼寫入bind和update裏
'fontsize':function(el,binding){ //設置字體大小
el.style.fontSize = parseInt(binding.value) + 'px'
}
}
})
</script>
</html>
總結
以上所述是小編給大家介紹的vue directive定義全局和局部指令及指令簡寫，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回覆大家的。在此也非常感謝大家對神馬文庫網站的支持！