diff --git "a/\351\273\204\346\231\250\347\203\250/2021.05.25(Vue\345\256\211\350\243\205\343\200\201\345\243\260\346\230\216\345\274\217\346\270\262\346\237\223\343\200\201\347\273\221\345\256\232).md" "b/\351\273\204\346\231\250\347\203\250/2021.05.25(Vue\345\256\211\350\243\205\343\200\201\345\243\260\346\230\216\345\274\217\346\270\262\346\237\223\343\200\201\347\273\221\345\256\232).md"
new file mode 100644
index 0000000000000000000000000000000000000000..e81d45fe7ff8eb53c782ea03510a8a3833a7786b
--- /dev/null
+++ "b/\351\273\204\346\231\250\347\203\250/2021.05.25(Vue\345\256\211\350\243\205\343\200\201\345\243\260\346\230\216\345\274\217\346\270\262\346\237\223\343\200\201\347\273\221\345\256\232).md"
@@ -0,0 +1,28 @@
+## 1.Vue是什么
++ 渐进式框架，设计行为：自底向上逐层应用
++ 安装Vue：选择开发环境版本
+```
+<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+```
+## 2.声明式渲染
+ ![](/imgs/drawing.png)
+
+## 3.动态绑定的提示信息(v-bind)
+```
+ <div id="app">
+    <span v-bind:title="messages">鼠标悬停几秒钟查看此处动态绑定的提示信息</span>
+   </div>
+  
+
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+    <script>
+       var app=new Vue({
+       el:'#app',
+       data:{
+
+           messages:'页面加载'+ new Date().toLocaleString()
+       }
+
+       })
+    </script>
+```
diff --git "a/\351\273\204\346\231\250\347\203\250/2021.05.26(\346\235\241\344\273\266\344\270\216\345\276\252\347\216\257\343\200\201\345\244\204\347\220\206\347\224\250\346\210\267\350\276\223\345\205\245\343\200\201\347\273\204\344\273\266\345\214\226\345\272\224\347\224\250\346\236\204\345\273\272).md" "b/\351\273\204\346\231\250\347\203\250/2021.05.26(\346\235\241\344\273\266\344\270\216\345\276\252\347\216\257\343\200\201\345\244\204\347\220\206\347\224\250\346\210\267\350\276\223\345\205\245\343\200\201\347\273\204\344\273\266\345\214\226\345\272\224\347\224\250\346\236\204\345\273\272).md"
new file mode 100644
index 0000000000000000000000000000000000000000..2913b6e0f1bd7923f540c0c2bb33426220123ebd
--- /dev/null
+++ "b/\351\273\204\346\231\250\347\203\250/2021.05.26(\346\235\241\344\273\266\344\270\216\345\276\252\347\216\257\343\200\201\345\244\204\347\220\206\347\224\250\346\210\267\350\276\223\345\205\245\343\200\201\347\273\204\344\273\266\345\214\226\345\272\224\347\224\250\346\236\204\345\273\272).md"
@@ -0,0 +1,138 @@
+## 1.条件(v-if/v-else)
+```
+ <div id="app">
+      <div v-if="beautiful">
+       哇！是个很好看的girl
+      </div>
+      <div v-else="ugly">
+      额，是顶个大大黑色框的眼镜妹
+      </div>
+   </div>
+  
+
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+    <script>
+       var app=new Vue({
+       el:'#app',
+       data:{
+
+           beautiful:true,
+           ugly:true
+       }
+
+       })
+    </script>
+```
+## 2.循环(v-for)
+```
+
+    <div id="app">
+        <ol>
+        <li v-for="todo in todos">
+            {{todo.text}}
+        </li>
+        </ol>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+    <script>
+        let app = new Vue({
+
+            el: '#app',
+            data() {
+                return {
+                    todos: [
+
+                        { text: '起床' },
+                        { text: '吃饭' },
+                        { text: '睡觉' },
+                        { text: '打豆豆' }
+                    
+                    ]
+
+                }
+            }
+        })
+    </script>
+```
+
+## 3.处理用户输入(v-model)
+```
+  <div id="app">
+        <form>
+            <tr>
+                <td>
+                    <label for="">用户名</label>
+                </td>
+                <td>
+                    <input type="text" v-model="username">
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    <label for="">密码：</label>
+                </td>
+                <td>
+                    <input type="password" v-model="password">
+                </td>
+            </tr>
+        </form>
+        <label>{{str}}</label>
+    </div>
+
+
+
+
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+    <script>
+        var app = new Vue({
+            el: '#app',
+            data: {
+                username: '',
+                password: ''
+            },
+            computed: {
+                str: function () {
+
+                    return `账号：${this.username}  密码:${this.password}`
+                }
+            }
+        })
+
+
+
+    </script>
+```
+## 4.组件化应用构建(component)
+```
+ <div id="app">
+        <ol>
+      <items v-for="item in todos" v-bind:x='item'></items>
+         
+        </li>
+        </ol>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+    <script>
+        Vue.component('items',{
+            props:['x'],
+            template:'<li>{{x.text}}</li>'
+        })
+        let app = new Vue({
+
+            el: '#app',
+            data() {
+                return {
+                    todos: [
+
+                        { text: '起床' },
+                        { text: '吃饭' },
+                        { text: '睡觉' },
+                        { text: '打豆豆' }
+                    
+                    ]
+
+                }
+            }
+        })
+    </script>
+```
\ No newline at end of file
diff --git "a/\351\273\204\346\231\250\347\203\250/imgs/drawing.png" "b/\351\273\204\346\231\250\347\203\250/imgs/drawing.png"
new file mode 100644
index 0000000000000000000000000000000000000000..7575f8a6b67c6af1ddd2f83189dc00077920ed19
Binary files /dev/null and "b/\351\273\204\346\231\250\347\203\250/imgs/drawing.png" differ