directive定義全局和局部指令以及指令簡(jiǎn)寫
1.使用Vue.directive()定義一個(gè)全局指令 Vue.directive('指令名稱',{對(duì)象})
2.參數(shù)一：指令的名稱，定義時(shí)指令前面不需要寫v-
3.參數(shù)二：是一個(gè)對(duì)象，該對(duì)象中有相關(guān)的操作函數(shù)
4.在調(diào)用的時(shí)候必須寫v-
5.自定義指令中的常用的3個(gè)鉤子函數(shù)：
5.1bind：
1.指令綁定到元素上回立刻執(zhí)行bind函數(shù)，只執(zhí)行一次
2.每個(gè)函數(shù)中第一個(gè)參數(shù)永遠(yuǎn)是el，表示綁定指令的元素，el參數(shù)是原生js對(duì)象
3.通過el.focus()是無法獲取焦點(diǎn)的，因?yàn)橹挥胁迦隓OM后才生效
5.2inserted：
1.inserted表示一個(gè)元素，插入到DOM中會(huì)執(zhí)行inserted函數(shù)，只觸發(fā)一次
5.3updated：
1.當(dāng)VNode更新的時(shí)候會(huì)執(zhí)行updated，可以觸發(fā)多次
6.定義一個(gè)局部指令
測(cè)試案例步驟：
1.首先需要在html中創(chuàng)建一個(gè)盒子
2.接著需要通過實(shí)例化Vue并且通過el將盒子所對(duì)應(yīng)的id進(jìn)行綁定
3.在盒子里面所對(duì)應(yīng)的要自定義的標(biāo)簽上通過v-xxx標(biāo)注
局部定義的格式：
directives：{ 'xxx':{ bind:function(el,binding){ el.style.xxx = binding.value } } }7.指令函數(shù)的簡(jiǎn)寫
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()定義一個(gè)全局指令 //1.參數(shù)一：指令的名稱，定義時(shí)指令前面不需要寫v- //2.參數(shù)二：是一個(gè)對(duì)象，該對(duì)象中有相關(guān)的操作函數(shù) //3.在調(diào)用的時(shí)候必須寫v- Vue.directive('focus',{ //1.指令綁定到元素上回立刻執(zhí)行bind函數(shù)，只執(zhí)行一次 //2.每個(gè)函數(shù)中第一個(gè)參數(shù)永遠(yuǎn)是el，表示綁定指令的元素，el參數(shù)是原生js對(duì)象 //3.通過el.focus()是無法獲取焦點(diǎn)的，因?yàn)橹挥胁迦隓OM后才生效 bind:function(el){ //el.focus() }, //inserted表示一個(gè)元素，插入到DOM中會(huì)執(zhí)行inserted函數(shù)，只觸發(fā)一次 inserted:function(el){ el.focus() }, //當(dāng)VNode更新的時(shí)候會(huì)執(zhí)行updated，可以觸發(fā)多次 updated:function(el){ //el.focus() } }) //自定義一個(gè)設(shè)置字體顏色指令 Vue.directive('color',{ //只要通過指令綁定給了元素，元素一定會(huì)顯示在頁面上 //一般情況和樣式有關(guān)的使用bind函數(shù) bind:function(el,binding){ //通過binding來傳遞值 el.style.color = binding.value } }) //實(shí)例化Vue var vm = new Vue({ el:'#box', data:{ msg:'測(cè)試：' }, //定義一個(gè)局部指令 directives:{ //自定義一個(gè)局部指令 'color':{ //設(shè)置字體顏色 bind:function(el,binding){ el.style.color = binding.value } }, //指令函數(shù)的簡(jiǎn)寫： //function等同于將代碼寫入bind和update里 'fontsize':function(el,binding){ //設(shè)置字體大小 el.style.fontSize = parseInt(binding.value) + 'px' } } }) </script></html>
新聞熱點(diǎn)
疑難解答
圖片精選
