mirror of
https://github.com/qianguyihao/Web.git
synced 2024-10-31 04:54:46 +08:00
225 lines
4.5 KiB
Markdown
225 lines
4.5 KiB
Markdown
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
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`。
|
|||
|
|
|
|||
|
|
|
|||
|
|
运行结果：
|
|||
|
|
|
|||
|
|
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+版本：支持单字母的按键别名。
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
###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按键修饰符实现品牌管理的新增按钮功能
|
|||
|
|
- 效果图
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
- 实现代码
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
## axios
|
|||
|
|
|
|||
|
|
axios是在Vue中专门用来发送ajax请求的。
|
|||
|
|
|
|||
|
|
但是，axios并不依赖于Vue.js库，而是基于promise的。
|