Vue.js进阶：自定义指令与过滤器-优快云博客

本文链接：https://blog.youkuaiyun.com/a15076159739/article/details/102825674

过滤器(filter)

Vue.js允许自定义过滤器,可用作一些常见的文本格式化,过滤器可以用在两个地方:双花括号差值,和表达式中,由"管道"符提示(|),过滤器分为全局过滤器:Vue.filter(‘过滤器名’,过滤方式),和组内过滤器(私有过滤器)

例子:过滤时间戳,转换为时间格式
  <table class="table  table-bordered table-hover table-striped">
       <thead>
           <tr>
            <th>id</th>
            <th>name</th>
            <th>Ctime</th>
            <th>Operation</th>
        </tr>
       </thead>
       <tbody>
           <!--之前v-for中的数据,都是直接从list渲染过来的 现在定义了一个search方法--> 
           <tr v-for="item in search(keywords)" :key="item.id">
               <td>{{ item.id }}</td>
               <td >{{item.name}}</td>
               <td >
                   {{ item.ctime |dateFormat('')}}
               </td>
               <td>
                   <a href="" @click.prevent="del(item.id)">删除</a>
               </td>
           </tr>
       </tbody>
   </table>


   Vue.filter('dateFormat',function(dateStr,pattern=''){
        //根据给定的时间字符串,得到额定的时间
        var dt=new Date(dateStr)
        var y=dt.getFullYear()
        var m=(dt.getMonth()+1)
        var d=dt.getDate()

       if(pattern.toLowerCase()==='yyyy-mm-dd'){
       return `${y}-${m}-${d}`
       }else{
      var hh=dt.getHours()
      var mm=(dt.getMonth()+1)
      var ss=dt.getDate()
      return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
      
  }
    })

私有过滤器格式:
       // 定义私有过滤器    过滤器有两个 条件  【过滤器名称 和 处理函数】
       // 过滤器调用的时候，采用的是就近原则，如果私有过滤器和全局过滤器名称一致了，这时候 优先调用私有过滤器
        filters: { 
          dateFormat: function (dateStr, pattern = '') {
          // 根据给定的时间字符串，得到特定的时间
          var dt = new Date(dateStr)
          var y = dt.getFullYear()
          var m = (dt.getMonth() + 1).toString().padStart(2, '0')
          var d = dt.getDate().toString().padStart(2, '0')

          if (pattern.toLowerCase() === 'yyyy-mm-dd') {
            return `${y}-${m}-${d}`
          } else {
            var hh = dt.getHours().toString().padStart(2, '0')
            var mm = dt.getMinutes().toString().padStart(2, '0')
            var ss = dt.getSeconds().toString().padStart(2, '0')

            return `${y}-${m}-${d} ${hh}:${mm}:${ss} `
          }

上图.私有过滤器结合padStart方法使用,通过字符串新方法:String.prototype.padStart(maxLength,fillString=’ ‘)或String.prototype.padEnd(maxLength,fillString=’ ')来填充字符,前者填充头部,后者尾部,上图时间过滤完当是各位数的时候:

2019-10-30 17:2:3 被字符串填充0之后变为 2019-10-30 17:02:03

自定义按键修饰符(config.keyCodes)

按键方法(系统内置):

.enter    .tab   .delete    .esc   .space    .up   .down  .left  .right

例:给input框加回车按键
   <input type="text" class="form-control" v-model="name" @keyup.enter="add()">

如果想用别的键,通过 config.keyCodes对象设置,格式:VUe.config.keyCodes.名称=按键值

比如用f2代替回车做添加(键盘上的键都可以),则定义
//自动定义全局按键修饰符
 Vue.config.keyCodes.f2=113
 然后在  修改keyup.的名称为f2即可
  <input type="text" class="form-control" v-model="name" @keyup.f2="add()">

自定义指令(Vue.directive())

自定义一些指令对底层DOM进行操作,Vue里面有许多内置的指令，比如v-if和v-show，这些丰富的指令能满足我们的绝大部分业务需求，不过在需要一些特殊功能时，我们仍然希望对DOM进行底层的操作，这时就要用到自定义指令。
自定义指令的几个钩子函数:

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：只调用一次，指令与元素解绑时调用。

自定义指令让文本框获得焦点

   <input type="text"  v-focus >
  //其中参数1:指令的名称,注意,在定义的时候,指令的名称不用加v-前缀,调用是加v-
  //参数2:是一个对象,在这个对象身上,有一些指令相关的函数,这写函数可以在特定的阶段,执行相关操作
   Vue.directive('focus',{
    inserted:function(el){
        //表示元素插入到Dom中的时候,会执行inserted函数[触发一次]
        el.focus()
                  }
        }
})

自定义指令让文本框字体改变颜色

   <input type="text" v-focus v-color="'blue'">
   
   Vue.directive('color',{
        bind:function(el,binding){
          // el.style.color='red'
         el.style.color=binding.value
       }
})

和JS行为有关的操作,最好在inserted中去执行,防止JS行为不生效
和样式相关的操作,一般都可以在bind执行