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定義全局和局部指令及指令簡寫，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
