diff --git a/21-Vue基础/01-04.Vue的举例：列表功能.md b/21-Vue基础/01-04.Vue的举例：列表功能.md index 46c032f..cd66c0b 100644 --- a/21-Vue基础/01-04.Vue的举例：列表功能.md +++ b/21-Vue基础/01-04.Vue的举例：列表功能.md @@ -234,7 +234,7 @@ js部分： return; } - // 1 调用list.findIndex()方法根据传入的id获取到这个要删除数据的索引值 + // 1 调用list.findIndex()方法根据传入的id获取到这个要删除数据的索引值（在数组中的索引值） var index = this.list.findIndex(function (item) { return item.id == id }); diff --git a/21-Vue基础/01-05.自定义过滤器：时间格式化举例.md b/21-Vue基础/01-05.自定义过滤器：时间格式化举例.md new file mode 100644 index 0000000..96f16eb --- /dev/null +++ b/21-Vue基础/01-05.自定义过滤器：时间格式化举例.md @@ -0,0 +1,657 @@ + + + +## 前言 + + +> 我们接着上一篇文章01-04来讲。 + +### 过滤器的概念 + +**概念**：Vue.js 允许我们自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache **插值表达式**、 **v-bind表达式**。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示。 + + +### Vue1.X中的系统过滤器 + +Vue提供了一系列的固定逻辑来使程序员更加容易的实现这些功能，这些过滤器称之为系统过滤器。 + +系统过滤器是Vue1.0中存在的，在Vue2.0中已经删除了。 + +系统过滤器的使用，可以参考参考文档： + + +Vue也提供了一个接口用来供程序员定义属于自己的特殊逻辑，Vue称之为自定义过滤器。我们接下来讲一讲。 + + +## 自定义全局过滤器 + +文档地址： + + +### 全局过滤器的基本使用 + + +我们可以用全局方法`Vue.filter()`自定义一个全局过滤器。这样的话，每一个Vue的对象实例（每一个VM实例）都可以拿到这个过滤器。它接收两个参数：过滤器的名称 、过滤器函数。 + +比如说，我要将`曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男人`这句 msg 中的“单纯”改为“邪恶”。可以这样做： + +（1）在差值表达式中这样调用： + +```html +

