官網(wǎng)實(shí)例：
https://cn.vuejs.org/v2/api/#Vue-directive
https://cn.vuejs.org/v2/guide/custom-directive.html
指令定義函數(shù)提供了幾個(gè)鉤子函數(shù)（可選）：
bind: 只調(diào)用一次，指令第一次綁定到元素時(shí)調(diào)用，用這個(gè)鉤子函數(shù)可以定義一個(gè)在綁定時(shí)執(zhí)行一次的初始化動(dòng)作。
inserted: 被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用（父節(jié)點(diǎn)存在即可調(diào)用，不必存在于 document 中）。
update: 被綁定元素所在的模板更新時(shí)調(diào)用，而不論綁定值是否變化。通過比較更新前后的綁定值，可以忽略不必要的模板更新（詳細(xì)的鉤子函數(shù)參數(shù)見下）。
componentUpdated: 被綁定元素所在模板完成一次更新周期時(shí)調(diào)用。
unbind: 只調(diào)用一次， 指令與元素解綁時(shí)調(diào)用。
本人菜鳥型，看官網(wǎng)蒙圈，然后百度Vue.directive()的實(shí)例和用法，有的很高深，有的不健全，我貼上兩個(gè)簡(jiǎn)單的demo，希望對(duì)看到的朋友有幫助：
1、官網(wǎng)給出的demo，刷新頁面input自動(dòng)獲取焦點(diǎn)：
<div id="app"> <SPAN style="WHITE-SPACE: pre"> </SPAN><input type="text" v-focus/> </div> <div id="app"> <input type="text" v-focus/></div>// 注冊(cè)一個(gè)全局自定義指令 v-focus Vue.directive('focus', { // 當(dāng)綁定元素插入到 DOM 中。 inserted: function (el,binding) { <SPAN style="WHITE-SPACE: pre"> </SPAN>// 聚焦元素 <SPAN style="WHITE-SPACE: pre"> </SPAN>el.focus(); } }); new Vue({ el:'#app' }); // 注冊(cè)一個(gè)全局自定義指令 v-focusVue.directive('focus', { // 當(dāng)綁定元素插入到 DOM 中。 inserted: function (el,binding) { // 聚焦元素 el.focus(); }});new Vue({ el:'#app'});2、一個(gè)拖拽的demo: 1)被拖拽的元素必須用position定位，才能被拖動(dòng)；
2)自定義指令完成后需要實(shí)例化Vue,掛載元素；
3)inserted: 被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用（父節(jié)點(diǎn)存在即可調(diào)用，不必存在于 document 中）。
<style type="text/css"> .one,.two{ height:100px; width:100px; border:1px solid #000; position: absolute; -webkit-user-select: none; -ms-user-select: none; -moz-user-select: -moz-none; cursor: pointer; } .two{ left:200px; } </style> <div id="app"> <div class="one" v-drag>拖拽one</div> <div class="two" v-drag>拖拽two</div> </div> <style type="text/css"> .one,.two{ height:100px; width:100px; border:1px solid #000; position: absolute; -webkit-user-select: none; -ms-user-select: none; -moz-user-select: -moz-none; cursor: pointer; } .two{ left:200px; }</style><div id="app"> <div class="one" v-drag>拖拽one</div> <div class="two" v-drag>拖拽two</div></div>[javascript] view plain copy print?Vue.directive('drag', { inserted:function(el){ el.onmousedown=function(e){ let l=e.clientX-el.offsetLeft; let t=e.clientY-el.offsetTop; document.onmousemove=function(e){ el.style.left=e.clientX-l+'px'; el.style.top=e.clientY-t+'px'; }; el.onmouseup=function(){ document.onmousemove=null; el.onmouseup=null; } } } }) new Vue({ el:'#app' }); 總結(jié)
以上所述是小編給大家介紹的Vue.directive()的用法和實(shí)例詳解，希望對(duì)大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
