Vue-过滤器

作用：

文本格式化，例如 时间/后台返回的一些数值

使用方式：

Mustache语法插值

{{ message | capitalize }}

v-bind 表达式

<div v-bind:id="rawId | formatId"></div>

定义： 

（1）局部定义

// 局部定义 选项中进行定义

// 这里的 filters 是Vue构造器中的一个选项  它的值是一个对象 

// capitalize 是 filters 对象中的一个方法 这里ES6语法可以进行简写

// 完整写法

filters: {

  capitalize: function (value) {

    if(!value) return ''

    value = value.toString()

    return value.charAt(0).toUpperCase() + value.slice(1)
  }

}

// 简写

filters: {

  capitalize(value) {

    if(!value) return ''

    value = value.toString()

    return value.charAt(0).toUpperCase() + value.slice(1)
  }

}

// 过滤器中使用的方法解析

filters: {

  capitalize: function (value) {

    // 这里的 value 是在使用的位置传递过来的值

    if(!value) return ''
    
    // 如果 value 值不存在 那么返回一个空字符串

    value = value.toString()

    // 如果有值 将接收到的值 使用对象原型中的 toString() 方法转换为字符串并赋值给value

    return value.charAt(0).toUpperCase() + value.slice(1)

    // 使用 字符串的charAt()方法 返回 value 字符串中索引为0的字符 

    // 再使用 toUpperCase() 方法将该字符转换为大写

    // 然后 使用 slice() 方法从该字符串的第 1 个索引对应的字符之后进行截取

    // 最后使用+号拼接返回一个首字母大写的字符串
  }

}

（2）全局定义

// 注意这里要在Vue实例化之前定义全局过滤器

Vue.filter('capitalize', function(value) {

  if(!value) return ''

  value = value.toString

  return value.charAt(0).toUpperCase() + value.slice(1)

})

new Vue({

  // ...

})

注意事项：

（1）当全局过滤器和局部过滤器重名时，会采用局部过滤器

（2）过滤器可以串联

{{ message | filterA | filterB }}

在这个例子中，filterA 被定义为接收单个参数的过滤器函数，表达式 message 的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB, 将 filterA  的结果传递到 filterB 中

过滤器拓展： 

在项目中时，我们可能会在各个组件中都需要使用过滤器，此时我们可以选择全局注册过滤器，也就是在 main.js 整个项目文件的入口中使用 Vue.filter 进行注册。 但是当我们的整个项目需要注册的过滤器越来越多的时候，此时 main.js 中的代码就会非常冗余  这时我们可以使用 Vue.use()

Vue.use( plugin )
参数：

{Object | Function} plugin

作用：安装插件，注册全局组件/过滤器/指令

插件注意事项：

如果插件是一个对象，必须提供 install 方法。

如果插件是一个函数，它会被作为 install 方法。

install 方法调用时，会将 Vue 作为参数传入

来自vue文档

项目中可以使用这个方法注册全局过滤器

// （1）在全局公用组件components中创建 index.js

// 使用 Vue.use() 进行注册时，当注册的插件是一个对象时，就需要在对象中使用 install() 方法  install() 方法默认接收一个形式参数为构造函数 Vue 我们可以在 install 方法体中使用 Vue 构造函数注册全局的组件，过滤器和指令等

export default {

  install(Vue) {

    // 注册全局组件
    Vue.component('PageTools', PageTools)

    // 全局过滤器
    Vue.filter('过滤器名称', () => { return })

    // 全局命令
    Vue.directive('全局命令', () => { // 使用插件进行处理 })

  }

}

                
// （2）在main.js中导入注册

import Components from '@/Components'  
             
Vue.use(Components)