diff --git "a/\350\226\233\346\231\250\350\276\276/2021-06-01.md" "b/\350\226\233\346\231\250\350\276\276/2021-06-01.md"
new file mode 100644
index 0000000000000000000000000000000000000000..84d8b415e9e205104aa95881ccea74b9d88dfef2
--- /dev/null
+++ "b/\350\226\233\346\231\250\350\276\276/2021-06-01.md"
@@ -0,0 +1,80 @@
+# class与style的绑定
+```
+    <div id="app">
+        <p v-bind:class="active" v-bind:style='style'>class的动态切换与style的绑定</p>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+
+    <script>
+        var app = new Vue({
+            el: '#app',
+            data: {
+                active: {
+                    isActive: true,
+                },
+                style: {
+                    fontSize: '50px',
+                    color: 'red'
+                }
+            },
+        });
+    </script>
+```
+![image](images/2021-06-01/1.png)
+![image](images/2021-06-01/2.png)
+
+## class与style的数组语法
+```
+    <div id="app">
+        <p v-bind:class="[activeClass,errorClass]">class数组语法</p>
+        <p v-bind:style="[fontStyles, colorStyles]">style数组语法</p>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+
+    <script>
+        var app = new Vue({
+            el: '#app',
+            data: {
+                activeClass: 'actice',
+                errorClass: 'text-danger',
+                fontStyles: {
+                    fontSize: '50px'
+                },
+                colorStyles: {
+                    color: 'red'
+                }
+            }
+        });
+    </script>
+```
+![image](images/2021-06-01/3.png)
+![image](images/2021-06-01/4.png)
+
+# 条件渲染
+## v-if
+```
+    <div id="app">
+        <h1 v-if="awesome">Vue is awesome!</h1>
+        <h1 v-else>Oh no 😢</h1>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+
+    <script>
+        var app = new Vue({
+            el: '#app',
+            data: {
+                awesome: true
+            },
+        });
+    </script>
+```
+![image](images/2021-06-01/5.png)
+
+在控制台输入 app.awesome=false 显示v-if的else块
+![image](images/2021-06-01/6.png)
+![image](images/2021-06-01/7.png)  
+
+v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
diff --git "a/\350\226\233\346\231\250\350\276\276/2021-06-02.md" "b/\350\226\233\346\231\250\350\276\276/2021-06-02.md"
new file mode 100644
index 0000000000000000000000000000000000000000..17aca46239b12bfb5c77148a3bcd58f373af2c55
--- /dev/null
+++ "b/\350\226\233\346\231\250\350\276\276/2021-06-02.md"
@@ -0,0 +1,54 @@
+# 列表渲染
+##  v-for 把一个数组对应为一组元素
+用v-for渲染列表，并添加可选的第二个参数访问当前项的索引
+```
+    <ul id="app">
+        <li v-for="(fruit,index) in fruits">
+            {{fruit.name}} - {{index}}
+        </li>
+    </ul>
+
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+
+    <script>
+        var app = new Vue({
+            el: '#app',
+            data: {
+                fruits: [
+                    { name: '香蕉' },
+                    { name: '橘子' },
+                    { name: '苹果' }
+                ]
+            },
+        });
+    </script>
+```
+![image](images/2021-06-02/1.png)
+
+## 在v-for里使用对象
+用 v-for 来遍历一个对象的键名、值、索引
+```
+    <div id="app">
+        <ul v-for-user>
+            <li v-for="(value,name,index) in user">
+                {{index+1}}.{{name}}:{{value}}
+            </li>
+        </ul>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+
+    <script>
+        var app = new Vue({
+            el: '#app',
+            data: {
+                user: {
+                    name: '小明',
+                    age: '18',
+                    sex: '男'
+                }
+            },
+        });
+    </script>
+```
+![image](images/2021-06-02/2.png)
\ No newline at end of file
diff --git "a/\350\226\233\346\231\250\350\276\276/2021-06-04.md" "b/\350\226\233\346\231\250\350\276\276/2021-06-04.md"
new file mode 100644
index 0000000000000000000000000000000000000000..bf26b15d004450dbd1a91ba8debeec4068cf78c0
--- /dev/null
+++ "b/\350\226\233\346\231\250\350\276\276/2021-06-04.md"
@@ -0,0 +1,44 @@
+# 事件处理
+## 监听事件
+```
+    <div id="app">
+        <button v-on:click="counter += 1">Add 1</button>
+        <p>The button above has been clicked {{ counter }} times.</p>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+
+    <script>
+        var app = new Vue({
+            el: '#app',
+            data: {
+                counter: 0
+            }
+        });
+    </script>
+```
+![image](images/2021-06-04/1.png)
+
+## 事件处理方法、内联处理器中的方法
+```
+    <div id="app">
+        <button v-on:click="play">娱乐</button>
+        <button v-on:click="study('写作业')">学习</button>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+
+    <script>
+        var app = new Vue({
+            el: '#app',
+            methods: {
+                play: function () {
+                    alert("打游戏");
+                },
+                study: function (message) {
+                    alert(message)
+                }
+            }
+        });
+    </script>
+```
\ No newline at end of file
diff --git "a/\350\226\233\346\231\250\350\276\276/2021-06-05.md" "b/\350\226\233\346\231\250\350\276\276/2021-06-05.md"
new file mode 100644
index 0000000000000000000000000000000000000000..5ed9271d5fb3394ea8d2c034fa37dfc088decc8b
--- /dev/null
+++ "b/\350\226\233\346\231\250\350\276\276/2021-06-05.md"
@@ -0,0 +1,167 @@
+# 表单输入绑定
+## 基础用法
+### 文本
+```
+    <div id="app">
+        <input v-model="number" placeholder="请输入领奖号码">
+        <p>请确认您输入的领奖号码: {{ number }} </p>
+        <button>确定</button>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+
+    <script>
+        var app = new Vue({
+            el: "#app",
+            data: {
+                number: ''
+            }
+        })
+    </script>
+```
+![image](images/2021-06-05/1.png)
+
+
+### 多行文本
+```
+    <div id="app">
+        <textarea v-model="number" placeholder="随便输几个数吧"></textarea>
+        <p>你输入的数是：</p>
+        <p style="white-space: pre-line;">{{ number }} </p>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+
+    <script>
+        var app = new Vue({
+            el: "#app",
+            data: {
+                number: ''
+            }
+        })
+    </script>
+```
+![image](images/2021-06-05/2.png)
+
+### 复选框
+单个复选框，绑定到布尔值：
+```
+    <div id="app">
+        <input type="checkbox" id="checkbox" v-model="checked">
+        <label for="checkbox">{{ checked }}</label>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+
+    <script>
+        var app = new Vue({
+            el: "#app",
+            data: {
+                checked: false
+            }
+        })
+    </script>
+```
+![image](images/2021-06-05/3.png)
+
+多个复选框，绑定到同一个数组：
+```
+    <div id="app">
+        <input type="checkbox" id="001" value="牛奶" v-model="foodName">
+        <label for="001">牛奶</label>
+        <input type="checkbox" id="002" value="鸡蛋" v-model="foodName">
+        <label for="002">鸡蛋</label>
+        <input type="checkbox" id="003" value="面包" v-model="foodName">
+        <label for="003">面包</label>
+        <br>
+        <span>早餐吃: {{ foodName }}</span>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+
+    <script>
+        var app = new Vue({
+            el: "#app",
+            data: {
+                foodName: []
+            }
+        })
+    </script>
+```
+![image](images/2021-06-05/4.png)
+
+### 单选按钮
+```
+    <div id="app">
+        <input type="radio" id="001" value="牛奶" v-model="foodName">
+        <label for="001">牛奶</label>
+        <input type="radio" id="002" value="鸡蛋" v-model="foodName">
+        <label for="002">鸡蛋</label>
+        <input type="radio" id="003" value="面包" v-model="foodName">
+        <label for="003">面包</label>
+        <br>
+        <span>早餐吃: {{ foodName }}</span>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+
+    <script>
+        var app = new Vue({
+            el: "#app",
+            data: {
+                foodName: []
+            }
+        })
+    </script>
+```
+![image](images/2021-06-05/5.png)
+
+### 选择框
+单选时：
+```
+    <div id="app">
+        <select v-model="selected">
+            <option disabled value="">请选择</option>
+            <option>写作业</option>
+            <option>看电影</option>
+            <option>玩游戏</option>
+        </select>
+        <span>你选择了: {{ selected }}</span>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+
+    <script>
+        var app = new Vue({
+            el: "#app",
+            data: {
+                selected: ''
+            }
+        })
+    </script>
+```
+![image](images/2021-06-05/6.png)
+
+多选时 (绑定到一个数组)：
+```
+    <div id="app">
+        <select v-model="selected" multiple style="width: 80px;">
+            <option>写作业</option>
+            <option>看电影</option>
+            <option>玩游戏</option>
+        </select>
+        <span>你选择了: {{ selected }}</span>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+
+    <script>
+        var app = new Vue({
+            el: "#app",
+            data: {
+                selected: ''
+            }
+        })
+    </script>
+```
+![image](images/2021-06-05/7.png)
\ No newline at end of file
diff --git "a/\350\226\233\346\231\250\350\276\276/images/2021-06-01/1.png" "b/\350\226\233\346\231\250\350\276\276/images/2021-06-01/1.png"
new file mode 100644
index 0000000000000000000000000000000000000000..de02f1c9bf5ee83264d649e53577ddeb5ddd2220
Binary files /dev/null and "b/\350\226\233\346\231\250\350\276\276/images/2021-06-01/1.png" differ
diff --git "a/\350\226\233\346\231\250\350\276\276/images/2021-06-01/2.png" "b/\350\226\233\346\231\250\350\276\276/images/2021-06-01/2.png"
new file mode 100644
index 0000000000000000000000000000000000000000..89284c90a6e1a772bd388e1e2e625b6cbb4cf90c
Binary files /dev/null and "b/\350\226\233\346\231\250\350\276\276/images/2021-06-01/2.png" differ
diff --git "a/\350\226\233\346\231\250\350\276\276/images/2021-06-01/3.png" "b/\350\226\233\346\231\250\350\276\276/images/2021-06-01/3.png"
new file mode 100644
index 0000000000000000000000000000000000000000..fd89b51c18646a25626389c125fb16f68f55e7db
Binary files /dev/null and "b/\350\226\233\346\231\250\350\276\276/images/2021-06-01/3.png" differ
diff --git "a/\350\226\233\346\231\250\350\276\276/images/2021-06-01/4.png" "b/\350\226\233\346\231\250\350\276\276/images/2021-06-01/4.png"
new file mode 100644
index 0000000000000000000000000000000000000000..05e1c51f633e6b11245d9e3bd845528e51e1354e
Binary files /dev/null and "b/\350\226\233\346\231\250\350\276\276/images/2021-06-01/4.png" differ
diff --git "a/\350\226\233\346\231\250\350\276\276/images/2021-06-01/5.png" "b/\350\226\233\346\231\250\350\276\276/images/2021-06-01/5.png"
new file mode 100644
index 0000000000000000000000000000000000000000..00ee7889e9ea881e596bb42e46d7cd18483247b9
Binary files /dev/null and "b/\350\226\233\346\231\250\350\276\276/images/2021-06-01/5.png" differ
diff --git "a/\350\226\233\346\231\250\350\276\276/images/2021-06-01/6.png" "b/\350\226\233\346\231\250\350\276\276/images/2021-06-01/6.png"
new file mode 100644
index 0000000000000000000000000000000000000000..cddf968f9da6fad8cee2e5721e9829459d31c4bd
Binary files /dev/null and "b/\350\226\233\346\231\250\350\276\276/images/2021-06-01/6.png" differ
diff --git "a/\350\226\233\346\231\250\350\276\276/images/2021-06-01/7.png" "b/\350\226\233\346\231\250\350\276\276/images/2021-06-01/7.png"
new file mode 100644
index 0000000000000000000000000000000000000000..0da4a4b28510cf9e24dfb4642635d009375a8f4c
Binary files /dev/null and "b/\350\226\233\346\231\250\350\276\276/images/2021-06-01/7.png" differ
diff --git "a/\350\226\233\346\231\250\350\276\276/images/2021-06-02/1.png" "b/\350\226\233\346\231\250\350\276\276/images/2021-06-02/1.png"
new file mode 100644
index 0000000000000000000000000000000000000000..63ab7bff310de0dd499f7fa9065845d56ff2dc8e
Binary files /dev/null and "b/\350\226\233\346\231\250\350\276\276/images/2021-06-02/1.png" differ
diff --git "a/\350\226\233\346\231\250\350\276\276/images/2021-06-02/2.png" "b/\350\226\233\346\231\250\350\276\276/images/2021-06-02/2.png"
new file mode 100644
index 0000000000000000000000000000000000000000..0c1e4eac6e16ccbc001333338ffc42623b807dfc
Binary files /dev/null and "b/\350\226\233\346\231\250\350\276\276/images/2021-06-02/2.png" differ
diff --git "a/\350\226\233\346\231\250\350\276\276/images/2021-06-04/1.png" "b/\350\226\233\346\231\250\350\276\276/images/2021-06-04/1.png"
new file mode 100644
index 0000000000000000000000000000000000000000..68bc4c426c9235224e083c94c649e6affac88ef8
Binary files /dev/null and "b/\350\226\233\346\231\250\350\276\276/images/2021-06-04/1.png" differ
diff --git "a/\350\226\233\346\231\250\350\276\276/images/2021-06-05/1.png" "b/\350\226\233\346\231\250\350\276\276/images/2021-06-05/1.png"
new file mode 100644
index 0000000000000000000000000000000000000000..70098581dbf80d4110cd85e56cfa610510e57ce3
Binary files /dev/null and "b/\350\226\233\346\231\250\350\276\276/images/2021-06-05/1.png" differ
diff --git "a/\350\226\233\346\231\250\350\276\276/images/2021-06-05/2.png" "b/\350\226\233\346\231\250\350\276\276/images/2021-06-05/2.png"
new file mode 100644
index 0000000000000000000000000000000000000000..57772084bf284136d89e6495eff1f8379422bf39
Binary files /dev/null and "b/\350\226\233\346\231\250\350\276\276/images/2021-06-05/2.png" differ
diff --git "a/\350\226\233\346\231\250\350\276\276/images/2021-06-05/3.png" "b/\350\226\233\346\231\250\350\276\276/images/2021-06-05/3.png"
new file mode 100644
index 0000000000000000000000000000000000000000..076e188c655a71c7bb599621e329316c7207c307
Binary files /dev/null and "b/\350\226\233\346\231\250\350\276\276/images/2021-06-05/3.png" differ
diff --git "a/\350\226\233\346\231\250\350\276\276/images/2021-06-05/4.png" "b/\350\226\233\346\231\250\350\276\276/images/2021-06-05/4.png"
new file mode 100644
index 0000000000000000000000000000000000000000..f027e17cdaac58ae59cbc87b64b030b838795295
Binary files /dev/null and "b/\350\226\233\346\231\250\350\276\276/images/2021-06-05/4.png" differ
diff --git "a/\350\226\233\346\231\250\350\276\276/images/2021-06-05/5.png" "b/\350\226\233\346\231\250\350\276\276/images/2021-06-05/5.png"
new file mode 100644
index 0000000000000000000000000000000000000000..b13bb846ba3bcbcceee0e934c50e1bef529524f4
Binary files /dev/null and "b/\350\226\233\346\231\250\350\276\276/images/2021-06-05/5.png" differ
diff --git "a/\350\226\233\346\231\250\350\276\276/images/2021-06-05/6.png" "b/\350\226\233\346\231\250\350\276\276/images/2021-06-05/6.png"
new file mode 100644
index 0000000000000000000000000000000000000000..4c34a5f8af0a46b52c2510c5851ed2e930bac5ea
Binary files /dev/null and "b/\350\226\233\346\231\250\350\276\276/images/2021-06-05/6.png" differ
diff --git "a/\350\226\233\346\231\250\350\276\276/images/2021-06-05/7.png" "b/\350\226\233\346\231\250\350\276\276/images/2021-06-05/7.png"
new file mode 100644
index 0000000000000000000000000000000000000000..141684cd327f75fa096a98bbd5e295af9e0ee76a
Binary files /dev/null and "b/\350\226\233\346\231\250\350\276\276/images/2021-06-05/7.png" differ