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"
index e81d45fe7ff8eb53c782ea03510a8a3833a7786b..12353713b55b459060fbea70dba02b741a026d3b 100644
--- "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"
@@ -5,7 +5,7 @@
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 ```
 ## 2.声明式渲染
- ![](/imgs/drawing.png)
+ ![](./imgs/drawing.png)
 
 ## 3.动态绑定的提示信息(v-bind)
 ```
diff --git "a/\351\273\204\346\231\250\347\203\250/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\345\256\236\344\276\213\347\224\237\345\221\275\345\221\250\346\234\237\351\222\251\345\255\220).md" "b/\351\273\204\346\231\250\347\203\250/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\345\256\236\344\276\213\347\224\237\345\221\275\345\221\250\346\234\237\351\222\251\345\255\220).md"
new file mode 100644
index 0000000000000000000000000000000000000000..e8eb291a779e19d98a8d42eea5db114e2eba0568
--- /dev/null
+++ "b/\351\273\204\346\231\250\347\203\250/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\345\256\236\344\276\213\347\224\237\345\221\275\345\221\250\346\234\237\351\222\251\345\255\220).md"
@@ -0,0 +1,122 @@
+## 1. 创建一个Vue实例
++ 创建一个vue实例，可以传入一个选项对象
++ 通过new Vue创建的根Vue实例
+```
+  var app=new Vue({
+
+      //选项
+  })
+```
+
+## 2.数据与方法
+ 1. 当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。
+ 2. 当创建一个Vue实例，所有的属性（property）只有在data里才能产生响应
+ 3. 添加属性，要在vue实例前添加，虽添加了，但不会触发任何试图的更新；若放在vue实例后添加，则undefined
+  ```
+   <div id="hobby">
+        {{sing}}
+        <br>
+        {{dancing}}
+        <br>
+        {{play}}
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+    <script>
+        //这个data是变量
+        let data = {
+
+            sing: '唱歌',
+            dancing: '跳舞',
+            play: '打篮球'
+        }
+         data.speak='说说';
+        let app = new Vue({
+            el: '#hobby',
+            //这个data是属性
+            data: data
+        })
+       
+           console.log(data);
+           console.log(app);
+        console.log(app.sing === data.sing);
+    </script>
+  ```
+   ![](./imgs/hobby1.png)
+   ![](./imgs/hobby2.png)
+
+   ```
+     <div id="hobby">
+        {{sing}}
+        <br>
+        {{dancing}}
+        <br>
+        {{play}}
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+    <script>
+        //这个data是变量
+        let data = {
+
+            sing: '唱歌',
+            dancing: '跳舞',
+            play: '打篮球'
+        }
+
+        let app = new Vue({
+            el: '#hobby',
+            //这个data是属性
+            data: data
+        })
+        data.speak = '说说';
+        console.log(data);
+        console.log(app);
+        console.log(app.sing === data.sing);
+    </script>
+
+   ```
+![](./imgs/hobby3.png)
+## 3.实例生命周期钩子
++ 生命周期图
+![](./imgs/live1.png)
+![](./imgs/live2.png)
+```
+   <div id="hobby">
+        {{sing}}
+        <br>
+        {{dancing}}
+        <br>
+        {{play}}
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+    <script>
+        //这个data是变量
+        let data = {
+
+            sing: '唱歌',
+            dancing: '跳舞',
+            play: '打篮球'
+        }
+        data.speak = '说说';
+        let app = new Vue({
+            el: '#hobby',
+            //这个data是属性
+            data: function () {
+                return {
+                    danc: '跳舞'
+                }
+
+            },
+            template: '<li>所有爱好</li>',
+            beforeUpdate: function () {
+                console.log('更新前');
+                console.log(this);
+            },
+            updated: function () {
+                console.log('更新后');
+                console.log(this);
+            }
+        })
+
+    </script>
+
+```
\ No newline at end of file
diff --git "a/\351\273\204\346\231\250\347\203\250/2021.05.31.md" "b/\351\273\204\346\231\250\347\203\250/2021.05.31.md"
new file mode 100644
index 0000000000000000000000000000000000000000..e9f2e3241ba1615e9c4991f6419e4b6b861c6525
--- /dev/null
+++ "b/\351\273\204\346\231\250\347\203\250/2021.05.31.md"
@@ -0,0 +1,103 @@
+## 1.文本
++ "Mustache"语法（双大括号）
++ Mustache标签会代替对应数据对象的值，随绑定对象的数据改变而改变
++ 如果通过v-once指令，只能执行一次性插值，当数据改变时，插值处的内容不会更新
+ ![](./imgs/once.png)
+## 2.原始HTML
++ v-html equal {{}}
+```
+
+    <div id="app">
+        <p>{{messages}}</p>
+        <p v-html='messages'></p> 
+     
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+    <script>
+        var app=new Vue({
+            el:'#app',
+            data:{
+                messages:'哈哈',
+              
+            }
+        })
+    </script>
+```
+```
+ 结果：
+ 哈哈
+ 哈哈
+```
+## 3.使用js表达式
+```
+ <div id="app">
+        点击{{msg}}次
+        <button type="button" v-on:click="btnClick">点击提交</button>
+
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+    <script>
+        var app = new Vue({
+            el: '#app',
+            data: {
+                msg: 0
+
+            },
+            methods: {
+                //使用js随机生成
+
+                btnClick: function () {
+                    let rand = Math.floor(Math.random() * 10);
+                    this.msg += 1;
+                }
+            }
+        })
+    </script>
+```
+## 4.指令参数
++ 一个指令能接收一个参数，在指令名称之后以冒号表示
+ ```
+ <a v-bind:href="url">...</a> 
+ ```
++ 动态参数：v-bind:[attributeName]=" "
+## 5.v-bind/v-on 缩写
+ + v-bind
+ ```
+ <!-- 完整语法 -->
+<a v-bind:href="url">...</a>
+
+<!-- 缩写 -->
+<a :href="url">...</a>
+
+<!-- 动态参数的缩写 (2.6.0+) -->
+<a :[key]="url"> ... </a>
+ ```
+ + v-on
+ ```
+ <!-- 完整语法 -->
+<a v-on:click="doSomething">...</a>
+
+<!-- 缩写 -->
+<a @click="doSomething">...</a>
+
+<!-- 动态参数的缩写 (2.6.0+) -->
+<a @[event]="doSomething"> ... </a>
+ ```
+ ## 6.计算属性vs方法
+ + 不同点：计算属性是依赖响应式进行缓存，响应式依赖关系发生改变时他们会重新求值；而方法不是响应式依赖
+ ```
+ methods: {
+  reversedMessage: function () {
+    return this.message.split('').reverse().join('')
+  }
+}
+ ```
+ ```
+ computed: {
+  now: function () {
+    return Date.now()
+  }
+}
+ ```
+## 7.计算属性vs侦听属性
++ 当有很多数据要随数据变动而变动，用计算属性会比较方便，若用侦听属性容易滥用watch
\ No newline at end of file
diff --git "a/\351\273\204\346\231\250\347\203\250/imgs/hobby1.png" "b/\351\273\204\346\231\250\347\203\250/imgs/hobby1.png"
new file mode 100644
index 0000000000000000000000000000000000000000..60bf33237f7282079963e6ce454a7c9819536c8f
Binary files /dev/null and "b/\351\273\204\346\231\250\347\203\250/imgs/hobby1.png" differ
diff --git "a/\351\273\204\346\231\250\347\203\250/imgs/hobby2.png" "b/\351\273\204\346\231\250\347\203\250/imgs/hobby2.png"
new file mode 100644
index 0000000000000000000000000000000000000000..69e17a6ea2410c3239d86fb6dd90ac3d0c757d76
Binary files /dev/null and "b/\351\273\204\346\231\250\347\203\250/imgs/hobby2.png" differ
diff --git "a/\351\273\204\346\231\250\347\203\250/imgs/hobby3.png" "b/\351\273\204\346\231\250\347\203\250/imgs/hobby3.png"
new file mode 100644
index 0000000000000000000000000000000000000000..69005493ddf35d9b4f7f1829a8526252f877d7c1
Binary files /dev/null and "b/\351\273\204\346\231\250\347\203\250/imgs/hobby3.png" differ
diff --git "a/\351\273\204\346\231\250\347\203\250/imgs/live1.png" "b/\351\273\204\346\231\250\347\203\250/imgs/live1.png"
new file mode 100644
index 0000000000000000000000000000000000000000..d78bf7c23b57d9a56b7f822ae0f2f4a6954f2fc5
Binary files /dev/null and "b/\351\273\204\346\231\250\347\203\250/imgs/live1.png" differ
diff --git "a/\351\273\204\346\231\250\347\203\250/imgs/live2.png" "b/\351\273\204\346\231\250\347\203\250/imgs/live2.png"
new file mode 100644
index 0000000000000000000000000000000000000000..3ff1bc9eff450a52e802059fbb9f0db3507a46f8
Binary files /dev/null and "b/\351\273\204\346\231\250\347\203\250/imgs/live2.png" differ
diff --git "a/\351\273\204\346\231\250\347\203\250/imgs/once.png" "b/\351\273\204\346\231\250\347\203\250/imgs/once.png"
new file mode 100644
index 0000000000000000000000000000000000000000..20b495e840042afa0dbc0a53b8e1cf4330e56739
Binary files /dev/null and "b/\351\273\204\346\231\250\347\203\250/imgs/once.png" differ