如何在Vue.js中自定義指令

本篇文章給大家分享的是有關(guān)如何在Vue.js中自定義指令，小編覺(jué)得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說(shuō)，跟著小編一起來(lái)看看吧。

公司主營(yíng)業(yè)務(wù)：成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站開(kāi)發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。成都創(chuàng)新互聯(lián)公司是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開(kāi)放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來(lái)驚喜。成都創(chuàng)新互聯(lián)公司推出德江免費(fèi)做網(wǎng)站回饋大家。

自定義指令

自定義指令的注冊(cè)方法和組件很像，也分全局注冊(cè)和局部注冊(cè)，比如注冊(cè)一個(gè)v-focus指令用于在、元素初始化時(shí)自動(dòng)獲得焦點(diǎn)，共有兩種寫(xiě)法：</p><pre>//全局注冊(cè) Vue.directive('focus',{ //指令選項(xiàng) }); //局部注冊(cè) var app = new Vue({ el: '#app', directive: { focus: { //指令選項(xiàng) } } });</pre><p>自定義指令的選項(xiàng)是由幾個(gè)鉤子函數(shù)組成的，每個(gè)都是可選的。</p><p>自定義指令的各個(gè)選項(xiàng)如下：</p><ul><li><p><strong>bind：</strong>只調(diào)用一次，指令第一次綁定到元素時(shí)調(diào)用，用這個(gè)鉤子函數(shù)可以定義一個(gè)在綁定時(shí)執(zhí)行一次的初始化動(dòng)作。</p></li><li><p><strong>inserted：</strong>被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用（父節(jié)點(diǎn)存在即可調(diào)用，不必在于document中）。</p></li><li><p><strong>update：</strong>被綁定元素所在的模板更新時(shí)調(diào)用，而不論綁定值是否變化。通過(guò)比較更新前后的綁定值，可以忽略不必要的模板更新。</p></li><li><p><strong>componentUpdated：</strong>被綁定元素所在模板完成一次更新周期時(shí)調(diào)用。</p></li><li><p><strong>unbind：</strong>只調(diào)用一次，指令與元素解綁時(shí)調(diào)用。</p></li></ul><p>可以根據(jù)需求在不同的鉤子函數(shù)內(nèi)完成邏輯代碼，例如上面的v-focus，我們希望在元素插入父節(jié)點(diǎn)時(shí)就調(diào)用，那用到的最好是inserted。</p><pre><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="https://unpkg.com/vue/dist/vue.js"></script> <title>自定義指令</title> </head> <body> <div id="app"> <input type="text" v-focus> </div> <script> Vue.directive('focus',{ inserted: function (el) { //聚焦元素 el.focus(); } }); var app = new Vue({ el: '#app' }); </script> </body> </html></pre><p><img src="/upload/otherpic66/12560.jpg" alt="如何在Vue.js中自定義指令"></p><p>每個(gè)鉤子函數(shù)都有幾個(gè)參數(shù)可用，具體如下：</p><ul><li><p><strong>el：</strong>指令所綁定的元素，可以用來(lái)直接操作DOM</p></li></ul><ul><li><p><strong>binding：</strong>一個(gè)對(duì)象，包含以下屬性：</p></li></ul><p> name：指令名，不包括v-前綴<br/> valule：指令的綁定值，例如v-my-directive=“1 + 1”，value的值是2<br/> oldValue：指令綁定的前一個(gè)值，僅在update和componentUpdated鉤子中可用。無(wú)論值是否改變都可用<br/> expression：綁定值的字符串形式。例如v-my-directive=“1 + 1”，expression的值是”1 + 1“<br/> arg：傳給指令的參數(shù)。例如v-my-directive:foo，arg的值是foo<br/> modifiers：一個(gè)包含修飾符的對(duì)象。例如v-my-directive.foo.bar，修飾符對(duì)象modifiers的值是{ foo:true, bar:true}</p><ul><li><p><strong>vnode：</strong>Vue編譯生成的虛擬節(jié)點(diǎn)。</p></li></ul><ul><li><p><strong>oldVnode：</strong>上一個(gè)虛擬節(jié)點(diǎn)僅在update和componentUpdated鉤子中可用。</p></li></ul><p>示例：</p><pre><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="https://unpkg.com/vue/dist/vue.js"></script> <title>自定義指令</title> </head> <body> <div id="app"> <div v-test:msg.a.b="message"></div> </div> <script> Vue.directive('test',{ bind: function (el, binding, vnode) { var keys = []; for(var i in vnode){ keys.push(i); } el.innerHTML = 'name:' + binding.name + '<br/>' + 'value:' + binding.value + '<br/>' + 'expression:' + binding.expression + '<br/>' + 'argument:' + binding.arg + '<br/>' + 'modifiers:' + JSON.stringify(binding.modifiers) + '<br/>' + 'vnode keys' + keys.join(','); } }); var app = new Vue({ el: '#app', data: { message: 'some text' } }); </script> </body> </html></pre><p><img src="/upload/otherpic66/12561.jpg" alt="如何在Vue.js中自定義指令"></p><p>以上就是如何在Vue.js中自定義指令，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見(jiàn)到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。</p> <br> 本文題目：如何在Vue.js中自定義指令 <br> 轉(zhuǎn)載注明：<a href="http://weahome.cn/article/jpppdo.html">http://weahome.cn/article/jpppdo.html</a> </div> </div> </div> <div id="squ6kqw" class="other container"> <h3>其他資訊</h3> <ul> <li> <a href="/article/hpsgcj.html">c語(yǔ)言函數(shù)庫(kù)文檔 C語(yǔ)言常用函數(shù)庫(kù)</a> </li><li> <a href="/article/hpsgeg.html">公約數(shù)函數(shù)python 最大公約數(shù)函數(shù)名</a> </li><li> <a href="/article/hpsged.html">java中的增刪改查代碼 Java增刪改查代碼</a> </li><li> <a href="/article/hpsgei.html">oracle倒數(shù)怎么截取 oracle截取第一位到倒數(shù)第三位</a> </li><li> <a href="/article/hpsgge.html">oracle數(shù)據(jù)庫(kù)怎么找 oracle數(shù)據(jù)庫(kù)</a> </li> </ul> </div> <div id="squ6kqw" class="footer"> <div id="squ6kqw" class="foota container"> <div id="squ6kqw" class="foot_nav fl col-lg-8 col-md-8 col-sm-12 col-xs-12"> <ul> <li id="squ6kqw" class="col-lg-3 col-md-3 col-sm-3 col-xs-6"> <h3>網(wǎng)站制作</h3> <a target="_blank">wap網(wǎng)站制作</a><a target="_blank">成都網(wǎng)站制作</a><a target="_blank">綿陽(yáng)網(wǎng)站制作</a><a target="_blank">四川成都網(wǎng)站制作</a><a target="_blank">成都網(wǎng)站制作</a><a target="_blank">梓潼網(wǎng)站制作公司</a> </li> <li id="squ6kqw" class="col-lg-3 col-md-3 col-sm-3 col-xs-6"> <h3>企業(yè)服務(wù)</h3> <a target="_blank">免費(fèi)網(wǎng)站建設(shè)</a><a target="_blank">成都免費(fèi)建站</a><a target="_blank">免費(fèi)建站模板</a><a target="_blank">軟文發(fā)布平臺(tái)</a><a target="_blank">代理記賬</a><a target="_blank">備案資質(zhì)管家服務(wù)</a> </li> <li id="squ6kqw" class="col-lg-3 col-md-3 col-sm-3 col-xs-6"> <h3>網(wǎng)站建設(shè)</h3> <a target="_blank">綿陽(yáng)網(wǎng)站建設(shè)公司</a><a target="_blank">內(nèi)江網(wǎng)站建設(shè)</a><a target="_blank">電商網(wǎng)站建設(shè)方案</a><a target="_blank">成都網(wǎng)站建設(shè)</a><a target="_blank">溫江網(wǎng)站建設(shè)</a><a target="_blank">網(wǎng)站建設(shè)開(kāi)發(fā)</a> </li> <li id="squ6kqw" class="col-lg-3 col-md-3 col-sm-3 col-xs-6"> <h3>服務(wù)器托管</h3> <a target="_blank">綿陽(yáng)機(jī)房租用</a><a target="_blank">重慶電信五里店機(jī)房托管</a><a target="_blank">樂(lè)山服務(wù)器托管</a><a target="_blank">雅安服務(wù)器托管</a><a target="_blank">貴安電信機(jī)房</a><a target="_blank">雅安服務(wù)器托管</a> </li> </ul> </div> <div id="squ6kqw" class="footar fl col-lg-4 col-md-4 col-sm-12 col-xs-12"> <p>全國(guó)免費(fèi)咨詢:</p> <b>400-028-6601</b> <p>業(yè)務(wù)咨詢：028-86922220 / 13518219792</p> <p>節(jié)假值班：18980820575 / 13518219792</p> <p>聯(lián)系地址：成都市太升南路288號(hào)錦天國(guó)際A幢1002號(hào)</p> </div> </div> <div id="squ6kqw" class="footb"> <div id="squ6kqw" class="copy container"> <div id="squ6kqw" class="fl">Copyright ? 成都創(chuàng)新互聯(lián)科技有限公司重慶分公司 <a target="_blank">渝ICP備2021005571號(hào)</a></div>  </div> </div> <div id="squ6kqw" class="link"> <div id="squ6kqw" class="container"> 友情鏈接:： <a target="_blank">成都網(wǎng)站建設(shè)</a> <a target="_blank">重慶網(wǎng)站建設(shè)</a> <a href="">四川網(wǎng)站建設(shè)</a> <a href="">重慶建設(shè)網(wǎng)站</a> <a target="_blank">移動(dòng)服務(wù)器托管</a> <a target="_blank">成都服務(wù)器托管</a> <a target="_blank">云服務(wù)器</a> <a target="_blank">廣告設(shè)計(jì)制作</a> <a target="_blank">重慶網(wǎng)頁(yè)設(shè)計(jì)</a> <a target="_blank">重慶做網(wǎng)站</a> <a target="_blank">重慶網(wǎng)站制作</a> <a href="">重慶網(wǎng)站建設(shè)</a> <a href="">重慶網(wǎng)站公司</a> <a href="">渝中網(wǎng)站制作</a> <a href="">重慶網(wǎng)站設(shè)計(jì)</a> </div> </div> </div> <div id="squ6kqw" class="foot"> <ul class="public-celan"> <li> <a target="_blank" class="a1 db tc"> <img src="/Public/Home/img/icon-23.png" alt="" class="db auto"> <span id="squ6kqw" class="span-txt">在線咨詢</span> </a> </li> <li> <a href="tel:18980820575" class="a1 db tc"> <img src="/Public/Home/img/icon-24.png" alt="" class="db auto"> <span id="squ6kqw" class="span-txt">電話咨詢</span> </a> </li> <li> <a target="_blank" href="tencent://message/?uin=1683211881&Site=&Menu=yes" class="a1 db tc"> <img src="/Public/Home/img/icon-25.png" alt="" class="db auto"> <span id="squ6kqw" class="span-txt">QQ咨詢</span> </a> </li> <li> <a target="_blank" href="tencent://message/?uin=532337155&Site=&Menu=yes" class="a1 db tc public-yuyue-up"> <img src="/Public/Home/img/icon-26.png" alt="" class="db auto"> <span id="squ6kqw" class="span-txt">預(yù)約顧問(wèn)</span> </a> </li> </ul> </div> <div id="squ6kqw" class="customer"> <dl class="icon1"> <dt> <a href="tencent://message/?uin=1683211881&Site=&Menu=yes"> <i class="iconT"><img src="/Public/Home/img/QQ.png" alt=""></i> <p>在線咨詢</p> </a> </dt> </dl> <dl class="icon2"> <dt><i><img src="/Public/Home/img/weixin.png" alt=""></i><p>微信咨詢</p></dt> <dd><img src="/Public/Home/img/ewm.png"></dd> </dl> <dl class="icon3"> <dt><i><img src="/Public/Home/img/dianhua.png" alt=""></i><p>電話咨詢</p></dt> <dd> <p>028-86922220（工作日）</p> <p>18980820575（7×24）</p> </dd> </dl> <dl class="icon4"> <dt class="sShow"> <a href="tencent://message/?uin=244261566&Site=&Menu=yes"> <i><img src="/Public/Home/img/dengji.png" alt=""></i><p>提交需求</p> </a> </dt> </dl> <dl class="icon5"> <dt class="gotop"> <a href="#top"> <i><img src="/Public/Home/img/top.png" alt=""></i><p>返回頂部</p> </a> </dt> </dl> </div> <footer> <div class="friendship-link"> <p>感谢您访问我们的网站，您可能还对以下资源感兴趣：</p> <a href="http://weahome.cn/" title="真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆">真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆</a> <div class="friend-links"> </div> </div> </footer> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </body><div id="iwea0" class="pl_css_ganrao" style="display: none;"><center id="iwea0"></center><samp id="iwea0"></samp><center id="iwea0"></center><acronym id="iwea0"><ul id="iwea0"><sup id="iwea0"></sup></ul></acronym><small id="iwea0"></small><pre id="iwea0"></pre><menu id="iwea0"></menu><menu id="iwea0"></menu><noframes id="iwea0"><ul id="iwea0"><sup id="iwea0"></sup></ul></noframes><th id="iwea0"></th><samp id="iwea0"></samp><tr id="iwea0"></tr><abbr id="iwea0"></abbr><menu id="iwea0"></menu><fieldset id="iwea0"></fieldset><wbr id="iwea0"></wbr><option id="iwea0"></option><acronym id="iwea0"><xmp id="iwea0"><strike id="iwea0"></strike></xmp></acronym><td id="iwea0"><fieldset id="iwea0"><menu id="iwea0"></menu></fieldset></td><s id="iwea0"></s><delect id="iwea0"></delect><tbody id="iwea0"></tbody><dd id="iwea0"></dd><abbr id="iwea0"><kbd id="iwea0"><pre id="iwea0"></pre></kbd></abbr><option id="iwea0"></option><s id="iwea0"><small id="iwea0"><option id="iwea0"></option></small></s><tbody id="iwea0"><pre id="iwea0"><del id="iwea0"></del></pre></tbody><input id="iwea0"><tbody id="iwea0"><em id="iwea0"></em></tbody></input><cite id="iwea0"><menu id="iwea0"><noscript id="iwea0"></noscript></menu></cite><rt id="iwea0"></rt><center id="iwea0"><dd id="iwea0"><tbody id="iwea0"></tbody></dd></center><option id="iwea0"></option><th id="iwea0"><s id="iwea0"><bdo id="iwea0"></bdo></s></th><tr id="iwea0"></tr><strong id="iwea0"></strong><code id="iwea0"></code><li id="iwea0"></li><abbr id="iwea0"></abbr><center id="iwea0"><dd id="iwea0"><th id="iwea0"></th></dd></center><li id="iwea0"></li><td id="iwea0"></td><kbd id="iwea0"></kbd><tr id="iwea0"><acronym id="iwea0"><xmp id="iwea0"></xmp></acronym></tr><bdo id="iwea0"><abbr id="iwea0"><kbd id="iwea0"></kbd></abbr></bdo><pre id="iwea0"></pre><table id="iwea0"></table><option id="iwea0"></option><table id="iwea0"></table><table id="iwea0"></table><source id="iwea0"></source></div> </html> <script> $(".con img").each(function(){ var src = $(this).attr("src"); //獲取圖片地址 var str=new RegExp("http"); var result=str.test(src); if(result==false){ var url = "https://www.cdcxhl.com"+src; //絕對(duì)路徑 $(this).attr("src",url); } }); window.onload=function(){ document.oncontextmenu=function(){ return false; } } </script>