Vue-过滤器（全局过滤器、私有过滤器）

<div id="app">
	<h3>{{msg | strFilter('莫名其妙') | strFilter2}}</h3>
	
	<br />
	
</div>

<div id="app2">
	<h3>{{msg2 | strFilter}}</h3>
</div>

// 自定义一个全局过滤器
// .filter('过滤器的名称', 过滤器的处理函数)
// 过滤器的处理函数中参数1：必须是管道符（|）前面的值，参数2、3、4....：是调用过滤器时传入的参数
Vue.filter('strFilter', function(data, str = '好'){
	return data.replace(/糟糕/g, str) + '哈哈哈哈哈';
});


// 使用过滤器的数据最终结果是，在原数据经过第一个过滤器修饰之后传递给第二个过滤器再给第三个，以此类推，把所有的过滤器修饰完的结果显示在页面中
Vue.filter('strFilter2', function(data){
	return data + '~~~~~~~';
})
var vm = new Vue({
	el: '#app',
	data: {
		msg: '这是个最糟糕的时代，最糟糕的我们生活在最糟糕的星球！！'
	},
	methods: {}
})

var vm2 = new Vue({
	data: {
		msg2: '糟糕，糟糕，糟糕！！！'
	},
	methods: {},
	// 私有过滤器，过滤器遵循就近原则。当全局过滤器名称和私有过滤器名称一样时，调用私有过滤器
	filters: {
		strFilter(data, str = '好'){
			return data.replace(/糟糕/g, str) + '嘎嘎嘎嘎';
		}
	}
})
vm2.$mount('#app2');//把实例vm2，手动的通过$mount()方法，指定给app2