Document

## 前言 > 我们接着上一篇文章01-04来讲。 ### 过滤器的概念 **概念**：Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache **插值表达式**、 **v-bind表达式**。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示。 ### Vue1.X中的系统过滤器 Vue提供了一系列的固定逻辑来使程序员更加容易的实现这些功能，这些过滤器称之为系统过滤器。系统过滤器是Vue1.0中存在的，在Vue2.0中已经删除了。系统过滤器的使用，可以参考参考文档： Vue也提供了一个接口用来供程序员定义属于自己的特殊逻辑，Vue称之为自定义过滤器。我们接下来讲一讲。 ## 自定义全局过滤器文档地址： ### 基本使用我们可以用全局方法`Vue.filter()`自定义一个全局过滤器。这样的话，每一个Vue的对象实例都可以拿到这个过滤器。它接收两个参数：过滤器的名称和过滤器函数。比如说，我要将`曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男人`这句 msg 中的“单纯”改为“邪恶”。可以这样做：（1）在差值表达式中这样调用： ```html

{{ msg | msgFormat }

``` 上方代码的意思是说： - **管道符前面**的`msg`：要把 `msg` 这段文本进行过滤， - **管道符后面**的`msgFormat`：是通过`msgFormat`这个过滤器进行来操作。（2）定义过滤器`msgFormat`： ```javascript // Vue.filter 中的第一个参数是过滤器的名称，第二个参数是具体的过滤器函数 // 定义一个 Vue 全局的过滤器，名字叫做 msgFormat Vue.filter('msgFormat', function (myMsg) { // function 的第一个参数指的是管道符前面的 msg // 字符串的 replace 方法，第一个参数，除了可写一个字符串之外，还可以定义一个正则 return myMsg.replace(/单纯/g, ‘邪恶’) }) ``` 上方代码解释： - `Vue.filter(‘过滤器的名称’, 具体的过滤器函数)`中的第一个参数指的就是过滤器的名称（必须和**管道后面**的名称**完全一致**），第二个参数是具体的过滤器函数 - 过滤器函数function中，第一个参数指的**管道符前面的**msg。 - `replace()`方法是用来做字符串的替换的。第一个参数如果只写成`单纯`，那么就会只修改 msg 中的第一个`单纯`字样。所以这里就用正则去匹配msg 中所有的`单纯`字样。最终，完整版代码如下： ```html Document

``` 网页显示效果如下：举例：（还是拿上面的代码进行举例） ```html Document

``` ### 自定义私有过滤器 **私有过滤器**：在某一个 vue 对象内部定义的过滤器称之为私有过滤器。这种过滤器只有在当前vue对象的el指定的监管区域有用。 **举例**：日期格式化 ```html Document

``` 上面的代码中，我们在vue实例中，通过`filters`关键字，在里面定义了一个局部过滤器`datefmt`。运行结果： ![](http://img.smyhvae.com/20180405_2038.png) 第一行代码显示的是默认的date。第二行代码显示的是格式化之后的date，说明过滤器是起到了作用的。 ## v-on的按键修饰符 ### 默认按键修饰符通俗一点讲，指的是：监听键盘输入的事件。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符： ``` .enter .tab .delete (捕获 “删除” 和 “退格” 键) .esc .space .up .down .left .right 1.0.8+版本：支持单字母的按键别名。 ``` ## axios axios是在Vue中专门用来发送ajax请求的。但是，axios并不依赖于Vue.js库，而是基于promise的。