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) }}