1.过滤器
过滤器像是一种语法功能，可以用在模板里，用于转换模板里的输出值。过滤器帮我们转换输出的数据，不会改变数据本身，只是转换给用户看。
Vue没有内置过滤器，全部的过滤器都由自己创建,过滤器只是一个函数，可以用字符串键名作为函数名,,传入value（我们想转换的数据），每个过滤器都有value,可以在这个值上做任何操作，最后返回转换之后的值,在模板上加上管道符号，自己获取value值。
只会转换我们在模板里看到的值，不会自己转换data属性，只会转换输出值。
- 通过在对象里面添加 filters属性创建过滤器,局部注册过滤器，只能在这个VUE组件的模板里面使用。
- Vue.filter创建全局过滤器
//App.vue局部，（串联过滤器）第二个过滤器会把前面所有的内容作为输入
<template>
<p>{{text | toUppercase | to-lowercase}}</p>
</template>
<script>
export default{
data(){
return{
text:'Hello there!'
}
},
filters:{
//'to-uppercase'(){
//
//}
toUppercase(value){
return value.toUpperCase();
}
}
</script>
//main.js全局
Vue.filter('to-lowercase',function(value){
return value.toLowercase();
});
2.计算属性-->替代过滤器
所有的计算属性都是方法。
//App.vue对一个列表进行过滤
<template>
<input v-model="filterText"></input>
<ul>
<li v-for ="fruit in filteredFruits">{{ fruit }}</li>
</ul>
</template>
<script>
export default{
data(){
return{
fruites:['Apple','Banana','Mango','Melon'],
filterText:
}
},
computed:{
filteredFruits(){
return this.fruits.filter((element)=>{
return element.match(this.filterText);
})
};
}
}
</script>
3.混入
//fruitMixin.js
export const fruitMixin = {
data(){
return{
fruites:['Apple','Banana','Mango','Melon'],
filterText:
}
},
computed:{
filteredFruits(){
return this.fruits.filter((element)=>{
return element.match(this.filterText);
})
};
},
created(){
}
}
//App.vue
import {fruitMixin} from './fruitMixin';
export default{
mixins:['fruitMixin']
}
vue可以把混入的属性与原来的属性进行了合并，
混入也可以还有其他的内容，例如生命周期函数，如果在混入和被混入的组件或者实例里面都提供生命周期钩子，即使他们同名，这些钩子都会被执行，执行顺序是先执行混入的然后执行组件的。先是混入，后是组件。混入不会破环任何东西，组件永远最后执行。
在不同组件中使用的混入，会被复制多份，不是同一个内存地址，每个组件得到的混入都是一个新的对象，而不会共享一个对象，可以安全的使用混入的数据，而不会影响到其他使用混用的地方。
如果想改变应用中的其它地方，可以考虑使用事件。
//全局混入，一般开发插件时使用，而不在产品中使用
//main.js
Vue.mixin({
created(){
}
});
-
main.js
new Vue创建实例的时候调用了一次created钩子
-
App.vue
render函数渲染App时第二次调用了created钩子
<p>Some Text</p>
//文本需要差值表达，并转换为字符串
<p>{{'Some Text' | reverse}}</p>
