7.0 KiB
前言
我们接着上一篇文章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）在差值表达式中这样调用：
<p>{{ msg | msgFormat }</p>
上方代码的意思是说：
-
管道符前面的
msg：要把msg这段文本进行过滤， -
管道符后面的
msgFormat：是通过msgFormat这个过滤器进行来操作。
（2）定义过滤器msgFormat：
// Vue.filter 中的第一个参数是过滤器的名称，第二个参数是具体的过滤器函数
// 定义一个 Vue 全局的过滤器，名字叫做 msgFormat
Vue.filter('msgFormat', function (myMsg) { // function 的第一个参数指的是管道符前面的 msg
// 字符串的 replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则
return myMsg.replace(/单纯/g, ‘邪恶’)
})
上方代码解释：
-
Vue.filter(‘过滤器的名称’, 具体的过滤器函数)中的第一个参数指的就是过滤器的名称（必须和管道后面的名称完全一致），第二个参数是具体的过滤器函数 -
过滤器函数function中，第一个参数指的管道符前面的msg。
-
replace()方法是用来做字符串的替换的。第一个参数如果只写成单纯，那么就会只修改 msg 中的第一个单纯字样。所以这里就用正则去匹配msg 中所有的单纯字样。
最终，完整版代码如下：
<!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>
网页显示效果如下：
举例：（还是拿上面的代码进行举例）
<!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指定的监管区域有用。
举例：日期格式化
<!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的。