diff --git a/03-JavaScript基础/10-DOM操作.md b/03-JavaScript基础/10-DOM操作.md index c61e6eb..f176364 100644 --- a/03-JavaScript基础/10-DOM操作.md +++ b/03-JavaScript基础/10-DOM操作.md @@ -613,8 +613,8 @@ JS中的**父子兄**访问关系： 上方结构中，子盒子box12是在父亲box11里的，子盒子box22是在父亲box21里面的。现在，如果我调用方法`box11.appendChild(box22)`，**最后产生的结果是：box22会跑到box11中**（也就是说，box22不在box21里面了）。这是一个很神奇的事情： -20180129_2125.png +![](http://img.smyhvae.com/20180129_2125.png) ### 删除节点 diff --git a/21-Vue基础/01-04.Vue的举例：列表功能.md b/21-Vue基础/01-04.Vue的举例：列表功能.md index e219fbd..46c032f 100644 --- a/21-Vue基础/01-04.Vue的举例：列表功能.md +++ b/21-Vue基础/01-04.Vue的举例：列表功能.md @@ -1,5 +1,4 @@ - ## 列表功能举例 ### 步骤 1：列表功能 @@ -82,7 +81,6 @@ ![](http://img.smyhvae.com/20180401_1517.png) - ### 步骤 2：无数据时，增加提示 如果list中没有数据，那么表格中就会只显示表头``，这样显然不太好看。 @@ -109,8 +107,6 @@ （3）将数据展示出来。`v-for`有个特点：当list数组发生改变后，vue.js就会自动调用`v-for`重新将数据生成，这样的话，就实现了数据的自动刷新。 - - 完整的代码如下： ```html @@ -219,7 +215,6 @@ ``` - ### 步骤 4：item的删除 html部分： @@ -229,7 +224,6 @@ html部分： 删除 ``` - js部分： ```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部分： ``` - - ### 步骤 5：按条件筛选item 现在要求实现的效果是，在搜索框输入关键字 keywords，列表中仅显示匹配出来的内容。也就是说： @@ -405,10 +399,9 @@ js部分： - 现在， 我们在使用`v-for`进行遍历显示的时候，不能再遍历全部的 list 了；我们要自定义一个 search 方法，同时，把keywords作为参数，传递给 search 方法。即`v-for="item in search(keywords)"`。 - 在 search(keywords) 方法中，为了获取 list 数组中匹配的item，我们可以有两种方式实现。如下。 -**方式一**： +**方式一**：采用`forEach + indexOf()` ```javascript search(keywords) { // 根据关键字，进行数据的搜索，返回匹配的item @@ -416,7 +409,7 @@ js部分： //实现方式一：通过 indexOf() 进行匹配。 var newList = []; this.list.forEach(item => { - if (item.name.indexOf(keywords) != -1) { + if (item.name.indexOf(keywords) != -1) { //只要不等于 -1，就代表匹配到了 newList.push(item) } }) @@ -440,51 +433,174 @@ js部分： 上方代码中，也就是说，如果参数为空字符串，那么，每个item都能匹配到。 - -**方式二**： - - - - - - - - - - - - -### 步骤6 - - - - - - -在 Vue 1.0版本中，可以通过`filterBy`这个api进行过滤。 - -如果item是简单数据类型，可以这样筛选： - -```html -
-``` - -上方代码的意思是：找到所有item中包含`hello`的指定item。 - -如果item是一个对象，比如： +**方式二**： filter + includes()方法 ```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 -
+ + + + + + + + Document + + + + + + + +
+ +
+ + 编号： + 名称： + + + + 搜索： + + +
+ + + + + + + + + + + + + + + + +
编号名称创建时间操作
列表无数据
{{item.id}}{{item.name}}{{item.ctime}} + 删除 +
+
+ + + + + + + ``` -但`filterBy`这种系统过滤器只是Vue1.0中的api，在Vue2.0中已经删除了，我们需要自定义过滤器。 - +备注：在1.x 版本中可以通过filterBy指令来实现过滤，但是在2.x中已经被废弃了。 diff --git a/21-Vue基础/01-04.过滤器.md b/21-Vue基础/01-04.过滤器.md deleted file mode 100644 index 913ba66..0000000 --- a/21-Vue基础/01-04.过滤器.md +++ /dev/null @@ -1,196 +0,0 @@ - - - - - -## 系统过滤器 - -Vue提供了一系列的固定逻辑来使程序员更加容易的实现这些功能，这些过滤器称之为系统过滤器，Vue也提供了一个接口用来供程序员定义属于自己的特殊逻辑，Vue称之为自定义过滤器。 - - -系统过滤器的使用，可以参考参考文档： - -注意：系统过滤器是Vue1.0中存在的，在Vue2.0中已经删除了。 - - -## 自定义过滤器 - -文档地址： - - -### 自定义私有过滤器 - -**私有过滤器**：在某一个 vue 对象内部定义的过滤器称之为私有过滤器。这种过滤器只有在当前vue对象的el指定的监管区域有用。 - - -**举例**：日期格式化 - -```html - - - - - - Document - - - - -
- {{ time }} -
- {{ time | datefmt }} -
- - - - - -``` - -上面的代码中，我们在vue实例中，通过`filters`关键字，在里面定义了一个局部过滤器`datefmt`。 - - -运行结果： - -![](http://img.smyhvae.com/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+版本：支持单字母的按键别名。 -``` - - - - - - - - - - - - - - - - - - - - - - - - - -## 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 new file mode 100644 index 0000000..62d2c54 --- /dev/null +++ b/21-Vue基础/01-05.过滤器.md @@ -0,0 +1,299 @@ + + + +## 前言 + + +> 我们接着上一篇文章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 }}

+
+ + + + + +``` + + +网页显示效果如下： + + + + + + + + + + + + + + + +举例：（还是拿上面的代码进行举例） + +```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