diff --git "a/\351\237\251\345\235\244/2021-5-25(Vue).md" "b/\351\237\251\345\235\244/2021-5-25(Vue).md"
new file mode 100644
index 0000000000000000000000000000000000000000..8c179f116b240ded77339593d6599e00a13dbd15
--- /dev/null
+++ "b/\351\237\251\345\235\244/2021-5-25(Vue).md"
@@ -0,0 +1,77 @@
+# Vue.js
+
++ Vue是一套用于构建用户界面的渐进式框架
++ Vue只关注视图层，采用自底向上增量开发的设计
++ 使用官网2.x教程
+
+## Vue.js安装
+百度Vue.js官网，安装开发版本；
+引入Vue:
+```
+//开发环境版本
+<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+
+```
+
+## 第一个Vue应用:
+`每个 Vue 应用都需要通过实例化 Vue 来实现。`
+```
+var vm = new Vue({
+  // 选项
+})
+```
+
+声明式渲染:
+```
+<div id="app">
+  {{ message }}
+</div>
+```
+```
+var app = new Vue({
+  el: '#app',
+  data: {
+    message: 'Hello Vue!'
+  }
+})
+```
+Hello Vue!
+el是DOM元素中的id，在div'app'中的改动，div外部不受影响
+
+### attribute元素
+```
+<div id="app2">
+        <span v-bind:title="message">
+            鼠标放置几秒，你会发现:
+        </span>
+
+    </div>
+```
+```
+var app2=new Vue({
+        el:'#app2',
+        data:{
+            message:'你浪费了几秒钟'
+        }
+    })
+```
+`v-bind` attribute被称为指令。指令带有前缀`v-`，以表示他们是Vue提供的特殊attribute。
+
+浏览器的JavaScript控制台，可以通过app2.message = '新消息'来直接修改
+
+### 条件与循环
+
+```
+<div id="app3">
+        <p v-if="seen">你看的到我？</p>
+    </div>
+```
+```
+var app3=new Vue({
+        el:'#app3',
+        data:{
+            seen:true
+        }
+    });
+```
+浏览器的JavaScript控制台，可以通过app3.seen=false/tur来显示消息/关闭消息
diff --git "a/\351\237\251\345\235\244/2021-5-26.md" "b/\351\237\251\345\235\244/2021-5-26.md"
new file mode 100644
index 0000000000000000000000000000000000000000..cde1014f6657d4b1d1014be0be1492757d4575f2
--- /dev/null
+++ "b/\351\237\251\345\235\244/2021-5-26.md"
@@ -0,0 +1,130 @@
+## 条件与循环
+
+`v-for`指令可以绑定数组的数据来渲染一个项目列表
+```
+<ol>
+   <li v-for="todo in todos">
+           {{todo.text}}
+   </li>
+</ol>
+```
+我们以前用for循环都是 var ietem in items，这里`不需要`var。有v-for的用法，也有v-if，v-else的用法
+```
+var app=new Vue({
+        el:'#app',
+        data(){
+            return {
+                todos:[
+                    {
+                        text:"青风小筑"
+                    },
+                    {
+                        text:"最幸福"
+                    },{
+                        text:'最快乐'
+                    }
+                ]
+            }
+        }
+    })
+```
+data可以用方法,也可以直接赋值
+
+在控制台里，输入`app4.todos.push({ text: '新项目' })`，可以在列表添加新项目
+
+## 处理用户输入
+
+`v-on`指令添加一个事件监听器，通过它可以调用Vue实例中的方法
+```
+<p>{{message}}</p>
+<button v-on:click="reverseMessage">
+            点一下试试
+</button>
+```
+```
+var app2=new Vue({
+    el:'#app2',
+    data:{
+        message:"因为我喜欢你"
+    },
+    methods:{
+        reverseMessage:function (){
+           return this.message="所以是你主动"
+        }
+    }
+})
+```
+`methods` 用于定义的函数，可以通过 return 来返回函数值。
+
+`vue-model`指令，能实现表单输入和应用状态的双向绑定
+```
+<div id="app2">
+        <p>message</p>
+        <form>
+            <table>
+                <tr>
+                    <td>
+                        <label for="">用户名:</label>
+                    </td>
+                    <td>
+                        <input type="text" v-model='formData.username'>
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <label for="">密码:</label>
+                    </td>
+                    <td>
+                        <input type="text" v-model='formData.password'>
+                    </td>
+                </tr>
+            </table>
+        </form>
+        <p><label for="">{{str}}</label></p>
+    </div>
+```
+```
+var app2=new Vue({
+        el:'#app2',
+        data:{
+            message:"立刻有",
+            formData:{
+                username:'清风小筑',
+                password:'12'
+            }
+        },
+        computed:{
+            str:function(){
+                return `最快乐:${this.formData.username},快乐密码:${this.formData.password}`
+            }
+        }
+    })
+```
+## 组件化应用构建
+
+### 组件基础
+新建一个Vue组件:
+```
+Vue.component('eazy-name',{
+        data:function(){
+            return {
+                count:0
+            }
+        },
+        template:`<button v-on:click="count++">昨夜梦里梦你{{count}}次</button>`
+
+    });
+```
++ 组件是可以重复使用的Vue的实例，且带有名字:这个例子中的名字是:`eazy-name`
+```
+<div id="component-Dome">
+    <eazy-name>
+
+     </eazy-name>
+</div>
+```
+```
+new Vue({el:'#component-Dome'})
+```
+
++ 可以在一个通过new Vue创建的Vue根实例中，把这个组件(`eazy-name`)当作自定义元素使用
diff --git "a/\351\237\251\345\235\244/index.html" "b/\351\237\251\345\235\244/index.html"
new file mode 100644
index 0000000000000000000000000000000000000000..e735be3d5983ef1a18845b1f3e0f8669168d4244
--- /dev/null
+++ "b/\351\237\251\345\235\244/index.html"
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <div id="component-Dome">
+        <eazy-name>
+
+        </eazy-name>
+    </div>
+</body>
+<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+<script>
+    Vue.component('eazy-name',{
+        data:function(){
+            return {
+                count:0
+            }
+        },
+        template:`<button v-on:click="count++">昨夜梦里梦你{{count}}次</button>`
+
+    });
+    new Vue({el:'#component-Dome'})
+</script>
+</html>
\ No newline at end of file