开发者学堂课程【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标签<p>{{msg}}</p>。
右键点击html文件，选择浏览，可以在浏览器中看见输出的数据。
过滤器是用来做输出前最后一层的处理，原数据不会被修改。
首先调用过滤器，定义一个名字叫做msgFormat的Vue全局过滤器，只要导入Vue包就能在整个全局访问到Vue对象。
Vue .filter('msgFormat',function(msg){ return msg.replace(/单纯/g, '邪恶') })
使用replace方法将'单纯'替换为'邪恶'，得到一个处理结果，直接return把数据返回到p标签中，然后输出结果，完成替换。字符串的replace方法，第一个参数，除了可以写一个字符串之外，还可以定义一个正则。
为了简化代码,可以修改p标签的内容:
<p>{{msg | msgFormat('疯狂'+1,'123')}}</p>
修改过滤器里面的内容，实现多条数据的调用：
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>
