开发者学堂课程【Vue.js 入门与实战：过滤器-Vue 中全局过滤器的基本使用】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/586/detail/8146
过滤器-Vue 中全局过滤器的基本使用
内容简介：
一、 过滤器的概念
二、 过滤器的定义
三、 过滤器的基本使用
一、过滤器的概念
表格中的时间格式并不标准，所以要获取标准的时间就需要把它进行格式化，我们使用Vue中提供的过滤器来进行相关操作。
Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：
mustache 插值和 v-bind 表达式，其他地方一律不允许使用。过滤器应该被添加在JavaScript 表达式的尾部，由"管道"符指示。
二、过滤器的定义
(1)过滤器调用时的格式
{{name | 过滤器的名称}}
写一个 name，如果需要对 name 输出之前做进一步的处理，可以在name后面，通过管道符( | )的形式，给它一个过滤器，比如{{name | nameope}},就是在输出name 的值之前先调用 nameope 进行一下处理，并把处理的结果当作内容渲染到其中。
(2)过滤器的定义语法：
Vue.filter('过滤器的名称'，function(){})
需要把前面的名称传递给过滤器进行处理，处理的过程就是一个函数调用的过程。第一个是过滤器的名称；第二个(function)代表对传过来的数据做什么样的处理。
举例：
Vue.filter('过滤器的名称',function(data){
return data + '123'
})
data 是管道符前面的值需要交给过滤器去处理，过滤器要拿到传过来的值，就通过 function 的第一个参数来拿。
像 return data + '123'这种，只要你想输出 name，一调用过滤器，name 后面就会自动添加'123'的后缀。
(3)过滤器中的 function
过滤器中的 function，第一个参数是固定的，永远都是过滤器管道符前面传过来的数据。
三、过滤器的基本使用
在前端开发软件中新建一个 html 文件，在文件中输入 vh 自动生成代码
，在data：{}中输入 msg：'曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男人'；
并在div标签中添加一个 p 标签
{{msg}}
右键点击 html 文件，选择浏览，可以在浏览器中看见输出的数据。
过滤器是用来做输出前最后一层的处理，原数据不会被修改。
首先调用过滤器，定义一个名字叫做 msgFormat 的 Vue 全局过滤器，只要导入Vue 包就能在整个全局访问到 Vue 对象。
Vue .filter('msgFormat',function(msg){
return msg.replace(/单纯/g, '邪恶')
})}
使用 replace 方法将'单纯'替换为'邪恶'，得到一个处理结果，直接 return 把数据返回到 p 标签中，然后输出结果，完成替换。字符串的 replace 方法，第一个参数，除了可以写一个字符串之外，还可以定义一个正则。
为了简化代码,可以修改p标签的内容
{{msg | msgFormat('疯狂'+1,'123')}}
修改过滤器里面的内容，实现多条数据的调用：
Vue .filter('msgFormat',function(msg,arg,arg2){
return msg.replace(/单纯/g, arg+arg2)
})
过滤器的第一个位置除了拿到管道符前面的值，第二个位置可以传参；过滤器在调用的过程中可以调用多个参数；过滤器可以多次调用。
Vue .filter('test',function(msg){
return msg+ '========='
})
每当调用这个过滤器，会把数据后面加上一串等号。所以，过滤器可以多次的去调用。
如果调用了多次，把原始的值交给第一个过滤器处理，出来的结果再交给第二个过滤器处理，直到最后一个过滤器调用完毕，把最终的结果放入 p 标签中。
<p>{{ msg | msgFormat('疯狂+1','123') | test }}</p>
完整代码，如下：
<!DOCTYPE html>
<html lang= "en">
<head>
<meta charset= "UTF-8">
<meta name="viewport" content="width=device-width,initial
Scale=1.0">
< meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<p>{{ msg | msgFormat('疯狂+1','123') | test }}</p>
</div>
<script>
Vue .filter('msgFormat',function(msg,arg,arg2){
return msg.replace(/单纯/g, arg+arg2)
})
Vue .filter('test',function(msg){
return msg+ '========='
})
var vm = new Vue({
el: '#app',
data:{
msg: '曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男人'
},
Methods:{}
});
</script>
</body>
</html>
