Vue 项目中添加全局过滤器以及全局混合mixin

可以在.vue文件中定义局部使用的过滤器

export default{
 
　　data(){
 
　　　　return []
　　},
 
　　filters:{
 
　　　　toUpperCase:function(value){
 
　　　　　　return value.toUpperCase();
　　　　}　　
　　}
 
}

如果希望所有的.vue文件都可以使用就可以注册全局过滤器

　　Vue.filter('toUpperCase',function(value){
 
　　　　return value.toUpperCase();
　　});　　

如果过滤器比较多，可以把所有的过滤器统一写在一个js文件中，再在main.js文件中引入

filter.js

let toUpperCase=value=>{
 
　　return value.toUpperCase();
}
let toLowerCase=value=>{
 
　　return value.toLowerCase();
}
 
export {toUpperCase,toLowerCase}

main.js

import * as filters from 'filter.js'
 
Object.key(filters).each(filter=>{
 
　　Vue.filter(filter,filters[filter]);
 
});

添加混合mixin

混合是一种灵活的分布式复用Vue组件的方式。混合对象可以包含任何组件选项。以组件使用混合对象时，所有混合对象的选项将被混入该组件的选项。

1当组件与混合对象含有同名的选项时，这些选项将以恰当的方式混合。

1 同名钩子函数将混合为一个数组，因此都将被调用。另外，混合对象的钩子将在组件自身钩子之前调用

2 值为对象的选项，例如 methods, components 和 directives，将被混合为同一个对象。 两个对象键名冲突时，取组件对象的键值对。

Vue.mixin({

　　methods:{

　　　　demo:function(){

　　　　　　alert(1);

　　　　}

　　}

});

在组件文件中可以直接this.demo()，调用demo函数