diff --git a/10-ES6/04-ES6：变量、函数扩展.md b/10-ES6/04-ES6：变量、函数扩展.md
index b279467..a5a2204 100644
--- a/10-ES6/04-ES6：变量、函数扩展.md
+++ b/10-ES6/04-ES6：变量、函数扩展.md
@@ -565,6 +565,7 @@ ES5中，this指向的是函数被调用的对象；而ES6的箭头函数中，t
 
 - [阮一峰 | ECMAScript 6 入门](http://es6.ruanyifeng.com/)
 
+
 ## 我的公众号
 
 想学习<font color=#0000ff>**代码之外的软技能**</font>？不妨关注我的微信公众号：**生命团队**（id：`vitateam`）。
diff --git a/21-Vue基础/01-Vue基础语法：系统指令.md b/21-Vue基础/01-01.Vue基础语法：系统指令.md
similarity index 94%
rename from 21-Vue基础/01-Vue基础语法：系统指令.md
rename to 21-Vue基础/01-01.Vue基础语法：系统指令.md
index af33cf0..1401fe4 100644
--- a/21-Vue基础/01-Vue基础语法：系统指令.md
+++ b/21-Vue基础/01-01.Vue基础语法：系统指令.md
@@ -1,4 +1,7 @@
 
+> 本文最初发表于[博客园]()，并在[GitHub](https://github.com/smyhvae/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。
+
+> 以下是正文。
 
 ## Vue初体验
 
@@ -128,15 +131,15 @@
 
 - `.stop`  阻止冒泡。本质是调用 event.stopPropagation()。
 
-`.prevent`  阻止默认事件。本质是调用 event.preventDefault()。
+- `.prevent`  阻止默认事件。本质是调用 event.preventDefault()。
 
-`.capture`  添加事件监听器时，使用 capture 模式。
+- `.capture`  添加事件监听器时，使用 capture 模式。
 
-`.self`  只有当事件是从侦听器绑定的元素本身触发时，才触发回调。
+- `.self`  只有当事件是从侦听器绑定的元素本身触发时，才触发回调。
 
-``.{keyCode | keyAlias}`   只当事件是从侦听器绑定的元素本身触发时，才触发回调。
+- ``.{keyCode | keyAlias}`   只当事件是从侦听器绑定的元素本身触发时，才触发回调。
 
-``.native` 监听组件根元素的原生事件。
+- ``.native` 监听组件根元素的原生事件。
 
 写法示范：
 
@@ -714,10 +717,11 @@ v-text可以将一个变量的值渲染到指定的元素中。例如：
 `v-if`和`v-show`都能够实现对一个元素的隐藏和显示操作。但是`v-if`是添加/删除DOM元素，而`v-show`是在这个元素上添加/移除`style="display:none"`属性。
 
 
+## 我的公众号
 
+想学习<font color=#0000ff>**代码之外的软技能**</font>？不妨关注我的微信公众号：**生命团队**（id：`vitateam`）。
 
+扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
 
-
-
-
+![](http://img.smyhvae.com/2016040102.jpg)
 
diff --git a/21-Vue基础/02-Vue的举例：列表功能.md b/21-Vue基础/01-02.Vue的举例：列表功能.md
similarity index 59%
rename from 21-Vue基础/02-Vue的举例：列表功能.md
rename to 21-Vue基础/01-02.Vue的举例：列表功能.md
index a7d233d..c40a798 100644
--- a/21-Vue基础/02-Vue的举例：列表功能.md
+++ b/21-Vue基础/01-02.Vue的举例：列表功能.md
@@ -4,7 +4,7 @@
 
 ### 步骤 1：列表功能
 
-代码如下：
+完整的代码如下：
 
 ```html
 <!DOCTYPE html>
@@ -111,7 +111,7 @@
 
 
 
-代码如下：
+完整的代码如下：
 
 ```html
 <!DOCTYPE html>
@@ -258,12 +258,174 @@ js部分：
 
     // 默认去遍历list集合，将集合中的每个元素传入到function的item里，
     var index = this.list.findIndex(function(item){
-    //根据item中的id属性来判断这个item是否是上面id中对应的数据，
+    //根据item中的id属性去匹配传进来的id
     //如果是则返回true ；否返回false,继续下面的一条数据的遍历，以此类推
-    return item.id ==id; //如果返回true，那么findIndex方法会将这个item对应的id返回到外面接受
+    return item.id ==id; //如果返回true，那么findIndex方法会将这个item对应的index
     });
 ```
 
+当item被删除后，v-for会被自动调用。
+
+完整版代码：
+
+```html
+<!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>
+    <style>
+        .table {
+            width: 800px;
+            margin: 20px auto;
+            border-collapse: collapse;  /*这一行，不能少：表格的两边框合并为一条*/
+        }
+
+        .table th {
+            background: #0094ff;
+            color: white;
+            font-size: 16px;
+            border: 1px solid black;
+            padding: 5px;
+        }
+
+        .table tr td {
+            text-align: center;
+            font-size: 16px;
+            padding: 5px;
+            border: 1px solid black;
+        }
+
+        .form {
+            width: 800px;
+            margin: 20px auto;
+        }
+
+        .form button {
+            margin-left: 10px;
+        }
+    </style>
+
+    <script src="vue2.5.16.js"></script>
+</head>
+
+<body>
+
+    <div id="app">
+
+        <div class="form">
+
+            编号：
+            <input type="text" v-model="formData.id"> 名称：
+            <input type="text" v-model="formData.name">
+
+            <button v-on:click="addData">添加</button>
+        </div>
+
+        <table class="table">
+            <th>编号</th>
+            <th>名称</th>
+            <th>创建时间</th>
+            <th>操作</th>
+            <tr v-show="list.length == 0">
+                <td colspan="4">列表无数据</td>
+            </tr>
+            <tr v-for="item in list">
+                <td>{{item.id}}</td>
+                <td>{{item.name}}</td>
+                <td>{{item.ctime}}</td>
+                <!--绑定delete事件，根据括号里的参数进行删除-->
+                <td>
+                    <a href="#" v-on:click="delData(item.id)">删除</a>
+                </td>
+            </tr>
+        </table>
+    </div>
+
+</body>
+
+<script>
+    var vm = new Vue({
+        el: '#app',
+        data: {
+            list: [{ id: 1, name: '奔驰', ctime: new Date }, { id: 2, name: '大众', ctime: new Date }],
+            //用户添加的数据
+            formData: {
+                id: 0,
+                name: ""
+            }
+        },
+
+        methods: {
+            addData: function () {
+                //将数据追加到list中
+                var p = { id: this.formData.id, name: this.formData.name, ctime: new Date() };
+                this.list.push(p);
+
+                //清空页面上的文本框中的数据
+                this.formData.id = 0;
+                this.formData.name = '';
+            },  //注意：方法之间用逗号隔开，这个逗号不要忘记了
+
+            delData: function (id) {
+                // 0 提醒用户是否要删除数据
+                if (!confirm('是否要删除数据?')) {
+                    //当用户点击的取消按钮的时候，应该阻断这个方法中的后面代码的继续执行
+                    return;
+                }
+
+                // 1 调用list.findIndex()方法根据传入的id获取到这个要删除数据的索引值
+                var index = this.list.findIndex(function (item) {
+                    return item.id == id
+                });
+
+                // 2 调用方法：list.splice(待删除的索引, 删除的元素个数)
+                this.list.splice(index, 1);
+            }
+
+
+        }
+    });
+
+</script>
+
+</html>
+```
+
+
+
+### 步骤 5：按条件筛选item
+
+在 Vue 1.0版本中，可以通过`filterBy`这个api进行过滤。
+
+如果item是简单数据类型，可以这样筛选：
+
+```html
+    <div v-for="item in list | filterBy 'hello'">
+```
+
+上方代码的意思是：找到所有item中包含`hello`的指定item。
+
+如果item是一个对象，比如：
+
+```javascript
+    list: [{ id: 1, name: '奔驰', ctime: new Date }, { id: 2, name: '大众', ctime: new Date }],
+```
+
+上面的list数据中，我要去过滤匹配item中的name属性，可以这样筛选：
+
+```html
+    <div v-for="item in list | filterBy 'hello（筛选条件值）' in 'name'">
+```
+
+但`filterBy`这种系统过滤器只是Vue1.0中的api，在Vue2.0中已经删除了，我们需要自定义过滤器。
+
+
+
+
 
 
 

编号	名称	创建时间	操作
列表无数据
{{item.id}}	{{item.name}}	{{item.ctime}}	+ 删除 +