{{ msg | msgFormat }

+``` + + +上方代码的意思是说： + +- **管道符前面**的`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 + + + + + + + + Document + + + + +
+ +

{{ msg | msgFormat }}

+
+ + + + + +``` + + +网页显示效果如下： + +20180522_1240.png + +### 给过滤器添加多个参数 + +上面的举例代码中，`{{ msg | msgFormat }}`中，**过滤器的调用并没有加参数**，其实它还可以添加多个参数。 + +接下来，我们在上面的举例代码中进行改进。 + + +**改进一**：过滤器加一个参数。如下： + + +将 msg 这个字符串中的“单纯”改为 xxx 变量。代码如下： + +```html + + + + + + + + Document + + + + +
+ +

{{ msg | msgFormat('xxx') }}

+ +
+ + + + + + +``` + + +20180525_2135.png + +代码解释： + +也就是说，

标签在调用过滤器的时候（`{{ msg | msgFormat('xxx') }}`），括号的参数写的啥，就把指定字符串替换成啥。 + +括号里的参数代表 function中的 arg2。 + +**改进二**：过滤器加两个参数。如下： + +```html + + + + + + + + Document + + + + +

+ + +

{{ msg | msgFormat('【牛x】', '【参数arg3】') }}

+ +
+ + + + + +``` + + +效果如下： + +20180525_2150.png + + +**改进3：同时使用多个过滤器** + +对 msg 同时使用多个过滤器。例如： + +```html + + + + + + + + Document + + + + +
+ + +

{{ msg | msgFormat('【牛x】', '【参数arg3】') | myFilter2}}

+ +
+ + + + + +``` + +效果如下： + +20180525_2200.png + +上方代码中，添加了多个过滤器，实现的思路是：**将 msg 交给第一个过滤器来处理，然后将处理的结果交给第二个过滤器来处理** 。 + + + + + +### 举例1：时间格式化 + +```html + + + + + + Document + + + + +
+ {{ time }} +
{{ time | datefmt }} +
+ +
+ {{ time | datefmt }} +
+ + + + +``` + +运行效果： + +20180525_2230.png + +### 举例2：时间格式化 + +上面的举例1，时间格式化的过滤器，我们还有个更高端的写法：（字符串模板） + +```html + + + + + + Document + + + + +
+ 2018-05-25T14:06:51.618Z +
{{ '2018-05-25T14:06:51.618Z' | dateFormat }} +
+ + + + + +``` + +运行结果： + +20180526_2319.png + +【荐】**举例2的改进**：（字符串的padStart方法使用） + +上图中，我们可以看到，箭头处的时间有些问题，比如说，`6`要写成`06`更合适。为了实现这个功能，我们可以这样做： + +使用ES6中的字符串新方法 `String.prototype.padStart(maxLength, fillString='')` 或 `String.prototype.padEnd(maxLength, fillString='')`来填充字符串。 `pad`在英文中指的是`补充`。 + +实现举例如下： + + +```html + + + + + + Document + + + + +
+ 2018-05-25T14:06:51.618Z +
{{ '2018-05-25T14:06:51.618Z' | dateFormat }} +
+ + + + + +``` + + +运行效果如下： + +20180526_2323.png + +`pattern`参数的解释： + +在做`if (pattern && pattern.toLowerCase() === 'yyyy-mm-dd')`这个判断时，逻辑是：**先保证pattern参数传进来了，然后继续后面的判断**。 + +我们不能写成：`if (pattern.toLowerCase() === 'yyyy-mm-dd')`。因为，万一在调用的时候，不传递参数pattern，那么 if语句就相当于`if (undefined.toLowerCase() === 'yyyy-mm-dd')`，就会报错。 + +当然，ES6中有个新特性叫“默认参数”，我们就可以这样写： + +```html + + + + + + Document + + + + +
+ 2018-05-25T14:06:51.618Z +
{{ '2018-05-25T14:06:51.618Z' | dateFormat }} +
+ + + + + + +``` + + +### 自定义私有过滤器 + +**私有过滤器**：在某一个 vue 对象内部定义的过滤器称之为私有过滤器。这种过滤器只有在当前vue对象的el指定的监管区域有用。 + + +**举例**：日期格式化 + +```html + + + + + + Document + + + + +
+ {{ time }} +
+ {{ time | datefmt }} +
+ + + + + +``` + +上面的代码中，我们在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的。 \ No newline at end of file diff --git a/21-Vue基础/01-05.过滤器.md b/21-Vue基础/01-05.过滤器.md deleted file mode 100644 index fad9b5a..0000000 --- a/21-Vue基础/01-05.过滤器.md +++ /dev/null @@ -1,308 +0,0 @@ - - - -## 前言 - - -> 我们接着上一篇文章01-04来讲。 - -### 过滤器的概念 - -**概念**：Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache **插值表达式**、 **v-bind表达式**。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示。 - - -### Vue1.X中的系统过滤器 - -Vue提供了一系列的固定逻辑来使程序员更加容易的实现这些功能，这些过滤器称之为系统过滤器。 - -系统过滤器是Vue1.0中存在的，在Vue2.0中已经删除了。 - -系统过滤器的使用，可以参考参考文档： - - -Vue也提供了一个接口用来供程序员定义属于自己的特殊逻辑，Vue称之为自定义过滤器。我们接下来讲一讲。 - - -## 自定义全局过滤器 - -文档地址： - - - -### 全局过滤器的基本使用 - - -我们可以用全局方法`Vue.filter()`自定义一个全局过滤器。这样的话，每一个Vue的对象实例都可以拿到这个过滤器。它接收两个参数：过滤器的名称 和过滤器函数。 - -比如说，我要将`曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男人`这句 msg 中的“单纯”改为“邪恶”。可以这样做： - -（1）在差值表达式中这样调用： - -```html -

{{ msg | msgFormat }

-``` - - -上方代码的意思是说： - -- **管道符前面**的`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 - - - - - - - - Document - - - - -
- -

{{ msg | msgFormat }}

-
- - - - - -``` - - -网页显示效果如下： - -20180522_1240.png - - -### 给过滤器添加多个参数 - -上面的举例代码中，`Vue.filter('msgFormat', function(myMsg){})`中，我们只给里面的function添加了一个参数，其实它还可以参加多个参数。 - - - - - - - - - - - - - - - - -举例：（还是拿上面的代码进行举例） - -```html - - - - - - Document - - - - -
- {{ time }} -
{{ time | datefmt }} -
- -
- {{ time | datefmt }} -
- - - - -``` - - - - -### 自定义私有过滤器 - -**私有过滤器**：在某一个 vue 对象内部定义的过滤器称之为私有过滤器。这种过滤器只有在当前vue对象的el指定的监管区域有用。 - - -**举例**：日期格式化 - -```html - - - - - - Document - - - - -
- {{ time }} -
- {{ time | datefmt }} -
- - - - - -``` - -上面的代码中，我们在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的。 \ No newline at end of file diff --git a/21-Vue基础/01-06.自定义按键修饰符&自定义私有指令.md b/21-Vue基础/01-06.自定义按键修饰符&自定义私有指令.md new file mode 100644 index 0000000..c235c5e --- /dev/null +++ b/21-Vue基础/01-06.自定义按键修饰符&自定义私有指令.md @@ -0,0 +1 @@ +01-06.自定义按键修饰符&自定义私有指令.md \ No newline at end of file