Vue核心技术-13,自定义过滤器

一,前言

之前介绍插值-双大括号表达式的时候,忘记介绍过滤器了
这篇把过滤器的知识补上

---

二,什么是过滤器

简单的理解就是:对要显示的数据进行格式化处理
这种格式化处理并改变原本的数据,只是产生了对应的新数据用于显示
例如:字母大小写,货币千分位逗号隔开,日期的格式化等等

Vue1.x中提供了一些过滤器,在Vue2.x中被废弃了,需要自定义实现
如果需要Vue1.0提供的过滤器,可以去下载插件或源码

---

三,过滤器的定义和使用

过滤器的定义-两种方式:

// 方法1:
Vue.filter(filterName, function(value[,arg1,arg2,...]){
  return newValue
})

// 方法2
var vm = new Vue({
    el: '#app',
    data: {},
    filters: {
      filterName: function (value[,arg1,arg2,...]) {
        return newValue
      }
    }
})

过滤器的使用:

<div>{{data | filterName}}</div>
<div>{{data | filterName(arg)}}</div>

---

三,使用过滤器

以对日期格式的处理为例:

<div id="app">
  <h2>格式化date类型:</h2>
  <p>默认-YYYY-MM-DD HH:mm:ss: {{time | formatDate}}</p>
  <p>传参-YYYY-MM-DD: {{time | formatDate('YYYY-MM-DD')}}</p>
</div>

<script>
  // 定义过滤器-默认格式YYYY-MM-DD HH:mm:ss
  Vue.filter('formatDate', 
      function (value, format='YYYY-MM-DD HH:mm:ss') {
    return moment(value).format(format);
  })

  var vm = new Vue({
    el: '#app',
    data: {
      time: new Date()
    },
    mounted () {
      // 每隔1秒更新一次time值
      setInterval(function () {
        this.time = new Date()
      }, 1000)
    }
  })
</script>

Demo中对时间的处理使用了moment.js

<script type="text/javascript" 
        src="https://cdn.bootcss.com/moment.js/2.22.1/moment.js"></script>

使用 Vue.filter自定义了formatDate过滤器,对date类型数据进行格式化
默认使用"YYYY-MM-DD HH:mm:ss"格式,并且可以通过传参自定义格式化
内部使用moment.js对时间日期处理的API进行处理,返回格式化后的数据进行显示

在mounted 选项中,定义了定时器用于更新date刷新显示
mounted 选项为Vue声明周期的一个钩子.在这个时候Vue完成挂载
关于声明周期相关知识将在后续介绍...

---

三,过滤器的其他使用方式

过滤器不仅可以单独使用,还可以几个过滤器叠加(串联)进行使用

{{message | filterA | filterB}}

多参数使用:

{{message | filterA('arg1', 'arg2')}}

参数arg1和arg2将分别传入过滤器的第二个和第三个参数,第一个参数是数据本身

---

四,过滤器的使用注意

过滤器只适合用于处理简单的文本转换,如果实现较为复杂应使用计算属性

---

五,结尾

本篇介绍了自定义过滤器和过滤器的使用,过滤器在实际开发中很有用
这篇涉及了Vue生命周期的mounted钩子,为什么要在这个钩子里创建定时器?
在了解了众多Vue使用后,下一篇介绍Vue的生命周期