vue 自定义指令 directive

最新推荐文章于 2020-11-24 19:42:46 发布

MercedesCc

最新推荐文章于 2020-11-24 19:42:46 发布

阅读量303

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/MercedesCc/article/details/103989613

本文深入探讨了Vue自定义指令的使用，通过实例演示如何创建v-focus和v-time指令，前者用于自动聚焦输入框，后者用于实时显示时间戳的友好格式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue自定义指令顾名思义，就是vue给我们提供的一个编写各种指令的入口。比如v-for,v-if ,v-show等，根据实际业务需求

有时会用到自定义指令，一定程度上可以解决过滤器并承担部分组件功能的作用。

但是总体而言，由于指令需要操作dom,因此能用组件就不用指令。言归正传：

写一个v-focus

   <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>

当然指令可以很复杂，比如写一个v-time ,会自动将后端给我们的时间戳变为几前，几分钟前以及几小时前这种。

封装time.js

   <div id="app">
       <div class="list" v-time="item" v-for="(item,index) in list" :key="index">
           {{item }}
       </div>
   </div>
   </body>

       Vue.directive('time',{
           bind:function(el,binding){
               el.innerHTML = Time.getFormatTime(binding.value*1000)
               el._timeout_ = setInterval(()=>{
                   el.innerHTML = Time.getFormatTime(binding.value*1000)
               },60000)
           },
           unbind:function(el){
               clearInterval(el._timeout_);
               delete el._timeout_
           }
       })