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

本篇文章给大家分享的是有关如何在Vue.js中自定义指令，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

公司主营业务：成都网站设计、网站建设、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。成都创新互联公司是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。成都创新互联公司推出德江免费做网站回馈大家。

自定义指令

自定义指令的注册方法和组件很像，也分全局注册和局部注册，比如注册一个v-focus指令用于在、元素初始化时自动获得焦点，共有两种写法：</p><pre>//全局注册 Vue.directive('focus',{ //指令选项 }); //局部注册 var app = new Vue({ el: '#app', directive: { focus: { //指令选项 } } });</pre><p>自定义指令的选项是由几个钩子函数组成的，每个都是可选的。</p><p>自定义指令的各个选项如下：</p><ul><li><p><strong>bind：</strong>只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。</p></li><li><p><strong>inserted：</strong>被绑定元素插入父节点时调用（父节点存在即可调用，不必在于document中）。</p></li><li><p><strong>update：</strong>被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。</p></li><li><p><strong>componentUpdated：</strong>被绑定元素所在模板完成一次更新周期时调用。</p></li><li><p><strong>unbind：</strong>只调用一次，指令与元素解绑时调用。</p></li></ul><p>可以根据需求在不同的钩子函数内完成逻辑代码，例如上面的v-focus，我们希望在元素插入父节点时就调用，那用到的最好是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>每个钩子函数都有几个参数可用，具体如下：</p><ul><li><p><strong>el：</strong>指令所绑定的元素，可以用来直接操作DOM</p></li></ul><ul><li><p><strong>binding：</strong>一个对象，包含以下属性：</p></li></ul><p> name：指令名，不包括v-前缀<br/> valule：指令的绑定值，例如v-my-directive=“1 + 1”，value的值是2<br/> oldValue：指令绑定的前一个值，仅在update和componentUpdated钩子中可用。无论值是否改变都可用<br/> expression：绑定值的字符串形式。例如v-my-directive=“1 + 1”，expression的值是”1 + 1“<br/> arg：传给指令的参数。例如v-my-directive:foo，arg的值是foo<br/> modifiers：一个包含修饰符的对象。例如v-my-directive.foo.bar，修饰符对象modifiers的值是{ foo:true, bar:true}</p><ul><li><p><strong>vnode：</strong>Vue编译生成的虚拟节点。</p></li></ul><ul><li><p><strong>oldVnode：</strong>上一个虚拟节点仅在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中自定义指令，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。</p> <br> 网站栏目：如何在Vue.js中自定义指令 <br> 网站链接：<a href="http://www.kmywjy.com/article/jpppdo.html">http://www.kmywjy.com/article/jpppdo.html</a> </div> </div> <div class="other"> <h3>其他资讯</h3> <ul> <li> <a href="/article/ggocgi.html">怎么在Vue中实现过渡动画</a> </li><li> <a href="/article/ggocpe.html">Oracle实例创建脚本</a> </li><li> <a href="/article/ggosoh.html">如何进行MySQL数据库mysql-bin日志的管理与维护</a> </li><li> <a href="/article/ggodjs.html">编写可复用的自定义按钮</a> </li><li> <a href="/article/ggocjj.html">CSS中loading效果之吃豆人的实现方法</a> </li> </ul> </div> </div> <footer> <div class="message"> <div class="mess container"> <p>免费获取网站建设与品牌策划方案报价</p> <span>*主要业务范围包括：高端网站建设，集团网站建设(网站建设网站制作)找网站建设公司就上四川自贡网站建设。</span> <form action=""> <input type="text" class="ipt1" placeholder="联系人"> <input type="text" class="ipt2" placeholder="联系电话"> <textarea name="" id="" placeholder="内容描述：描述您的需求，如网站、微信、电商、APP等。"> 提交需求

联系我们

17383585376

手机：13518219792
地址：云南省自贡高新区昌源中路75号同丰商务中心4层407号
24小时服务热线：13518219792

网站建设服务

网站推广服务

营销网站建设
自贡网站优化
整站网站推广

网站运维服务

微信二维码

微信二维码

友情链接：泸县网站建设 syruijie.cn 成都茶叶销售无纺布袋定制成都公司注册康明斯发电机维修成都航空货运昆明发电机配件供应商新都区柴油发电机添翼二手车鉴定评估

网站建设知识

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

联系我们

网站建设服务

网站推广服务

网站运维服务

FOLLOW US