webcourse/Webcourse
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add：vue中的过滤器功能

Browse Source
This commit is contained in:
qianguyihao 2018-05-21 08:35:11 +08:00
parent a2c61b391b
commit 1a0d998e12
4 changed files with 465 additions and 246 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
03-JavaScript基础/10-DOM操作.md
View File

@ -613,8 +613,8 @@ JS中的**父子兄**访问关系：
上方结构中，子盒子box12是在父亲box11里的，子盒子box22是在父亲box21里面的。现在，如果我调用方法`box11.appendChild(box22)`，**最后产生的结果是：box22会跑到box11中**（也就是说，box22不在box21里面了）。这是一个很神奇的事情： 上方结构中，子盒子box12是在父亲box11里的，子盒子box22是在父亲box21里面的。现在，如果我调用方法`box11.appendChild(box22)`，**最后产生的结果是：box22会跑到box11中**（也就是说，box22不在box21里面了）。这是一个很神奇的事情：
20180129_2125.png
![](http://img.smyhvae.com/20180129_2125.png)
### 删除节点 ### 删除节点

214
21-Vue基础/01-04.Vue的举例：列表功能.md
View File

@ -1,5 +1,4 @@
## 列表功能举例 ## 列表功能举例
### 步骤 1：列表功能 ### 步骤 1：列表功能
@ -82,7 +81,6 @@
![](http://img.smyhvae.com/20180401_1517.png) ![](http://img.smyhvae.com/20180401_1517.png)
### 步骤 2：无数据时，增加提示 ### 步骤 2：无数据时，增加提示
如果list中没有数据，那么表格中就会只显示表头`<th>`，这样显然不太好看。 如果list中没有数据，那么表格中就会只显示表头`<th>`，这样显然不太好看。
@ -109,8 +107,6 @@
（3）将数据展示出来。`v-for`有个特点：当list数组发生改变后，vue.js就会自动调用`v-for`重新将数据生成，这样的话，就实现了数据的自动刷新。 （3）将数据展示出来。`v-for`有个特点：当list数组发生改变后，vue.js就会自动调用`v-for`重新将数据生成，这样的话，就实现了数据的自动刷新。
完整的代码如下： 完整的代码如下：
```html ```html
@ -219,7 +215,6 @@
``` ```
### 步骤 4：item的删除 ### 步骤 4：item的删除
html部分： html部分：
@ -229,7 +224,6 @@ html部分：
<td><a href="#" v-on:click="delData(item.id)">删除</a></td> <td><a href="#" v-on:click="delData(item.id)">删除</a></td>
``` ```
js部分： js部分：
```javascript ```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> </html>
``` ```
### 步骤 5：按条件筛选item ### 步骤 5：按条件筛选item
现在要求实现的效果是，在搜索框输入关键字 keywords，列表中仅显示匹配出来的内容。也就是说： 现在要求实现的效果是，在搜索框输入关键字 keywords，列表中仅显示匹配出来的内容。也就是说：
@ -405,10 +399,9 @@ js部分：
- 现在， 我们在使用`v-for`进行遍历显示的时候，不能再遍历全部的 list 了；我们要自定义一个 search 方法，同时，把keywords作为参数，传递给 search 方法。即`v-for="item in search(keywords)"`。 - 现在， 我们在使用`v-for`进行遍历显示的时候，不能再遍历全部的 list 了；我们要自定义一个 search 方法，同时，把keywords作为参数，传递给 search 方法。即`v-for="item in search(keywords)"`。
在 search(keywords) 方法中，为了获取 list 数组中匹配的item，我们可以有两种方式实现。如下。 在 search(keywords) 方法中，为了获取 list 数组中匹配的item，我们可以有两种方式实现。如下。
**方式一**： **方式一**：采用`forEach + indexOf()`
```javascript ```javascript
search(keywords) { // 根据关键字，进行数据的搜索，返回匹配的item search(keywords) { // 根据关键字，进行数据的搜索，返回匹配的item
@ -416,7 +409,7 @@ js部分：
//实现方式一：通过 indexOf() 进行匹配。 //实现方式一：通过 indexOf() 进行匹配。
var newList = []; var newList = [];
this.list.forEach(item => { this.list.forEach(item => {
if (item.name.indexOf(keywords) != -1) { if (item.name.indexOf(keywords) != -1) { //只要不等于 -1，就代表匹配到了
newList.push(item) newList.push(item)
} }
}) })
@ -440,51 +433,174 @@ js部分：
上方代码中，也就是说，如果参数为空字符串，那么，每个item都能匹配到。 上方代码中，也就是说，如果参数为空字符串，那么，每个item都能匹配到。
**方式二**： filter + includes()方法
**方式二**：
### 步骤6
在 Vue 1.0版本中，可以通过`filterBy`这个api进行过滤。
如果item是简单数据类型，可以这样筛选：
```html
<div v-for="item in list | filterBy 'hello'">
```
上方代码的意思是：找到所有item中包含`hello`的指定item。
如果item是一个对象，比如：
```javascript ```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 ```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中已经被废弃了。

196
21-Vue基础/01-04.过滤器.md
View File

@ -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`。
运行结果：
![](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的。

299
21-Vue基础/01-05.过滤器.md Normal file
View 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`。
运行结果：
![](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的。