add：Vue 2.0过滤器

2018-04-05 21:05:09 +08:00 · 2018-04-05 21:05:09 +08:00 · 09651b53bc
commit 09651b53bc
parent 8747292cac
3 changed files with 227 additions and 8 deletions
--- a/21-Vue基础/01-01.Vue基础语法：系统指令.md
+++ b/21-Vue基础/01-01.Vue基础语法：系统指令.md
@ -725,3 +725,5 @@ v-text可以将一个变量的值渲染到指定的元素中。例如：

 ![](http://img.smyhvae.com/2016040102.jpg)

+
+
--- a/21-Vue基础/02-Vue.md
+++ b/21-Vue基础/02-Vue.md
@ -1,8 +0,0 @@
-
-
-
-## axios
-
-axios是在Vue中专门用来发送ajax请求的。
-
-但是，axios并不依赖于Vue.js库，而是基于promise的。
--- a/21-Vue基础/02-过滤器.md
+++ b/21-Vue基础/02-过滤器.md
@ -0,0 +1,225 @@
+
+
+
+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按键修饰符实现品牌管理的新增按钮功能
+- 效果图
+
+    ![d2-1.png](imgs/d2-1.png "")
+
+
+- 实现代码
+
+    ![d2-2.png](imgs/d2-2.png "")
+    ![d2-3.png](imgs/d2-3.png "")
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## axios
+
+axios是在Vue中专门用来发送ajax请求的。
+
+但是，axios并不依赖于Vue.js库，而是基于promise的。
				`@ -725,3 +725,5 @@ v-text可以将一个变量的值渲染到指定的元素中。例如：`

				`![](http://img.smyhvae.com/2016040102.jpg)`