diff --git "a/\346\236\227\344\274\237\347\216\256/Vue-2021-05-26-\346\270\262\346\237\223\343\200\201\347\224\250\346\210\267\350\276\223\345\205\245\344\270\216\347\273\204\344\273\266.md" "b/\346\236\227\344\274\237\347\216\256/Vue-2021-05-26-\346\270\262\346\237\223\343\200\201\347\224\250\346\210\267\350\276\223\345\205\245\344\270\216\347\273\204\344\273\266.md"
index 806bacbbda229ef8dd7b165c6721506115e7add7..3aa03b05c87eae16eadc7b8ee1a2af1074787897 100644
--- "a/\346\236\227\344\274\237\347\216\256/Vue-2021-05-26-\346\270\262\346\237\223\343\200\201\347\224\250\346\210\267\350\276\223\345\205\245\344\270\216\347\273\204\344\273\266.md"
+++ "b/\346\236\227\344\274\237\347\216\256/Vue-2021-05-26-\346\270\262\346\237\223\343\200\201\347\224\250\346\210\267\350\276\223\345\205\245\344\270\216\347\273\204\344\273\266.md"
@@ -34,4 +34,76 @@
 ![](./img/2021-05-27_Vue12.png)
 
 
-### 组件化应用构建
\ No newline at end of file
+### 组件化应用构建
+
+```
+
+ <div id="app">
+        <ol>
+            <table>
+                <todo-item v-for="item in toDos" v-bind:x=item></todo-item>
+            </table>
+        </ol>
+
+ </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+<script>
+        Vue.component(`todo-item`, {
+            props: [`x`],
+            template: `
+            <tr>
+               <td><li>{{x.taskName}}</li></td>
+             
+            </tr>
+            
+            `
+        })
+        let app = new Vue({
+            el: "#app",
+            data() {
+                return {
+                    formData: {
+                        username: "哎嘿",
+                        password: ""
+                    },
+                    toDos: [
+                        {
+                            id: 1,
+                            taskName: "龙族"
+                        },
+                        {
+                            id: 2,
+                            taskName: "原神"
+                        },
+                        {
+                            id: 3,
+                            taskName: "哑舍"
+                        },
+                        {
+                            id: 4,
+                            taskName: "天宝伏妖录"
+                        },
+                        {
+                            id: 5,
+                            taskName: "时光代理人"
+                        },
+                        {
+                            id: 6,
+                            taskName: "忧国的莫里亚蒂"
+                        },
+                        {
+                            id: 7,
+                            taskName: "张起灵"
+                        },
+                    ]
+                }
+            },
+            computed: {
+                str: function () {
+                    return `哈哈:${this.formData.username},哈哈哈:${this.formData.password}`
+                }
+            }
+        })
+</script>
+```    
\ No newline at end of file
diff --git "a/\346\236\227\344\274\237\347\216\256/Vue-2021-05-28-Vue\345\256\236\344\276\213\343\200\201\346\225\260\346\215\256\344\270\216\346\226\271\346\263\225\343\200\201\347\224\237\345\221\275\345\221\250\346\234\237\351\222\251\345\255\220.md" "b/\346\236\227\344\274\237\347\216\256/Vue-2021-05-28-Vue\345\256\236\344\276\213\343\200\201\346\225\260\346\215\256\344\270\216\346\226\271\346\263\225\343\200\201\347\224\237\345\221\275\345\221\250\346\234\237\351\222\251\345\255\220.md"
index e4fe0b3f0be1712354cf7e25c12d47860d0052e2..f83dfe7443cafac891da0f7a13c9845e6bdeab04 100644
--- "a/\346\236\227\344\274\237\347\216\256/Vue-2021-05-28-Vue\345\256\236\344\276\213\343\200\201\346\225\260\346\215\256\344\270\216\346\226\271\346\263\225\343\200\201\347\224\237\345\221\275\345\221\250\346\234\237\351\222\251\345\255\220.md"
+++ "b/\346\236\227\344\274\237\347\216\256/Vue-2021-05-28-Vue\345\256\236\344\276\213\343\200\201\346\225\260\346\215\256\344\270\216\346\226\271\346\263\225\343\200\201\347\224\237\345\221\275\345\221\250\346\234\237\351\222\251\345\255\220.md"
@@ -15,4 +15,81 @@
 1. 把 data 对象的属性加入到 Vue 的响应式系统中，这些属性值就会发生改变，试图也会发生对应的"响应"，匹配新的值。
 ![](./img/2021-05-28_Vueshuju1.png)
 ![](./img/2021-05-28_Vueshuju2.png)
