Web/21-Vue基础/01-04.过滤器.md
2018-05-08 19:20:21 +08:00

196 lines
3.9 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

## 系统过滤器
Vue提供了一系列的固定逻辑来使程序员更加容易的实现这些功能这些过滤器称之为系统过滤器Vue也提供了一个接口用来供程序员定义属于自己的特殊逻辑Vue称之为自定义过滤器。
系统过滤器的使用,可以参考参考文档:<http://v1-cn.vuejs.org/api/#过滤器>
注意系统过滤器是Vue1.0中存在的在Vue2.0中已经删除了。
## 自定义过滤器
文档地址:<http://v1-cn.vuejs.org/guide/custom-filter.html>
### 自定义私有过滤器
**私有过滤器**:在某一个 vue 对象内部定义的过滤器称之为私有过滤器。这种过滤器只有在当前vue对象的el指定的监管区域有用。
**举例**:日期格式化
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="vue2.5.16.js"></script>
</head>
<body>
<div id="app">
{{ time }}
<br />
{{ time | datefmt }}
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
time: new Date()
},
//在某一个vue对象内部定义的过滤器称之为私有过滤器
//这种过滤器只有在当前vue对象el指定的监管的区域有用
filters: {
// input是自定义过滤器的默认参数input的值永远都是取自于 | 左边的内容
datefmt: function (input) {
// 定义过滤器的内容将input的值格式化成 yyyy-MM-dd 字符串输出
var res = '';
var year = input.getFullYear();
var month = input.getMonth() + 1;
var day = input.getDate();
res = year + '-' + month + '-' + day;
return res;
}
}
});
</script>
</html>
```
上面的代码中我们在vue实例中通过`filters`关键字,在里面定义了一个局部过滤器`datefmt`。
运行结果:
![](http://img.smyhvae.com/20180405_2038.png)
第一行代码显示的是默认的date。第二行代码显示的是格式化之后的date说明过滤器是起到了作用的。
## 自定义全局过滤器
可以用全局方法`Vue.filter()`自定义一个全局过滤器,它接收两个参数:过滤器 ID 和过滤器函数。过滤器函数以值为参数,返回转换后的值。
这样的话每一个Vue的对象实例都可以拿到这个过滤器。
举例:(还是拿上面的代码进行举例)
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="vue2.5.16.js"></script>
</head>
<body>
<div id="app">
{{ time }}
<br /> {{ time | datefmt }}
</div>
<div id="app1">
{{ time | datefmt }}
</div>
</body>
<script>
// 定义一个名称为 datafmt的全局过滤器
Vue.filter('datefmt', function (input) {
// 过滤器的逻辑将input的值格式化成 yyyy-MM-dd 字符串输出
var res = '';
var year = input.getFullYear();
var month = input.getMonth() + 1;
var day = input.getDate();
res = year + '-' + month + '-' + day;
return res;
});
new Vue({
el: '#app1',
data: {
time: new Date()
}
})
new Vue({
el: '#app',
data: {
time: new Date()
}
});
</script>
</html>
```
## 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的。