Vue(六)插件&过滤器

Vue(六)插件&过滤器

插件的使用

Vue有非常强大的插件，这也是它的强大之处。
首先你应该导入插件

import Vue from "vue";
import VueRouter from "vue-router";

然后使用插件

Vue.use(VueRouter);

过滤器

有时候你拿到的数据需要处理之后才能插入到页面中，这个时候你就需要用到过滤器。过滤器可以用在两个地方：
插值语法和**v-bind表达式**中。

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

你可以在一个组件的选项中定义本地过滤器:

filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

也可以在创建Vue实例之前全局定义过滤器:

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
  // ...
})

值得注意的是过滤器也可以链式操作。第一个过滤器的结果返回作为第二个过滤器的参数再次进行过滤。

{{ message | filterA | filterB }}

//也可以接收参数
//这里注意message是第一个参数，字符串"arg1"是第二个参数，表达式arg2是第三个参数。
{{ message | filterA('arg1', arg2) }}