-![](./img/2021-05-28_Vueshuju3.png)
\ No newline at end of file
+![](./img/2021-05-28_Vueshuju3.png)
+
+
+2. 只有实例被创建时就已经存在在data中的属性才是响应式的。后面再添加属性是不会改变的。
+```
+  <div id="app">
+        {{thinkToSing}}
+        <br>
+        {{thinkPad}}
+        <br>
+        {{ipad}}
+
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+    <script>
+        let data ={
+            thinkToSing:"哈哈哈哈",
+            thinkPad:"呵呵呵呵",
+            ipad:"嘻嘻嘻嘻"    
+        }
+
+
+
+        let app = new Vue({
+             el:"#app",
+             data:data
+        })
+        
+        console.log(app);
+
+        console.log(data.thinkToSing===app.thinkToSing);
+    </script>
+```
+
+```
+   <div id="app">
+        {{thinkToSing}}
+        <br>
+        {{thinkPad}}
+        <br>
+        {{ipad}}
+
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+    <script>
+        let data ={
+            thinkToSing:"哈哈哈哈",
+            thinkPad:"呵呵呵呵",
+            ipad:"嘻嘻嘻嘻"    
+        }
+
+           
+
+        let app = new Vue({
+             el:"#app",
+             data:data,
+             beforeUpdate:function(){
+                  console.log("在数据更新之前");
+                  console.log(this);
+             },
+             updated:function(){
+                  console.log("在数据更新之后");
+                  console.log(this);
+             }
+
+        })
+        
+        console.log(app);
+
+        console.log(data);
+
+        console.log(data.thinkToSing===app.thinkToSing);
+
+
+    </script>
+```
\ No newline at end of file
diff --git "a/\346\236\227\344\274\237\347\216\256/Vue-2021-06-01-Class\344\270\216Style\347\273\221\345\256\232\344\270\216\346\235\241\344\273\266\346\270\262\346\237\223.md" "b/\346\236\227\344\274\237\347\216\256/Vue-2021-06-01-Class\344\270\216Style\347\273\221\345\256\232\344\270\216\346\235\241\344\273\266\346\270\262\346\237\223.md"
new file mode 100644
index 0000000000000000000000000000000000000000..343c95441d364a48b4983761b9c9d04cb03b0e24
--- /dev/null
+++ "b/\346\236\227\344\274\237\347\216\256/Vue-2021-06-01-Class\344\270\216Style\347\273\221\345\256\232\344\270\216\346\235\241\344\273\266\346\270\262\346\237\223.md"
@@ -0,0 +1,294 @@
+## 新的一周新的知识，讲述学习Vue.js的路上碰到的 Class 与 Style 绑定、条件渲染。
+
+
+### Class 与 Style 绑定
+1. 可动态切换 class。 可以在对象中传入更多的字段来动态来切换多个class。
+```
+<body>
+     <div id="app">
+           <span v-bind:class="{active:msg}">Class与Style绑定、条件渲染</span>
+     </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+    
+    <script>
+        var app = new Vue({
+            el:"#app",
+            data:{
+                msg:true
+            }
+        })
+    </script>
+
+</body>
+
+```
+
+2. v-bind:class 指令也可以与普通的 class 属性共存。但是最多只能两个。
+```
+    <div id="app">
+           <span v-bind:class="{active:msg}" class="static">Class与Style绑定、条件渲染</span>
+     </div>
+```
+渲染效果如下
+![](./img/2021-06-01_Vueclass.png) 
+
+3. 当 data 数据变更时，class列表将相应的更新，当然渲染列表也就不一样了。
+```
+    <script>
+        var app = new Vue({
+            el:"#app",
+            data:{
+                msg:false,
+                static:true
+            }
+        })
+    </script>
+```
+![](./img/2021-06-01_VueClass2.png)
+
+```
+<body>
+     <div id="app">
+           <span v-bind:class="classParam" >Class与Style绑定、条件渲染</span>
+     </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+    
+    <script>
+        var app = new Vue({
+            el:"#app",
+            data:{
+                isok:false,
+                classParam:{
+                    msg:false,
+                    static:true
+                }
+            }
+        })
+    </script>
+</body> 
+
+```   
+渲染结果和上面的是一样的。
+* 也可以绑定一个返回对象的计算属性
+```
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Class与Style绑定、条件渲染</title>
+    <style>
+        .msg{
+            color: crimson;
+        }
+        .static{
+            background-color: cornflowerblue;
+        }
+    </style>
+</head>
+<body>
+     <div id="app">
+           <span v-bind:class="classParam" >Class与Style绑定、条件渲染</span>
+     </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+    
+    <script>
+        var app = new Vue({
+            el:"#app",
+            data:{
+                isok:false,
+                classParam:{
+                    msg:true,
+                    static:false
+                }
+            },
+            computed:{
+                classVar:function(){
+                    if('天气热'){
+                       return{
+                           msg:true
+                       }
+                    }else{
+                        return{
+                            static:true
+                        }
+                    }
+                }
+            }
+        })
+    </script>
+
+</body>
+```
+![](./img/2021-06-01_Vueclass3.png)
+
+* 看看另一种。
+```
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Class与Style绑定、条件渲染</title>
+    <style>
+        .msg{
+            color: crimson;
+        }
+        .static{
+            background-color: cornflowerblue;
+        }
+    </style>
+</head>
+<body>
+     <div id="app">
+           <span v-bind:class="classVar" >Class与Style绑定、条件渲染</span>
+     </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+    
+    <script>
+        var app = new Vue({
+            el:"#app",
+            data:{
+                isok:false,
+                classParam:{
+                    msg:true,
+                    static:false
+                }
+            },
+            computed:{
+                classVar:function(){
+                    if('天气热'){
+                       return{
+                           msg:true
+                       }
+                    }else{
+                        return{
+                            static:true
+                        }
+                    }
+                }
+            }
+        })
+    </script>
+
+</body>
+```
+![](./img/2021-06-01_Vueclass4.png)
+
+4. 数组语法
+```
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        .haha{
+            color:aqua;
+        }
+        .heihei{
+            background-color: green;
+        }
+    </style>
+</head>
+<body>
+    <div id="app">
+        <span :class ="list" class="适之">
+              哈哈哈哈哈
+        </span>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+    <script>
+        let app = new Vue({
+            el:"#app",
+            data:{
+                isLive:false,
+                classParam:{
+                    haha:true,
+                    heihei:false
+                },
+                class2:"守常",
+                class3:"辜老",
+                list:['二十八画生','毛泽东']
+            },
+            computed:{
+                classVar:function(){
+                    if("陈独秀是真的秀"){
+                         return{
+                             heihei:true
+                         } 
+                    }else{
+                        return{
+                            haha:true
+                        }
+                    }
+                }
+            }
+        });
+    </script>
+</body>
+</html>
+```
+
+5.绑定内联样式
+* 对象语法
+```
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        .haha{
+            color:aqua;
+        }
+        .heihei{
+            background-color: green;
+        }
+    </style>
+</head>
+<body>
+    <div id="app">
+        <span :class ="list" class="适之" :style="cssParam">
+              哈哈哈哈哈
+        </span>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+    <script>
+        let app = new Vue({
+            el:"#app",
+            data:{
+                isLive:false,
+                classParam:{
+                    haha:true,
+                    heihei:false
+                },
+                class2:"守常",
+                class3:"辜老",
+                list:['二十八画生','毛泽东'],
+                cssParam:{
+                    color:"red",
+                    fontSize:"666px"
+                }
+            },
+            computed:{
+                classVar:function(){
+                    if("陈独秀是真的秀"){
+                         return{
+                             heihei:true
+                         } 
+                    }else{
+                        return{
+                            haha:true
+                        }
+                    }
+                }
+            }
+        });
+    </script>
+</body>
+</html>
diff --git "a/\346\236\227\344\274\237\347\216\256/Vue-2021-06-02-\345\210\227\350\241\250\346\270\262\346\237\223.md" "b/\346\236\227\344\274\237\347\216\256/Vue-2021-06-02-\345\210\227\350\241\250\346\270\262\346\237\223.md"
new file mode 100644
index 0000000000000000000000000000000000000000..03a38b68770d30d4378d2dfb6bc7396195604ec7
--- /dev/null
+++ "b/\346\236\227\344\274\237\347\216\256/Vue-2021-06-02-\345\210\227\350\241\250\346\270\262\346\237\223.md"
@@ -0,0 +1,430 @@
+## 今天被空调吹的脑袋瓜疼之 Vue.js 列表渲染
+
+### 用 v-for 把一个数组对应为一组元素
+1. v-for指令需要使用 item in tems 形式的特殊语法。items 是源数据数组，item 是数组元素别名。
+```
+<body>
+    <div id="app">
+       <ul>
+           <li v-for="item in items" >
+             {{item.msg}}
+           </li>
+       </ul>
+    </div>
+    
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+   <script>
+       var app = new Vue({
+           el:"#app",
+           data:{
+               items:[
+                   {msg:'moomo'},
+                   {msg:'dada'}
+               ]
+           }
+       })
+   </script>
+
+</body>
+
+```
+![](./img/2021-06-02_Vueliebiao2.png)
+
+2. 在 V-for 里可以访问所有父作用域的属性。
+```
+<body>
+    <div id="app">
+       <ul>
+           <li v-for="x in list" >
+              <ul>
+                  <li v-for="(item,index) in items">{{x}} - {{index+1}} </li>
+              </ul>
+           </li>
+       </ul>
+    </div>
+    
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+   <script>
+       var app = new Vue({
+           el:"#app",
+           data:{
+               items:[
+                   {msg:'moomo'},
+                   {msg:'dada'}
+               ],
+               list:[
+                   "巴里巴里","淅淅沥沥","哗啦哗啦"
+               ]
+           }
+       })
+   </script>
+
+</body>
+```
+![](./img/2021-06-02_Vueliebiao.png)
+
+3. 可以支持一个可选的第二个参数，也就是当前项的索引。
+```
+<body>
+    <div id="app">
+       <ul>
+           <li v-for="(item,index) in items" >
+             {{index}} - {{item.msg}} 
+           </li>
+       </ul>
+    </div>
+    
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+   <script>
+       var app = new Vue({
+           el:"#app",
+           data:{
+               items:[
+                   {msg:'moomo'},
+                   {msg:'dada'}
+               ]
+           }
+       })
+   </script>
+
+</body>
+```
+![](./img/2021-06-02_Vueliebiao3.png)
+
+4. 可以用 of 替代 in 作为分隔符
+```
+ <div id="app">
+       <ul>
+           <li v-for="(item,index) of items" >
+             {{index}} - {{item.msg}} 
+           </li>
+       </ul>
+ </div>
+
+```
+
+### 在 v-for 里使用对象
+1. 试试用 v-for 来遍历一个对象的属性
+```
+<body>
+    <div id="app">
+      <table>
+          <tr v-for ="x in items">
+              <td>{{x}}</td>
+          </tr>
+      </table>
+    </div>
+    
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+   <script>
+       var app = new Vue({
+           el:"#app",
+           data:{
+               items:{
+                   age:18,
+                   name:'Vue.js',
+                   class:'编程19班',
+                   schoolo:'中国国防大学'
+               }
+           }
+       })
+   </script>
+</body>
+```
+![](./img/2021-06-02_Vueliebiao4.png)
+
+2. 可以提供第二个的参数为键名
+```
+<body>
+    <div id="app">
+      <table>
+          <tr v-for ="(x,name) in items">
+              <td> {{name}}:{{x}} </td>
+          </tr>
+      </table>
+    </div>
+    
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+   <script>
+       var app = new Vue({
+           el:"#app",
+           data:{
+               items:{
+                   age:18,
+                   name:'Vue.js',
+                   class:'编程19班',
+                   schoolo:'中国国防大学'
+               }
+           }
+       })
+   </script>
+</body>
+```
+![](./img/2021-06-02_Vueliebiao5.png)
+
+3. 也可以用第三个参数作为索引。
+```
+<body>
+    <div id="app">
+      <table>
+          <tr v-for ="(x,name,index) in items">
+              <td> {{index+1}}.{{name}}:{{x}} </td>
+          </tr>
+      </table>
+    </div>
+    
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+   <script>
+       var app = new Vue({
+           el:"#app",
+           data:{
+               items:{
+                   age:18,
+                   name:'Vue.js',
+                   class:'编程19班',
+                   schoolo:'中国国防大学'
+               }
+           }
+       })
+   </script>
+</body>
+```
+
+### 维护状态
+啊。。。这一块没怎么看懂。
+
+### 数组变更方法
+
+1.  push():  在尾部添加。
+
+2.  pop():  在尾部删除。
+
+3.  shift():  在头部添加。
+
+4.  unshift():  在头部删除。
+
+5.  splice():  人称“万精油”，可添加可删除可返回。例如：items.splice(0,1,"add")。在items里面找到索引值为0，删掉1个，添加add
+
+6.  sort():  对原列表排序，如果指定参数，则使用比较函数指定的比较函数。例如：list.sort(cmp=None, key=None, reverse=False)。cmp -- 可选参数, 如果指定了该参数会使用该参数的方法进行排序。key -- 主要是用来进行比较的元素，只有一个参数，具体的函数的参数就是取自于可迭代对象中，指定可迭代对象中的一个元素来进行排序。reverse -- 排序规则，reverse = True 降序， reverse = False 升序（默认）。
+
+7.  reverse():reverse() 方法用于颠倒数组中元素的顺序。
+
+```
+<body>
+    <div id="app">
+      <ul>
+          <button @click="so">点击</button>
+      </ul>
+    </div>
+    
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+   <script>
+       var app = new Vue({
+           el:"#app",
+           data:{
+               items:{
+                   age:18,
+                   name:'Vue.js',
+                   class:'编程19班',
+                   schoolo:'中国国防大学'
+               },
+               obj:[
+                   '中国国防大学','兰州大学','武汉大学','中国医科大学'
+                   ]
+           },
+           methods:{
+               sp:function(){
+                   this.obj.splice(2,1,"西南师范")
+                   console.log(this.obj);
+               },
+               so:function(){
+                   console.log(this.obj);
+                   this.obj.sort()
+                   console.log(this.obj);
+               }
+           }
+       })
+   </script>
+
+</body>
+```
+
+### 替换数组（不会改变数组，会返回一个新数组）
+
+1. filter():过滤器
+
+2. concat():合并数组。数组末尾添加一个或多个值（数组）。和 push 不一样的是不会改变原数组，而是创建原数组的副本。push是在原数组上操作，改变原数组。
+```
+<body>
+    <div id="app">
+      <ul>
+          <button @click="co">点击</button>
+      </ul>
+    </div>
+    
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+   <script>
+       var app = new Vue({
+           el:"#app",
+           data:{
+               items:{
+                   age:18,
+                   name:'Vue.js',
+                   class:'编程19班',
+                   schoolo:'中国国防大学'
+               },
+               obj:[
+                   '中国国防大学','兰州大学','武汉大学','中国医科大学'
+                ]  
+           },
+           methods:{
+               sp:function(){
+                   this.obj.splice(2,1,"西南师范")
+                   console.log(this.obj);
+               },
+               so:function(){
+                   console.log(this.obj);
+                   this.obj.sort()
+                   console.log(this.obj);
+               },
+               co:function(){
+                   var con = this.obj.concat('java','Vue.js','node.js')
+                   console.log(con);
+               }
+           }
+       })
+   </script>
+
+</body>
+```
+![](./img/2021-06-03_Vueliebiao6.png)
+
+3. slice():截取字段。接受一个或两个参数，即要返回项的起始和结束位置。当只给slice()传递一个参数时，该方法返回从该参数指定位置开始到当前数组末尾的所有项。如图一。
+![](./img/array-slice-2.png)
+
+```
+<body>
+    <div id="app">
+      <ul>
+          <button @click="sl">点击</button>
+      </ul>
+    </div>
+    
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+   <script>
+       var app = new Vue({
+           el:"#app",
+           data:{
+               items:{
+                   age:18,
+                   name:'Vue.js',
+                   class:'编程19班',
+                   schoolo:'中国国防大学'
+               },
+               obj:[
+                   '中国国防大学','兰州大学','武汉大学','中国医科大学'
+                ]  
+           },
+           methods:{
+               sp:function(){
+                   this.obj.splice(2,1,"西南师范")
+                   console.log(this.obj);
+               },
+               so:function(){
+                   console.log(this.obj);
+                   this.obj.sort()
+                   console.log(this.obj);
+               },
+               co:function(){
+                   var con = this.obj.concat('java','Vue.js','node.js')
+                   console.log(con);
+               },
+               sl:function(){
+                  var sli = this.obj.slice(2)
+                  console.log(sli);
+               }
+           }
+       })
+   </script>
+
+</body>
+```
+![](./img/2021-06-03_Vueliebiao7.png)
+* slice()还可以传两个参数，该方法返回起始和结束位置之间的项，但不包括结束位置的项，如：
+![](./img/array-slice-4.png)
+
+* slice()传递的参数还可以是负值。当参数中有一个负值时，则用数组长度加上该数来确定相应的位置。比如传递的值是-3，数组的length为6，此时slice(-3)对应的就是slice(3)。或者可以从数组的末尾开始计算起，最末尾的是-1。来看看示例：
+![](./img/array-slice-6.png)
+
+* 当然第二个参数也可以是负数，而且还可以正数和负数混合使用。但有一点需要特别注意：slice()传递的两个参数时，第一个参数和第二个参数位置相同或者第一个参数在第二个参数之后时，得到的新数组是一个空值（负值也是类似，但负值与数值长度之和再作对比）。简言之，结束位置小于或等于开始位置，将返回一个空数组。如下面的示例：
+![](./img/array-slice-7.png)
+
+
+### 在v-for里使用值可以接受整数
+
+
+### v-for 与 v-if 一同使用
+
+* 不推荐在同一元素上使用 V-of 和 V-for。当它们处于同一节点时，v-for的优先级比v-if的高，
+
+
+### 在组件上使用 v-for
+
+1. 在组件上使用 v-for 时，key 是必须的。
+
+2. 来看看具体的案例。
+```
+<body>
+    <div id="app">
+        <label for="">添加到收藏列表：</label>
+        <input type="text" v-model="newName"> <input type="button" value="添加" @click="addToSay">
+      <ul>
+          <li v-for="(item,index) in say">{{item.name}} <input type="button" @click="remove(index)" value="删除"></li> 
+      </ul>
+    </div>
+    
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+   <script>
+       var app = new Vue({
+           el:"#app",
+           data:{
+               newName:'',
+               say:[
+                   {
+                       id:1,
+                       name:'辜鸿铭演讲的“中国精神”'
+                    },
+                    {
+                        id:2,
+                       name:'李大钊的《甲寅》精神'
+                    },
+                    {
+                       id:3,
+                       name:'蔡元培北大整改史'
+                    },
+                    {
+                       id:4,
+                       name:'陈独秀的《新青年》文化运动'
+                    }
+               ]
+           },
+           methods:{
+               addToSay:function(){     // 添加的新东西
+                   let obj ={
+                       id:this.say.length+1,   //id 随长度逐步增加
+                       name:this.newName   
+                   }
+                   this.say.push(obj)     
+                  this.newName=''   // 添加完，输入框是空的
+               },
+               remove:function(index){     // 删除
+                   console.log(index);
+                   this.say.splice(index,1) 
+               }
+           }
+       })
+   </script>
+
+</body>
+```
+![](./img/2021-06-03_Vueliebiao8.png)
diff --git "a/\346\236\227\344\274\237\347\216\256/Vue-2021-06-04-\344\272\213\344\273\266\345\244\204\347\220\206.md" "b/\346\236\227\344\274\237\347\216\256/Vue-2021-06-04-\344\272\213\344\273\266\345\244\204\347\220\206.md"
new file mode 100644
index 0000000000000000000000000000000000000000..d4dbddea32bfdfeb091b48462fd16d83cfeb96ca
--- /dev/null
+++ "b/\346\236\227\344\274\237\347\216\256/Vue-2021-06-04-\344\272\213\344\273\266\345\244\204\347\220\206.md"
@@ -0,0 +1,127 @@
+## 事件处理
+
+
+### 监听事件
+1. v-on 是监听DOM事件
+```
+<body>
+    <div id="app">
+        <button @click="com += 1">add</button>
+        <p>输出结果：{{com}}次</p>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+    <script>
+      var app = new Vue({
+          el:'#app',
+          data:{
+              com:0
+          }
+      })
+    </script>
+
+</body>
+```
+![](./img/2021-06-04_Vueshijian.png)
+
+
+### 事件处理方法
+1. v-on 可以接收一个需要调用的方法名称
+```
+<body>
+    <div id="app">
+        <button @click="say">say</button>   //绑定的 say 方法
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+    <script>
+      var app = new Vue({
+          el:'#app',
+          data:{
+              Year:2021
+          },
+          methods:{
+              say:function(event){          // 这里的 this 指的是当前 Vue 实例
+                  console.log('hello'+ this.Year+'!');
+                  
+                  // event 是原生 DOM 事件
+                  if(event){
+                      console.log(event.target.tagYear);
+                  }
+              }
+          }
+      })
+    </script>
+
+</body>
+```
+![](./img/2021-06-04_Vueshijian2.png)
+
+### 内联处理器中的方法
+1. 我们也可以直接绑定到方法里面直接调用方法。这个方法超级简便！
+```
+<body>
+    <div id="app">
+        <button @click="say('hi hi')">say hi</button>
+        <button @click="say('hei hei')">say hei</button>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+    <script>
+      var app = new Vue({
+          el:'#app',
+          data:{
+              Year:2021
+          },
+          methods:{
+              say:function(event){
+                 console.log(event);
+              }
+          }
+      })
+    </script>
+
+</body>
+```
+![](./img/2021-06-04_Vueshijian3.png)
+
+2. 特殊变量 $event 传入方法，可以在内联语句处理器中访问原始 DOM 事件。
+```
+<body>
+    <div id="app">
+        <button @click="say('输出结果',$event)">点击</button>
+       
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+    <script>
+      var app = new Vue({
+          el:'#app',
+          data:{
+              Year:2021
+          },
+          methods:{
+              say:function(message,event){
+                console.log('hello'+this.Year+'!');
+                if(event){
+                    event.preventDefault()
+                }
+              console.log(message);
+
+              }
+          }
+      })
+    </script>
+
+</body>
+```
+![](./img/2021-06-04_Vueshijian4.png)
+
+
+### 事件修饰符
+1. .stop    : 阻止单击事件继续传播，阻止冒泡。
+2. .prevent ：提交事件不再重载页面，阻止默认事件。（对于元素拥有的自身默认事件时（如<a href=""></a>  <button type=""></button>),这种标签在被动或者自动触发事件时，会在执行完触发事件后，最后自动执行本身默认事件。但是！！默认事件在要在触发事件执行完以后执行，并不会因为stop修饰符而阻止。） 
+3. .capture ：添加事件侦听器时使用事件捕获模式。
+4. .self    ：只当事件在该元素本身时触发处理函数。
+5. .once    ：事件只触发一次。
+6. .passive ：告诉浏览器不会阻止默认事件。（举一个很简单的例子：当你的朋友要来你家，她提前和你说了，这时候你就有时间去收拾房间，买菜等。但是她要是没有和你说就来了，那你就来不久了，这就是passive的重要性，提前告诉浏览器的原因，提早告诉，提高性能）。
diff --git "a/\346\236\227\344\274\237\347\216\256/img/2021-06-01_VueClass2.png" "b/\346\236\227\344\274\237\347\216\256/img/2021-06-01_VueClass2.png"
new file mode 100644
index 0000000000000000000000000000000000000000..2d603f8b5a6fd9c3d517d66e0725f906e310d356
Binary files /dev/null and "b/\346\236\227\344\274\237\347\216\256/img/2021-06-01_VueClass2.png" differ
diff --git "a/\346\236\227\344\274\237\347\216\256/img/2021-06-01_Vueclass.png" "b/\346\236\227\344\274\237\347\216\256/img/2021-06-01_Vueclass.png"
new file mode 100644
index 0000000000000000000000000000000000000000..a68a0a1ce0dcf843b71c1c3ae3a43bcf7f5fb037
Binary files /dev/null and "b/\346\236\227\344\274\237\347\216\256/img/2021-06-01_Vueclass.png" differ
diff --git "a/\346\236\227\344\274\237\347\216\256/img/2021-06-01_Vueclass3.png" "b/\346\236\227\344\274\237\347\216\256/img/2021-06-01_Vueclass3.png"
new file mode 100644
index 0000000000000000000000000000000000000000..ea6e6b7237fd5372a845730ce3a95b475d99cbe2
Binary files /dev/null and "b/\346\236\227\344\274\237\347\216\256/img/2021-06-01_Vueclass3.png" differ
diff --git "a/\346\236\227\344\274\237\347\216\256/img/2021-06-01_Vueclass4.png" "b/\346\236\227\344\274\237\347\216\256/img/2021-06-01_Vueclass4.png"
new file mode 100644
index 0000000000000000000000000000000000000000..681ffe08e665149fe31a17d29da82ed742078a20
Binary files /dev/null and "b/\346\236\227\344\274\237\347\216\256/img/2021-06-01_Vueclass4.png" differ
diff --git "a/\346\236\227\344\274\237\347\216\256/img/2021-06-02_Vueliebiao.png" "b/\346\236\227\344\274\237\347\216\256/img/2021-06-02_Vueliebiao.png"
new file mode 100644
index 0000000000000000000000000000000000000000..1fce55260f3efc5b5a9ade7f1be6c4dfcf3f6b04
Binary files /dev/null and "b/\346\236\227\344\274\237\347\216\256/img/2021-06-02_Vueliebiao.png" differ
diff --git "a/\346\236\227\344\274\237\347\216\256/img/2021-06-02_Vueliebiao2.png" "b/\346\236\227\344\274\237\347\216\256/img/2021-06-02_Vueliebiao2.png"
new file mode 100644
index 0000000000000000000000000000000000000000..4c72979263b8ec70dc71fb94237b543dbba89278
Binary files /dev/null and "b/\346\236\227\344\274\237\347\216\256/img/2021-06-02_Vueliebiao2.png" differ
diff --git "a/\346\236\227\344\274\237\347\216\256/img/2021-06-02_Vueliebiao3.png" "b/\346\236\227\344\274\237\347\216\256/img/2021-06-02_Vueliebiao3.png"
new file mode 100644
index 0000000000000000000000000000000000000000..61f0694466111dbe85b3e7fb5fcb7df2c0778e37
Binary files /dev/null and "b/\346\236\227\344\274\237\347\216\256/img/2021-06-02_Vueliebiao3.png" differ
diff --git "a/\346\236\227\344\274\237\347\216\256/img/2021-06-02_Vueliebiao4.png" "b/\346\236\227\344\274\237\347\216\256/img/2021-06-02_Vueliebiao4.png"
new file mode 100644
index 0000000000000000000000000000000000000000..e8a6045bc263b07a50af921c85a9a5a4728e249c
Binary files /dev/null and "b/\346\236\227\344\274\237\347\216\256/img/2021-06-02_Vueliebiao4.png" differ
diff --git "a/\346\236\227\344\274\237\347\216\256/img/2021-06-02_Vueliebiao5.png" "b/\346\236\227\344\274\237\347\216\256/img/2021-06-02_Vueliebiao5.png"
new file mode 100644
index 0000000000000000000000000000000000000000..f7151a49175319ed1b1b462f3c7ffbeff3b5847a
Binary files /dev/null and "b/\346\236\227\344\274\237\347\216\256/img/2021-06-02_Vueliebiao5.png" differ
diff --git "a/\346\236\227\344\274\237\347\216\256/img/2021-06-03_Vueliebiao6.png" "b/\346\236\227\344\274\237\347\216\256/img/2021-06-03_Vueliebiao6.png"
new file mode 100644
index 0000000000000000000000000000000000000000..2d4a7685be01331c68872c58c6efc3ae45b8478a
Binary files /dev/null and "b/\346\236\227\344\274\237\347\216\256/img/2021-06-03_Vueliebiao6.png" differ
diff --git "a/\346\236\227\344\274\237\347\216\256/img/2021-06-03_Vueliebiao7.png" "b/\346\236\227\344\274\237\347\216\256/img/2021-06-03_Vueliebiao7.png"
new file mode 100644
index 0000000000000000000000000000000000000000..fdf0a04c9c400a2ce3bb87cb6bcaba5d6c280e3f
Binary files /dev/null and "b/\346\236\227\344\274\237\347\216\256/img/2021-06-03_Vueliebiao7.png" differ
diff --git "a/\346\236\227\344\274\237\347\216\256/img/2021-06-03_Vueliebiao8.png" "b/\346\236\227\344\274\237\347\216\256/img/2021-06-03_Vueliebiao8.png"
new file mode 100644
index 0000000000000000000000000000000000000000..ad962d3d4df7f5de2413f9a8faa63f734a4af1a9
Binary files /dev/null and "b/\346\236\227\344\274\237\347\216\256/img/2021-06-03_Vueliebiao8.png" differ
diff --git "a/\346\236\227\344\274\237\347\216\256/img/2021-06-04_Vueshijian.png" "b/\346\236\227\344\274\237\347\216\256/img/2021-06-04_Vueshijian.png"
new file mode 100644
index 0000000000000000000000000000000000000000..c81ebb55ddd7235a202fe29388d9a48d72c9c979
Binary files /dev/null and "b/\346\236\227\344\274\237\347\216\256/img/2021-06-04_Vueshijian.png" differ
diff --git "a/\346\236\227\344\274\237\347\216\256/img/2021-06-04_Vueshijian2.png" "b/\346\236\227\344\274\237\347\216\256/img/2021-06-04_Vueshijian2.png"
new file mode 100644
index 0000000000000000000000000000000000000000..483af2ff7be1f75c2717ec296bf5f7dcecfd5569
Binary files /dev/null and "b/\346\236\227\344\274\237\347\216\256/img/2021-06-04_Vueshijian2.png" differ
diff --git "a/\346\236\227\344\274\237\347\216\256/img/2021-06-04_Vueshijian3.png" "b/\346\236\227\344\274\237\347\216\256/img/2021-06-04_Vueshijian3.png"
new file mode 100644
index 0000000000000000000000000000000000000000..18f3bf908c80f6be78c356610f6c3c4b63296d59
Binary files /dev/null and "b/\346\236\227\344\274\237\347\216\256/img/2021-06-04_Vueshijian3.png" differ
diff --git "a/\346\236\227\344\274\237\347\216\256/img/2021-06-04_Vueshijian4.png" "b/\346\236\227\344\274\237\347\216\256/img/2021-06-04_Vueshijian4.png"
new file mode 100644
index 0000000000000000000000000000000000000000..8c984ccfa999ff8d6e832b240768aee3a43a726a
Binary files /dev/null and "b/\346\236\227\344\274\237\347\216\256/img/2021-06-04_Vueshijian4.png" differ
diff --git "a/\346\236\227\344\274\237\347\216\256/img/array-slice-2.png" "b/\346\236\227\344\274\237\347\216\256/img/array-slice-2.png"
new file mode 100644
index 0000000000000000000000000000000000000000..5ec267c84468a51f40f77cff3cc138374fab28be
Binary files /dev/null and "b/\346\236\227\344\274\237\347\216\256/img/array-slice-2.png" differ
diff --git "a/\346\236\227\344\274\237\347\216\256/img/array-slice-4.png" "b/\346\236\227\344\274\237\347\216\256/img/array-slice-4.png"
new file mode 100644
index 0000000000000000000000000000000000000000..024745125445669dccbe94517dc4b1f3a44477d5
Binary files /dev/null and "b/\346\236\227\344\274\237\347\216\256/img/array-slice-4.png" differ
diff --git "a/\346\236\227\344\274\237\347\216\256/img/array-slice-6.png" "b/\346\236\227\344\274\237\347\216\256/img/array-slice-6.png"
new file mode 100644
index 0000000000000000000000000000000000000000..7193b4d79fc2ca0142c83f90e9474d25af0f7a9f
Binary files /dev/null and "b/\346\236\227\344\274\237\347\216\256/img/array-slice-6.png" differ
diff --git "a/\346\236\227\344\274\237\347\216\256/img/array-slice-7.png" "b/\346\236\227\344\274\237\347\216\256/img/array-slice-7.png"
new file mode 100644
index 0000000000000000000000000000000000000000..f1e72e6b4eecf9ad21f2744b6dff482876b1e037
Binary files /dev/null and "b/\346\236\227\344\274\237\347\216\256/img/array-slice-7.png" differ