自己动手开发Vue插件（之二）Vue过滤器

Vue插件之Vue过滤器

什么是过滤器呢？

先举个栗子哈： 用户输入了一个英文句子，我们需要首字母大写，那么在显示这个句子前，我们给它加个过滤器，使句子首字母大写就OK
再举个栗子： 你请求数据得到了一个数组，渲染时，你需要把这个数组转为一个有键的对象，那么渲染前，使用过滤器处理一下这个数组即可
由上面两个栗子可以看出，过滤器就是在数据渲染或使用前，对目标数据做一定的特殊处理，方便后续的渲染或使用

过滤器是怎么实现的？

1. 普通的过滤器

       // 普通的过滤器一般是一个函数方法
       let fliterA = (str) => {
           if (!str) return ''
           str = str.toString()
           return str.charAt(0).toUpperCase() + str.slice(1)
       }
   
       // 调用也很简单，就是调用 fliterA(str) 这个方法
       fliterA('abc') // 返回： Abc

2. Vue中的过滤器：普通的过滤器看上去不美观，可扩展性也比较差，因此在Vue中有一个Fliter对象，专门用来构造过滤器。Fliter对象可以放在Vue组建中，申明局部的过滤器；也可以放到单个的js文件中，申明一个全局的Vue过滤器。两者在组件中的使用方法完全一样。

3. 局部过滤器

       <!-- test.vue -->
       <template>
           <span> {{ 'abc' | fliterA }} </span>
       </template>
       <script>
           export default {
               data() {
                   return {}
               },
               filters: {
                   fliterA: (str) => {
                       if (!str) return ''
                       str = str.toString()
                       return str.charAt(0).toUpperCase() + str.slice(1)
                   }
               }
           }
       </script>
   
       <!-- 页面渲染结果为： Abc -->

4. 全局过滤器

       // fliter.js
       import Vue from 'vue'
   
       /**
       * @interface fliterA {str}
       */
   
       Vue.filter('fliterA', (str) => {
           if (!str) return ''
           str = str.toString()
           return str.charAt(0).toUpperCase() + str.slice(1)
       })

5. 在组件中使用

       <template>
           <span>{{ 'hello ' | fliterA }}</span>
       </template>

好了，Vue过滤器就这么简单，Are you got it?