diff --git "a/\351\273\204\345\230\211\351\222\260/2021-5-25\347\254\254\344\270\200\350\257\276.md" "b/\351\273\204\345\230\211\351\222\260/2021-5-25\347\254\254\344\270\200\350\257\276.md"
new file mode 100644
index 0000000000000000000000000000000000000000..3bc17b80a2bad3368454bc6986e48622bcb5ff22
--- /dev/null
+++ "b/\351\273\204\345\230\211\351\222\260/2021-5-25\347\254\254\344\270\200\350\257\276.md"
@@ -0,0 +1,47 @@
+## Vue.js
+
+Vue是渐进式框架，使用MVVM模式(Model View ViewModel)
+
+三大框架：Vue react angular2
+
+Vue的三个特点： 双向绑定 组件化 单文件组件
+
++ 第一个Vue应用
+```
+<body>
+    <div id="app">
+        {{msg}}
+    </div>
+
+
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+    <script>
+        new Vue({
+            el:'#app',
+            data(){
+               return {msg:'hhhhh'}
+            }
+        })
+    </script>
+</body>
+```
+
++ 使用v-bind指令
+```
+    <div id="app">
+        <span v-bind:title="msg">
+            Nihao
+        </span>
+    </div>
+
+
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+    <script>
+        new Vue({
+            el:'#app',
+            data(){
+               return {msg:'hhhhh'}
+            }
+        })
+    </script>
+```
diff --git "a/\351\273\204\345\230\211\351\222\260/img/\346\235\241\344\273\266\344\270\216\345\276\252\347\216\257\351\202\243\344\270\200\350\257\276\347\232\204/1.png" "b/\351\273\204\345\230\211\351\222\260/img/\346\235\241\344\273\266\344\270\216\345\276\252\347\216\257\351\202\243\344\270\200\350\257\276\347\232\204/1.png"
new file mode 100644
index 0000000000000000000000000000000000000000..5797f1d44636af813c4dfb5b5231bf1868eac054
Binary files /dev/null and "b/\351\273\204\345\230\211\351\222\260/img/\346\235\241\344\273\266\344\270\216\345\276\252\347\216\257\351\202\243\344\270\200\350\257\276\347\232\204/1.png" differ
diff --git "a/\351\273\204\345\230\211\351\222\260/img/\346\235\241\344\273\266\344\270\216\345\276\252\347\216\257\351\202\243\344\270\200\350\257\276\347\232\204/2.png" "b/\351\273\204\345\230\211\351\222\260/img/\346\235\241\344\273\266\344\270\216\345\276\252\347\216\257\351\202\243\344\270\200\350\257\276\347\232\204/2.png"
new file mode 100644
index 0000000000000000000000000000000000000000..1670c93dd1420ad51128f83ee6756e21113e971c
Binary files /dev/null and "b/\351\273\204\345\230\211\351\222\260/img/\346\235\241\344\273\266\344\270\216\345\276\252\347\216\257\351\202\243\344\270\200\350\257\276\347\232\204/2.png" differ
diff --git "a/\351\273\204\345\230\211\351\222\260/\346\235\241\344\273\266\345\276\252\347\216\257\357\274\214\345\244\204\347\220\206\347\224\250\346\210\267\350\276\223\345\205\245\357\274\214\347\273\204\344\273\266\345\214\226.md" "b/\351\273\204\345\230\211\351\222\260/\346\235\241\344\273\266\345\276\252\347\216\257\357\274\214\345\244\204\347\220\206\347\224\250\346\210\267\350\276\223\345\205\245\357\274\214\347\273\204\344\273\266\345\214\226.md"
new file mode 100644
index 0000000000000000000000000000000000000000..f4e71b2ce7e9245de063d9352d8b0e3ffb2cdda3
--- /dev/null
+++ "b/\351\273\204\345\230\211\351\222\260/\346\235\241\344\273\266\345\276\252\347\216\257\357\274\214\345\244\204\347\220\206\347\224\250\346\210\267\350\276\223\345\205\245\357\274\214\347\273\204\344\273\266\345\214\226.md"
@@ -0,0 +1,124 @@
+## 2021-5-26 
+
+### 条件与循环
+
++ v-if
+
+在控制台输入app.haha = false时,“nihao”消失
+```
+    <div id="app">
+        <span v-if="haha">
+             nihao
+        </span>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+    <script>
+        let app = new Vue({
+            el:'#app',
+            data(){
+                return {
+                    haha:true
+                }
+            }
+        })
+    </script>
+```
+
++ v-for
+
+item 不需要定义
+
+在控制台输入app.list.push({content:"hoshi"})，可添加新项
+```
+    <div id="app">
+        <span v-if="haha">
+             nihao
+        </span>
+        <ol>
+            <li v-for="item in list">
+                {{item.content}}
+            </li>
+        </ol>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+    <script>
+        let app = new Vue({
+            el:'#app',
+            data(){
+                return {
+                    haha:true,
+                    list:[
+                        {content:"scoups"},
+                        {content:"woozi"},
+                        {content:"joshua"},
+                        {content:"jun"}
+                    ]
+                }
+            }
+        })
+    </script>
+```
+
++ 处理用户输入
+
+```
+ <div id="app">
+        <form>
+            用户名：<input type="text" v-model="formData.username">
+        </form>
+        <label for="">{{formData.username}}</label>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+    <script>
+        let app = new Vue({
+            el:'#app',
+            data(){
+                return {
+                    haha:true,
+                    formData:{
+                        username:""
+                    }
+                }
+            }
+        })
+    </script>
+```
+![](./img/条件与循环那一课的/1.png)
+
++ 组件化应用构建
+
+![](./img/条件与循环那一课的/2.png)
+
+一个布局为一个组件，一个布局内的几个部分就是几个组件
+
+```
+<div id="app">
+        <ol>
+            <form-input v-for="item in formData" v-bind:list="item" v-bind:key = "item.username"></form-input>
+        </ol>
+
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+    <script>
+        Vue.component("form-input",{
+            props:['list'],
+            template:'<li>{{list.username}}</li>'
+        })
+        let app = new Vue({
+            el:'#app',
+            data(){
+                return {
+                    haha:true,
+                    formData:[
+                        {username:"scoups"},
+                        {username:"woozi"},
+                        {username:"jun"},
+                        {username:"joshua"}
+                    ]
+                }
+            }
+        })
+    </script>
+```
