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

爱秀

作者

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

自定义指令

自定义指令的注册方法和组件很像，也分全局注册和局部注册，比如注册一个v-focus指令用于在、元素初始化时自动获得焦点，共有两种写法：</p><pre>//全局注册 Vue.directive('focus',{ //指令选项 }); //局部注册 varapp=newVue({ 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><!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <metahttp-equiv="X-UA-Compatible"content="ie=edge"> <scriptsrc="https://unpkg.com/vue/dist/vue.js"></script> <title>自定义指令</title> </head> <body> <divid="app"> <inputtype="text"v-focus> </div> <script> Vue.directive('focus',{ inserted:function(el){ //聚焦元素 el.focus(); } }); varapp=newVue({ el:'#app' }); </script> </body> </html></pre><p></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-前缀 valule：指令的绑定值，例如v-my-directive=“1 + 1”，value的值是2 oldValue：指令绑定的前一个值，仅在update和componentUpdated钩子中可用。无论值是否改变都可用 expression：绑定值的字符串形式。例如v-my-directive=“1 + 1”，expression的值是”1 + 1“ arg：传给指令的参数。例如v-my-directive:foo，arg的值是foo 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><!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <metahttp-equiv="X-UA-Compatible"content="ie=edge"> <scriptsrc="https://unpkg.com/vue/dist/vue.js"></script> <title>自定义指令</title> </head> <body> <divid="app"> <divv-test:msg.a.b="message"></div> </div> <script> Vue.directive('test',{ bind:function(el,binding,vnode){ varkeys=[]; for(variinvnode){ 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/>'+ 'vnodekeys'+keys.join(','); } }); varapp=newVue({ el:'#app', data:{ message:'sometext' } }); </script> </body> </html></pre><p></p><p>以上就是如何在Vue.js中自定义指令，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注恰卡编程网行业资讯频道。</p> </div> </div> <div class="view-allcontent-box"> <a href="javascript:void(0);" onclick="viewmore()"> <div class="view-allcontent" >阅读全文</div> </a> </div> <span class="zhi-con-wz-date">发布于 2021-03-24 01:22:36 </span> <div class="zhi-con-tag"><a href="https://mip.qiaqa.com/tags/vue.js.html">vue.js</a></div> <div class="zhi-con-action"> <div class="zhi-con-action-item"> <div class="icon-button fenBtn"><i class="ri-share-circle-line"></i> 分享 <div class="fenxme"><span class="menu-arrow"></span> <ul> <li><a href="https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=https://mip.qiaqa.com/idea/6235.html&title=%E5%A6%82%E4%BD%95%E5%9C%A8Vue.js%E4%B8%AD%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E4%BB%A4&desc=%E6%9C%AC%E7%AF%87%E6%96%87%E7%AB%A0%E7%BB%99%E5%A4%A7%E5%AE%B6%E5%88%86%E4%BA%AB%E7%9A%84%E6%98%AF%E6%9C%89%E5%85%B3%E5%A6%82%E4%BD%95%E5%9C%A8Vue.js%E4%B8%AD%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E4%BB%A4%EF%BC%8C%E5%B0%8F%E7%BC%96%E8%A7%89%E5%BE%97%E6%8C%BA%E5%AE%9E%E7%94%A8%E7%9A%84%EF%BC%8C%E5%9B%A0%E6%AD%A4%E5%88%86%E4%BA%AB%E7%BB%99%E5%A4%A7%E5%AE%B6%E5%AD%A6%E4%B9%A0%EF%BC%8C%E5%B8%8C%E6%9C%9B%E5%A4%A7%E5%AE%B6%E9%98%85%E8%AF%BB%E5%AE%8C%E8%BF%99%E7%AF%87%E6%96%87%E7%AB%A0%E5%90%8E%E5%8F%AF%E4%BB%A5%E6%9C%89%E6%89%80%E6%94%B6%E8%8E%B7%EF%BC%8C%E8%AF%9D%E4%B8%8D%E5%A4%9A%E8%AF%B4%EF%BC%8C%E8%B7%9F%E7%9D%80%E5%B0%8F%E7%BC%96%E4%B8%80%E8%B5%B7%E6%9D%A5%E7%9C%8B%E7%9C%8B%E5%90%A7%E3%80%82%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E4%BB%A4%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E4%BB%A4%E7%9A%84%E6%B3%A8...&summary=%E6%9C%AC%E7%AF%87%E6%96%87%E7%AB%A0%E7%BB%99%E5%A4%A7%E5%AE%B6%E5%88%86%E4%BA%AB%E7%9A%84%E6%98%AF%E6%9C%89%E5%85%B3%E5%A6%82%E4%BD%95%E5%9C%A8Vue.js%E4%B8%AD%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E4%BB%A4%EF%BC%8C%E5%B0%8F%E7%BC%96%E8%A7%89%E5%BE%97%E6%8C%BA%E5%AE%9E%E7%94%A8%E7%9A%84%EF%BC%8C%E5%9B%A0%E6%AD%A4%E5%88%86%E4%BA%AB%E7%BB%99%E5%A4%A7%E5%AE%B6%E5%AD%A6%E4%B9%A0%EF%BC%8C%E5%B8%8C%E6%9C%9B%E5%A4%A7%E5%AE%B6%E9%98%85%E8%AF%BB%E5%AE%8C%E8%BF%99%E7%AF%87%E6%96%87%E7%AB%A0%E5%90%8E%E5%8F%AF%E4%BB%A5%E6%9C%89%E6%89%80%E6%94%B6%E8%8E%B7%EF%BC%8C%E8%AF%9D%E4%B8%8D%E5%A4%9A%E8%AF%B4%EF%BC%8C%E8%B7%9F%E7%9D%80%E5%B0%8F%E7%BC%96%E4%B8%80%E8%B5%B7%E6%9D%A5%E7%9C%8B%E7%9C%8B%E5%90%A7%E3%80%82%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E4%BB%A4%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E4%BB%A4%E7%9A%84%E6%B3%A8..." target="_blank" title="分享空间"><i class="ri-qq-fill"></i> 分享空间</a></li> <li><a class="weibo-share" href="https://service.weibo.com/share/share.php?url=https://mip.qiaqa.com/idea/6235.html&title=%E5%A6%82%E4%BD%95%E5%9C%A8Vue.js%E4%B8%AD%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E4%BB%A4&pic=&appkey=&searchPic=true" target="_blank" title="分享微博"><i class="ri-weibo-fill"></i> 分享微博</a></li> <li><span class="ewm"><img src="https://mip.qiaqa.com/zb_users/theme/ZhiMedia/function/api.php?act=poster&url=https://mip.qiaqa.com/idea/6235.html" alt="https://mip.qiaqa.com/idea/6235.html" /></span><span>手机扫一扫</span></li> </ul> </div> </div> <div class="action-hai"><span class="haibao" id="6235"><i class="ri-camera-lens-line"></i> 海报</span></div> <div class="action-eyes"><i class="ri-eye-line"></i> 179</div> </div> </div> <section class="zhi-prevnext"> <a href="https://mip.qiaqa.com/idea/6234.html" title="上一篇：swagger怎么在asp.net core 3.0项目中使用">上一篇：swagger怎么在asp.net core 3.0项目中使用</a> <a href="https://mip.qiaqa.com/idea/6237.html" title="下一篇：如何在.Net Core中使用ObjectPool">下一篇：如何在.Net Core中使用ObjectPool</a> </section> </div> </div> </div> <div id="catalogBox"><div class="catalogBox_title">目录</div><ul id="catalogul"></ul></div> <div class="zhi-con-xg"> <h3>推荐阅读</h3> <div class="slide-items"> <a href="javascript:;" class="slide-btn prev-r"><i class="ri-arrow-right-s-line"></i></a> <a href="javascript:;" class="slide-btn prev-l"><i class="ri-arrow-left-s-line"></i></a> <div class="swiper-container slide-item"> <ul class="swiper-wrapper slide-item-body"> <li class="swiper-slide"> <a href="https://mip.qiaqa.com/idea/59343.html"> <div class="new-body"> <p class="new-body-title">Vue.js组件是什么</p> <p class="new-body-text">Vue.js组件是什么这篇文章给大家分享的是有关Vue.js组件是...</p> </div> </a> </li> <li class="swiper-slide"> <a href="https://mip.qiaqa.com/idea/59329.html"> <div class="new-body"> <p class="new-body-title">Vue.js响应式数据如何实现</p> <p class="new-body-text">Vue.js响应式数据如何实现小编给大家分享一下Vue.js响应式...</p> </div> </a> </li> <li class="swiper-slide"> <a href="https://mip.qiaqa.com/idea/48419.html"> <div class="new-body"> <p class="new-body-title">怎么将Vue.js应用程序与Drupal做一个集成</p> <p class="new-body-text">怎么将Vue.js应用程序与Drupal做一个集成本文小编为大家详...</p> </div> </a> </li> <li class="swiper-slide"> <a href="https://mip.qiaqa.com/idea/48418.html"> <div class="new-body"> <p class="new-body-title">Vue.js双向绑定的方法是什么</p> <p class="new-body-text">Vue.js双向绑定的方法是什么本篇内容主要讲解“Vue.js双向...</p> </div> </a> </li> <li class="swiper-slide"> <a href="https://mip.qiaqa.com/idea/48411.html"> <div class="new-body"> <p class="new-body-title">vue.js怎么下载安装</p> <p class="new-body-text">vue.js怎么下载安装本文小编为大家详细介绍“vue.js怎么下...</p> </div> </a> </li> <li class="swiper-slide"> <a href="https://mip.qiaqa.com/idea/48410.html"> <div class="new-body"> <p class="new-body-title">Vue.js组件化怎么实现</p> <p class="new-body-text">Vue.js组件化怎么实现本文小编为大家详细介绍“Vue.js组件...</p> </div> </a> </li> <li class="swiper-slide"> <a href="https://mip.qiaqa.com/idea/48406.html"> <div class="new-body"> <p class="new-body-title">vue.js跨域问题如何解决</p> <p class="new-body-text">vue.js跨域问题如何解决本文小编为大家详细介绍“vue.js跨...</p> </div> </a> </li> <li class="swiper-slide"> <a href="https://mip.qiaqa.com/idea/41266.html"> <div class="new-body"> <p class="new-body-title">Vue3中怎么用WeakMap作为缓存区</p> <p class="new-body-text">Vue3中怎么用WeakMap作为缓存区这篇文章主要介绍“Vue3...</p> </div> </a> </li> <li class="swiper-slide"> <a href="https://mip.qiaqa.com/idea/23233.html"> <div class="new-body"> <p class="new-body-title">如何使用Vue.js和MJML创建响应式电子邮件</p> <p class="new-body-text">本篇内容介绍了“如何使用Vue.js和MJML创建响应式电子邮件”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接...</p> </div> </a> </li> <li class="swiper-slide"> <a href="https://mip.qiaqa.com/idea/9337.html"> <div class="new-body"> <p class="new-body-title">怎么在Vue.js中引入图片路径</p> <p class="new-body-text">今天就跟大家聊聊有关怎么在Vue.js中引入图片路径，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家...</p> </div> </a> </li> </ul> </div> </div> </div> </div> </div> </div> <div class="zhi-user-modal"> <div class="zhi-user-modal-container"> <ul class="zhi-switcher"> <li><a href="javascript:void(0);">用户登录</a></li> <li><a href="javascript:void(0);">注册新用户</a></li> </ul> <div id="zhi-login"> <form method="post" action="#" class="zhi-form"> <p class="fieldset"> <label class="image-replace zhi-username" for="edtUserName">用户名</label> <input type="text" class="full-width has-padding has-border" placeholder="用户名" id="edtUserName" name="edtUserName" size="20" value="" tabindex="1" /> </p> <p class="fieldset"> <label class="image-replace zhi-password" for="edtPassWord">密码</label> <input type="password" class="full-width has-padding has-border" placeholder="密码" id="edtPassWord" name="edtPassWord" size="20" tabindex="2" /> </p> <p class="fieldset"> <input type="checkbox" name="chkRemember" id="chkRemember" tabindex="98" /> <label for="chkRemember">记住登录状态</label> <a class="fieldsetrig" href="https://mip.qiaqa.com/?user=repass">忘记密码？</a> </p> <p class="fieldset"> <input id="btnPost" name="btnPost" type="submit" value="登录" class="full-width" tabindex="99"/> <input type="hidden" name="username" id="username" value="" /> <input type="hidden" name="password" id="password" value="" /> <input type="hidden" name="savedate" id="savedate" value="1" /> </p> </form> </div> <div id="zhi-singup"> <form method="post" action="#" class="zhi-form" id="formsing"> <p class="zhi-singup-set"> <label class="image-replace zhi-username">用户名</label> <input class="full-width has-padding has-border" id="zhanghao" name="zhanghao" type="text" placeholder="输入用户名"> </p> <p class="zhi-singup-set"> <label class="image-replace zhi-email">邮箱</label> <input class="full-width has-padding has-border" id="email" name="email" type="text" placeholder="输入mail"> </p> <p class="zhi-singup-set"> <label class="image-replace zhi-password">密码</label> <input class="full-width has-padding has-border" id="zpassword" name="zpassword" type="password" placeholder="输入密码"> </p> <p class="zhi-singup-set"> <label class="image-replace zhi-password">确认密码</label> <input class="full-width has-padding has-border" id="repassword" name="repassword" type="password" placeholder="确认密码"> </p> <p class="zhi-singup-set"> <input name="code" type="text" maxlength="6" class="form-control" placeholder="图形验证码" autocomplete="off" required=""> <span class="fieldset-code" style="width:96px;"> <img src="https://mip.qiaqa.com/zb_system/script/c_validcode.php?id=singin" id="singin" onclick="javascript:this.src='https://mip.qiaqa.com/zb_system/script/c_validcode.php?id=singin&tm='+Math.random();" alt="图形验证码"/> </span> </p> <p class="zhi-singup-set"> <input type="checkbox" name="xieyi" id="xieyi" tabindex="98" /> <label for="xieyi">我已阅读并同意 <a href="">用户协议</a></label> </p> <p class="zhi-singup-set"> <input id="btnSin" class="full-width" type="submit" value="注册新用户"> </p> </form> </div> <a href="javascript:void(0);" class="zhi-close-form"></a> </div> </div> <div class="zhiback" id="zhiback"> <div class="askBox"> <div class="ask-group"> <form action="https://mip.qiaqa.com/zb_users/theme/ZhiMedia/function/cmd.php?act=ask" method="POST" id="formask"> <div class="ask-item"> <div class="ask-item-img"> <img src="https://mip.qiaqa.com/zb_users/avatar/0.png?1745463092" alt="" /> </div> <input type="text" id="asktitle" name="asktitle" placeholder="请输入问题标题"> </div> <div class="ask-item"> <textarea name="askcon" id="askcon"> 请输入问题背景及详细信息...