diff --git a/21-Vue基础/01-01.Vue基础语法：系统指令.md b/21-Vue基础/01-01.Vue基础语法：系统指令.md index 1401fe4..39b7ad8 100644 --- 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) + + diff --git a/21-Vue基础/02-Vue.md b/21-Vue基础/02-Vue.md deleted file mode 100644 index 02e5d33..0000000 --- a/21-Vue基础/02-Vue.md +++ /dev/null @@ -1,8 +0,0 @@ - - - -## axios - -axios是在Vue中专门用来发送ajax请求的。 - -但是，axios并不依赖于Vue.js库，而是基于promise的。 \ No newline at end of file diff --git a/21-Vue基础/02-过滤器.md b/21-Vue基础/02-过滤器.md new file mode 100644 index 0000000..4d97e0d --- /dev/null +++ b/21-Vue基础/02-过滤器.md @@ -0,0 +1,225 @@ + + + +Vue提供了一系列的固定逻辑来使程序员更加容易的实现这些功能，这些过滤器称之为系统过滤器，Vue也提供了一个接口用来供程序员定义属于自己的特殊逻辑，Vue称之为自定义过滤器。 + + +## 系统过滤器 + +系统过滤器的使用，可以参考参考文档： + +注意：系统过滤器是Vue1.0中存在的，在Vue2.0中已经删除了。 + + +## 自定义过滤器 + +文档地址： + + + + +### 自定义私有过滤器 + +**私有过滤器**：在某一个 vue 对象内部定义的过滤器称之为私有过滤器。这种过滤器只有在当前vue对象的el指定的监管区域有用。 + + +**举例**：日期格式化 + +```html + + + + + + Document + + + + +
+ {{ time }} +
+ {{ time | datefmt }} +
+ + + + + +``` + +上面的代码中，我们在vue实例中，通过`filters`关键字，在里面定义了一个局部过滤器`datefmt`。 + + +运行结果： + +20180405_2038.png + +第一行代码显示的是默认的date。第二行代码显示的是格式化之后的date，说明过滤器还是起到了作用的。 + + + +## 自定义全局过滤器 + + +可以用全局方法`Vue.filter()`自定义一个全局过滤器，它接收两个参数：过滤器 ID 和过滤器函数。过滤器函数以值为参数，返回转换后的值。 + +这样的话，每一个Vue的对象实例都可以拿到这个过滤器。 + +举例：（还是拿上面的代码进行举例） + +```html + + + + + + Document + + + + +
+ {{ time }} +
{{ time | datefmt }} +
+ +
+ {{ time | datefmt }} +
+ + + + +``` + + +## 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的。 \ No newline at end of file