Vue提供了一系列的固定逻辑来使程序员更加容易的实现这些功能,这些过滤器称之为系统过滤器,Vue也提供了一个接口用来供程序员定义属于自己的特殊逻辑,Vue称之为自定义过滤器。 ## 系统过滤器 系统过滤器的使用,可以参考参考文档: 注意:系统过滤器是Vue1.0中存在的,在Vue2.0中已经删除了。 ## 自定义过滤器 文档地址: ### 自定义私有过滤器 **私有过滤器**:在某一个 vue 对象内部定义的过滤器称之为私有过滤器。这种过滤器只有在当前vue对象的el指定的监管区域有用。 **举例**:日期格式化 ```html Document
{{ time }}
{{ time | datefmt }}
``` 上面的代码中,我们在vue实例中,通过`filters`关键字,在里面定义了一个局部过滤器`datefmt`。 运行结果: 20180405_2038.png 第一行代码显示的是默认的date。第二行代码显示的是格式化之后的date,说明过滤器还是起到了作用的。 ## 自定义全局过滤器 可以用全局方法`Vue.filter()`自定义一个全局过滤器,它接收两个参数:过滤器 ID 和过滤器函数。过滤器函数以值为参数,返回转换后的值。 这样的话,每一个Vue的对象实例都可以拿到这个过滤器。 举例:(还是拿上面的代码进行举例) ```html Document
{{ time }}
{{ time | datefmt }}
{{ time | datefmt }}
``` ## v-on的按键修饰符 ### 默认按键修饰符 通俗一点讲,指的是:监听键盘输入的事件。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符: ``` .enter .tab .delete (捕获 “删除” 和 “退格” 键) .esc .space .up .down .left .right 1.0.8+版本:支持单字母的按键别名。 ``` ###1.2 可以自定义按键别名 ``` 在Vue2.0 中默认的按键修饰符是存储在 Vue.config.keyCodes中 // 例如在Vue2.0版本中扩展一个f1的按键修饰符写法: Vue.config.keyCodes.f1 = 112 在1.0.17+ 中默认的按键修饰符是存储在Vue.directive('on').keyCodes中 // 例如在Vue1.0中扩展一个f1的按键修饰符写法: Vue.directive('on').keyCodes.f1 = 112 ``` ### 1.3 利用v-on的.enter按键修饰符实现品牌管理的新增按钮功能 - 效果图 ![d2-1.png](imgs/d2-1.png "") - 实现代码 ![d2-2.png](imgs/d2-2.png "") ![d2-3.png](imgs/d2-3.png "") ## axios axios是在Vue中专门用来发送ajax请求的。 但是,axios并不依赖于Vue.js库,而是基于promise的。