add：vue中的过滤器功能
This commit is contained in:
qianguyihao
parent
a2c61b391b
commit
1a0d998e12
@ -613,8 +613,8 @@ JS中的**父子兄**访问关系：
|
||||
|
||||
上方结构中，子盒子box12是在父亲box11里的，子盒子box22是在父亲box21里面的。现在，如果我调用方法`box11.appendChild(box22)`，**最后产生的结果是：box22会跑到box11中**（也就是说，box22不在box21里面了）。这是一个很神奇的事情：
|
||||
|
||||
20180129_2125.png
|
||||
|
||||
|
||||
|
||||
|
||||
### 删除节点
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
|
||||
|
||||
## 列表功能举例
|
||||
|
||||
### 步骤 1：列表功能
|
||||
@ -82,7 +81,6 @@
|
||||
|
||||
|
||||
|
||||
|
||||
### 步骤 2：无数据时，增加提示
|
||||
|
||||
如果list中没有数据，那么表格中就会只显示表头`<th>`，这样显然不太好看。
|
||||
@ -109,8 +107,6 @@
|
||||
|
||||
（3）将数据展示出来。`v-for`有个特点：当list数组发生改变后，vue.js就会自动调用`v-for`重新将数据生成，这样的话，就实现了数据的自动刷新。
|
||||
|
||||
|
||||
|
||||
完整的代码如下：
|
||||
|
||||
```html
|
||||
@ -219,7 +215,6 @@
|
||||
|
||||
```
|
||||
|
||||
|
||||
### 步骤 4：item的删除
|
||||
|
||||
html部分：
|
||||
@ -229,7 +224,6 @@ html部分：
|
||||
<td><a href="#" v-on:click="delData(item.id)">删除</a></td>
|
||||
```
|
||||
|
||||
|
||||
js部分：
|
||||
|
||||
```javascript
|
||||
@ -264,7 +258,9 @@ js部分：
|
||||
});
|
||||
```
|
||||
|
||||
当item被删除后，v-for会被自动调用。
|
||||
也就是说，我们是根据 item.id 找到这个 item 是属于list 数组中的哪个index索引。找到了index，就可以根据index来删除数组中的那个元素了。
|
||||
|
||||
当item被删除后，v-for会被自动调用，进而自动更新view。
|
||||
|
||||
完整版代码：
|
||||
|
||||
@ -395,8 +391,6 @@ js部分：
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
|
||||
### 步骤 5：按条件筛选item
|
||||
|
||||
现在要求实现的效果是，在搜索框输入关键字 keywords，列表中仅显示匹配出来的内容。也就是说：
|
||||
@ -405,10 +399,9 @@ js部分：
|
||||
|
||||
- 现在， 我们在使用`v-for`进行遍历显示的时候，不能再遍历全部的 list 了；我们要自定义一个 search 方法，同时，把keywords作为参数，传递给 search 方法。即`v-for="item in search(keywords)"`。
|
||||
|
||||
|
||||
在 search(keywords) 方法中，为了获取 list 数组中匹配的item，我们可以有两种方式实现。如下。
|
||||
|
||||
**方式一**：
|
||||
**方式一**：采用`forEach + indexOf()`
|
||||
|
||||
```javascript
|
||||
search(keywords) { // 根据关键字，进行数据的搜索，返回匹配的item
|
||||
@ -416,7 +409,7 @@ js部分：
|
||||
//实现方式一：通过 indexOf() 进行匹配。
|
||||
var newList = [];
|
||||
this.list.forEach(item => {
|
||||
if (item.name.indexOf(keywords) != -1) {
|
||||
if (item.name.indexOf(keywords) != -1) { //只要不等于 -1，就代表匹配到了
|
||||
newList.push(item)
|
||||
}
|
||||
})
|
||||
@ -440,51 +433,174 @@ js部分：
|
||||
|
||||
上方代码中，也就是说，如果参数为空字符串，那么，每个item都能匹配到。
|
||||
|
||||
|
||||
**方式二**：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 步骤6
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
在 Vue 1.0版本中，可以通过`filterBy`这个api进行过滤。
|
||||
|
||||
如果item是简单数据类型，可以这样筛选：
|
||||
|
||||
```html
|
||||
<div v-for="item in list | filterBy 'hello'">
|
||||
```
|
||||
|
||||
上方代码的意思是：找到所有item中包含`hello`的指定item。
|
||||
|
||||
如果item是一个对象，比如：
|
||||
**方式二**： filter + includes()方法
|
||||
|
||||
```javascript
|
||||
list: [{ id: 1, name: '奔驰', ctime: new Date }, { id: 2, name: '大众', ctime: new Date }],
|
||||
search(keywords) { // 根据关键字，进行数据的搜索，返回匹配的item
|
||||
|
||||
var newList = this.list.filter(item => {
|
||||
// 注意 ： ES6中，为字符串提供了一个新方法，叫做 String.prototype.includes('要包含的字符串')
|
||||
// 如果包含，则返回 true ，否则返回 false
|
||||
if (item.name.includes(keywords)) {
|
||||
return item
|
||||
}
|
||||
})
|
||||
|
||||
return newList
|
||||
}
|
||||
```
|
||||
|
||||
上面的list数据中，我要去过滤匹配item中的name属性，可以这样筛选：
|
||||
注意：forEach some filter findIndex，这些都属于数组的新方法，都会对数组中的每一项，进行遍历，执行相关的操作。这里我们采用数组中的 filter 方法，
|
||||
|
||||
总的来说，方式二的写法更优雅，因为字符串的 includes()方法确实很实用。
|
||||
|
||||
完整版代码如下：
|
||||
|
||||
```html
|
||||
<div v-for="item in list | filterBy 'hello（筛选条件值）' in 'name'">
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
.table {
|
||||
width: 800px;
|
||||
margin: 20px auto;
|
||||
border-collapse: collapse;
|
||||
/*这一行，不能少：表格的两边框合并为一条*/
|
||||
}
|
||||
|
||||
.table th {
|
||||
background: #0094ff;
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
border: 1px solid black;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.table tr td {
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
padding: 5px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.form {
|
||||
width: 800px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.form button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="vue2.5.16.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="app">
|
||||
|
||||
<div class="form">
|
||||
|
||||
编号：
|
||||
<input type="text" v-model="formData.id"> 名称：
|
||||
<input type="text" v-model="formData.name">
|
||||
|
||||
<button v-on:click="addData">添加</button>
|
||||
搜索：
|
||||
<input type="text" v-model="keywords">
|
||||
|
||||
</div>
|
||||
|
||||
<table class="table">
|
||||
<th>编号</th>
|
||||
<th>名称</th>
|
||||
<th>创建时间</th>
|
||||
<th>操作</th>
|
||||
<tr v-show="list.length == 0">
|
||||
<td colspan="4">列表无数据</td>
|
||||
</tr>
|
||||
<tr v-for="item in search(keywords)">
|
||||
<td>{{item.id}}</td>
|
||||
<td>{{item.name}}</td>
|
||||
<td>{{item.ctime}}</td>
|
||||
<!--绑定delete事件，根据括号里的参数进行删除-->
|
||||
<td>
|
||||
<a href="#" v-on:click="delData(item.id)">删除</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
<script>
|
||||
var vm = new Vue({
|
||||
el: '#app',
|
||||
data: {
|
||||
list: [{ id: 1, name: '奔驰', ctime: new Date }, { id: 2, name: '大众', ctime: new Date }],
|
||||
//用户添加的数据
|
||||
formData: {
|
||||
id: '',
|
||||
name: ""
|
||||
},
|
||||
keywords: ""
|
||||
},
|
||||
|
||||
methods: {
|
||||
addData: function () {
|
||||
//将数据追加到list中
|
||||
var p = { id: this.formData.id, name: this.formData.name, ctime: new Date() };
|
||||
this.list.push(p);
|
||||
|
||||
//清空页面上的文本框中的数据
|
||||
this.formData.id = '';
|
||||
this.formData.name = '';
|
||||
}, //注意：方法之间用逗号隔开，这个逗号不要忘记了
|
||||
|
||||
delData: function (id) {
|
||||
// 0 提醒用户是否要删除数据
|
||||
if (!confirm('是否要删除数据?')) {
|
||||
//当用户点击的取消按钮的时候，应该阻断这个方法中的后面代码的继续执行
|
||||
return;
|
||||
}
|
||||
|
||||
// 1 调用list.findIndex()方法根据传入的id获取到这个要删除数据的索引值
|
||||
var index = this.list.findIndex(function (item) {
|
||||
return item.id == id
|
||||
});
|
||||
|
||||
// 2 调用方法：list.splice(待删除的索引, 删除的元素个数)
|
||||
this.list.splice(index, 1);
|
||||
},
|
||||
|
||||
search(keywords) { // 根据关键字，进行数据的搜索，返回匹配的item
|
||||
|
||||
var newList = this.list.filter(item => {
|
||||
// 注意 ： ES6中，为字符串提供了一个新方法，叫做 String.prototype.includes('要包含的字符串')
|
||||
// 如果包含，则返回 true ，否则返回 false
|
||||
if (item.name.includes(keywords)) {
|
||||
return item
|
||||
}
|
||||
})
|
||||
|
||||
return newList
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
但`filterBy`这种系统过滤器只是Vue1.0中的api，在Vue2.0中已经删除了，我们需要自定义过滤器。
|
||||
|
||||
备注：在1.x 版本中可以通过filterBy指令来实现过滤，但是在2.x中已经被废弃了。
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,196 +0,0 @@
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 系统过滤器
|
||||
|
||||
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`。
|
||||
|
||||
|
||||
运行结果：
|
||||
|
||||
|
||||
|
||||
第一行代码显示的是默认的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的。
|
||||
299
21-Vue基础/01-05.过滤器.md
Normal file
299
21-Vue基础/01-05.过滤器.md
Normal file
@ -0,0 +1,299 @@
|
||||
|
||||
|
||||
|
||||
## 前言
|
||||
|
||||
|
||||
> 我们接着上一篇文章01-04来讲。
|
||||
|
||||
### 过滤器的概念
|
||||
|
||||
**概念**：Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache **插值表达式**、 **v-bind表达式**。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示。
|
||||
|
||||
|
||||
### Vue1.X中的系统过滤器
|
||||
|
||||
Vue提供了一系列的固定逻辑来使程序员更加容易的实现这些功能，这些过滤器称之为系统过滤器。
|
||||
|
||||
系统过滤器是Vue1.0中存在的，在Vue2.0中已经删除了。
|
||||
|
||||
系统过滤器的使用，可以参考参考文档：<http://v1-cn.vuejs.org/api/#过滤器>
|
||||
|
||||
|
||||
Vue也提供了一个接口用来供程序员定义属于自己的特殊逻辑，Vue称之为自定义过滤器。我们接下来讲一讲。
|
||||
|
||||
|
||||
## 自定义全局过滤器
|
||||
|
||||
文档地址：<http://v1-cn.vuejs.org/guide/custom-filter.html>
|
||||
|
||||
|
||||
|
||||
### 基本使用
|
||||
|
||||
|
||||
我们可以用全局方法`Vue.filter()`自定义一个全局过滤器。这样的话，每一个Vue的对象实例都可以拿到这个过滤器。它接收两个参数：过滤器的名称 和过滤器函数。
|
||||
|
||||
比如说，我要将`曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男人`这句 msg 中的“单纯”改为“邪恶”。可以这样做：
|
||||
|
||||
（1）在差值表达式中这样调用：
|
||||
|
||||
```html
|
||||
<p>{{ msg | msgFormat }</p>
|
||||
```
|
||||
|
||||
|
||||
上方代码的意思是说：
|
||||
|
||||
- **管道符前面**的`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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Document</title>
|
||||
<script src="vue2.5.16.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app">
|
||||
<p>{{ msg | msgFormat }}</p>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 定义一个 Vue 全局的过滤器，名字叫做 msgFormat
|
||||
Vue.filter('msgFormat', function (myMsg) {
|
||||
// 字符串的 replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则
|
||||
//将 myMsg 中的所有`单纯`字样，修改为`邪恶`
|
||||
return myMsg.replace(/单纯/g, '邪恶')
|
||||
})
|
||||
|
||||
// 创建 Vue 实例，得到 ViewModel
|
||||
var vm = new Vue({
|
||||
el: '#app',
|
||||
data: {
|
||||
msg: '曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男人'
|
||||
},
|
||||
methods: {}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
网页显示效果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
举例：（还是拿上面的代码进行举例）
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
### 自定义私有过滤器
|
||||
|
||||
**私有过滤器**：在某一个 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`。
|
||||
|
||||
|
||||
运行结果：
|
||||
|
||||
|
||||
|
||||
第一行代码显示的是默认的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的。
|
||||
Loading…
Reference in New Issue
Block a user