diff --git "a/\351\273\204\345\256\207\347\205\214/6.2 Vue\345\210\227\350\241\250\346\270\262\346\237\223.md" "b/\351\273\204\345\256\207\347\205\214/6.2 Vue\345\210\227\350\241\250\346\270\262\346\237\223.md"
new file mode 100644
index 0000000000000000000000000000000000000000..1da6f0d0a55db15764f8d441508427a745708189
--- /dev/null
+++ "b/\351\273\204\345\256\207\347\205\214/6.2 Vue\345\210\227\350\241\250\346\270\262\346\237\223.md"	
@@ -0,0 +1,140 @@
+# 列表渲染
+
+## v-for把数组渲染一组元素
+v-for 还支持一个可选的第二个参数，即当前项的索引。
+```
+<!-- 前端代码 -->
+<div id="app">
+    <ul>
+        <li v-for="(list,index) in lists">
+            Id:{{list.id}} --- 内容:{{list.todo}} --- 索引:{{index}}
+        </li>
+    </ul>
+</div>
+```
+```
+// 后端代码
+let app = new Vue({
+    el:"#app",
+    data:{           
+        todoItem:"",
+        lists:[
+            {
+                id:1,
+                todo:"洗脸"
+            },
+            {
+                id:2,
+                todo:"吃饭"
+            },
+            {
+                id:3,
+                todo:"睡觉"
+            }
+        ]
+    }, 
+})
+```
+
+## 在 v-for 里使用对象
+第二个的参数(key)为 property 名称 (也就是键名)。
+```
+<!-- 前端代码 -->
+<div id="app">
+    <ul>
+        <li v-for="(obj,key) in objs">
+            {{key}}:{{obj}}
+        </li>
+    </ul>
+</div>
+```
+```
+// 后端代码
+let app = new Vue({
+    el:"#app",
+    data:{ 
+        objs:{
+            title:"静夜思",
+            author:"李白"
+        }
+    }
+})
+```
+
+## 数组更新
+### 变更方法
+1. push() 向数组的末尾添加一个或多个元素，并返回新的长度。
+2. pop() 用于删除并返回数组的最后一个元素。
+3. shift() 用于把数组的第一个元素从其中删除，并返回第一个元素的值。
+4. unshift() 向数组的开头添加一个或更多元素，并返回新的长度。
+5. splice() 向/从 数组中 添加/删除 项目，然后返回被删除的项目。
+6. sort() 用于对数组的元素进行排序。
+7. reverse() 用于颠倒数组中元素的顺序。
+
+### 替换方法
+1. filter() 创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
+2. concat() 用于连接两个或多个数组。
+3. slice() 可从已有的数组中返回选定的元素。
+4. split() 用于把一个字符串分割成字符串数组。
+
+## 演示
+
+![图片](./img/6.2-1.png)
+
+```
+<!-- 前端代码 -->
+<div id="app">
+    <label>缤哥的一天：</label>
+    <input type="text" v-model="todoItem">
+    <input type="button" value="干活" @click="addbtn">
+    <h1>{{todoItem}}</h1>
+    <ul>
+        <li v-for="(todos,index) in lists">{{index}}---{{todos.todo}} &nbsp;&nbsp;<button @click="remove(index)">不干了</button></li>
+    </ul>
+</div>
+```
+
+```
+// 后端代码
+let app = new Vue({
+    el:"#app",
+    data:{        
+        lists:[
+            {
+                id:1,
+                todo:"洗脸"
+            },
+            {
+                id:2,
+                todo:"吃饭"
+            },
+            {
+                id:3,
+                todo:"睡觉"
+            },
+            {
+                id:4,
+                todo:"刷牙"
+            },
+            {
+                id:5,
+                todo:"吃土"
+            },
+        ]
+    },
+    methods:{
+        addbtn:function(){
+            objs={
+                id:this.lists.length+1,
+                todo:this.todoItem
+            }
+            this.lists.push(objs);
+            this.todoItem=null;
+        },
+        remove:function(index){
+            console.log(index);
+            this.lists.splice(index,1)
+        },
+    }
+})
+```
\ No newline at end of file
diff --git "a/\351\273\204\345\256\207\347\205\214/6.4 Vue\344\272\213\344\273\266\345\244\204\347\220\206.md" "b/\351\273\204\345\256\207\347\205\214/6.4 Vue\344\272\213\344\273\266\345\244\204\347\220\206.md"
new file mode 100644
index 0000000000000000000000000000000000000000..30d683f30abd01f1fb5e70185b26466cedcd0997
--- /dev/null
+++ "b/\351\273\204\345\256\207\347\205\214/6.4 Vue\344\272\213\344\273\266\345\244\204\347\220\206.md"	
@@ -0,0 +1,128 @@
+# 事件处理
+
+## 事件处理方法
+
+可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码，@ 是v-on的缩写，我们可以在使用过程中吧 v-on 绑定一个方法进行使用。
+
+```
+<!-- 前端代码 -->
+<div id="app">
+    <button @keyup.page-up="count+=1" @click="count+=1">加血</button>
+    <p>生命值：{{count}}</p>
+    <button @keyup.page-down="reduce(hurt,$event)" @click="reduce(hurt,$event)">扣血</button>
+</div>
+```
+```
+// 后端代码
+let app = new Vue({
+    el: "#app",
+    data: {
+        count: 0,
+        hurt: 3
+    },
+    methods: {
+        reduce: function (id, event) {
+            this.count -= id;
+            console.log(id);
+            // `event` 是原生 DOM 事件
+            console.log(event);
+        }
+    }
+})
+```
+
+## 事件修饰符
+
+我们可以通过事件修饰符去处理 DOM 事件细节。 
+
+常用修饰符指令：
++ .stop 阻止事件继续传播
++ .prevent 阻止标签默认行为
++ .capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理
++ .self 只当在 event.target 是当前元素自身时触发处理函数
++ .once 事件将只会触发一次
++ .passive 告诉浏览器你不想阻止事件的默认行为
+
+```
+<!-- 阻止单击事件继续传播 -->
+<a v-on:click.stop="doThis"></a>
+
+<!-- 提交事件不再重载页面 -->
+<form v-on:submit.prevent="onSubmit"></form>
+
+<!-- 修饰符可以串联 -->
+<a v-on:click.stop.prevent="doThat"></a>
+
+<!-- 只有修饰符 -->
+<form v-on:submit.prevent></form>
+
+<!-- 添加事件监听器时使用事件捕获模式 -->
+<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
+<div v-on:click.capture="doThis">...</div>
+
+<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
+<!-- 即事件不是从内部元素触发的 -->
+<div v-on:click.self="doThat">...</div>
+```
+
+## 按键修饰符
+在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
+
+```
+<!-- 只有在 `key` 是 `PageUp` 时调用 `count` 的方法 -->
+<button @keyup.page-up="count">PageUp</button>
+```
+
+### 按键码
+
+常用的按键码别名：
+
++ .enter 回车键
++ .tab Tab键
++ .delete Delete键
++ .esc ESC键
++ .pace 空格键
++ .up 向上键
++ .down 向下键
++ .left 向左键
++ .right 向右键
+
+
+### 系统修饰键
+
+修饰键在和 keyup 事件一起用时，事件触发时修饰键必须处于按下状态，只有在按住 ctrl 的情况下释放其它按键，才能触发 keyup.ctrl。
+
+```
+<!-- 需要同时按下 `ctrl` 和 `B` 键才能除非 `count` 方法, 66 指的是B在ASCII编码表的排序  -->
+<button @keyup.ctrl.66="count">按下ctrl+B触发</button>
+```
+
+常用的系统修饰键别名：
+
++ .ctrl
++ .alt
++ .shift
++ .meta
+
+### .exact 修饰符
+
+.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。
+
+```
+<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
+<button v-on:click.ctrl="onClick">A</button>
+
+<!-- 有且只有 Ctrl 被按下的时候才触发 -->
+<button v-on:click.ctrl.exact="onCtrlClick">A</button>
+
+<!-- 没有任何系统修饰符被按下的时候才触发 -->
+<button v-on:click.exact="onClick">A</button>
+```
+
+### 鼠标按钮修饰符
+
++ .left 鼠标左键
++ .right 鼠标右键
++ .middle 鼠标中键
+
+这些修饰符会限制处理函数仅响应特定的鼠标按钮。
\ No newline at end of file
diff --git "a/\351\273\204\345\256\207\347\205\214/img/6.2-1.png" "b/\351\273\204\345\256\207\347\205\214/img/6.2-1.png"
new file mode 100644
index 0000000000000000000000000000000000000000..bffe6b11cfa720f1fa2da8ed4f7e453abb0101e5
Binary files /dev/null and "b/\351\273\204\345\256\207\347\205\214/img/6.2-1.png" differ