19-Vue自定义全局过滤器

http://www.runoob.com/js/js-regexp.html
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/管道操作符
https://www.jianshu.com/p/07913e898054

一.重点

1.管道函数
试验性的管道操作符 |> （目前在 stage 1阶段）允许以一种易读的方式去对函数链式调用。本质上来说，管道操作符是单参数函数调用的语法糖，它允许你以'%21' |> decodeURI来替代decodeURI('%21')。
--------MDN
管道机制一开始是UNIX中出现的，一个程序的输出直接成为下一个程序的输入，就像水流过管道一样方便（类似于函数式编程中的filter或者一切皆对象的链式操作），而且多个单一功能的函数通过管道组合成复合函数（UNIX的“KISS”原则）。
-------@ArimaKisho
简单的说,就是将上一个函数的输出,作为下一个函数的输入
2.正则表达式
正则表达式（英语：Regular Expression，在代码中常简写为regex、regexp或RE）使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。
搜索模式可用于文本搜索和文本替换。
------菜鸟教程
简单的说,就是利用字符串匹配具有某一规则的所有字符串
格式:
/正则表达式主体/修饰符(可选)
实例:
var str = document.getElementById("demo").innerHTML;
var txt = str.replace("Microsoft","Runoob");

image.png

二.助记图

image.png

1.问题
对于在界面上显示的某些数据,我们希望它符合某种规范,比如替换敏感词
2.解决方法
引入过滤器的概念:
Vue.js允许你自定义过滤器,用于一些常见的文本格式化.
3.过滤器适用范围
双花括号插值和v-bind表达式
4.自定义全局过滤器的格式
Vue.filter("过滤器名称",function(value){return value.replace(/学院/g,"大学")})
5.适用过滤器
{{需要过滤的数据 | 过滤器的名称}}
默认情况下,会将|前面的数据传递给方法
默认情况下,插入值和绑定值都会适用过滤器过滤之后的数据来填充内容
6.注意
过滤器可以连续使用(管道函数)
{{msg | msgFormat1 | msgFormat2}}
7.代码验证

image.png