diff --git "a/\346\242\201\350\211\272\347\274\244/Vue - 2021.05.28.md" "b/\346\242\201\350\211\272\347\274\244/Vue - 2021.05.28.md"
new file mode 100644
index 0000000000000000000000000000000000000000..b677c71e1777c01f78c371a8051ed5c13041e103
--- /dev/null
+++ "b/\346\242\201\350\211\272\347\274\244/Vue - 2021.05.28.md"	
@@ -0,0 +1,49 @@
+## Vue.js 第三节课 (Vue 实例) 原代码Vue见
++ v-if 控制标签及其内容的显示和不显示
+
++ v-show 控制标签及其内容的显示和隐藏
+
++ v-for：用来循环遍历
+
++ 区别：if是通过添加dom和删除dom实现显隐，show是通过给标签添加隐藏属性显隐。if会删除标签show不会
+
+```
+    <div id="top">
+        {{age}}
+        <br>
+        {{name}}
+        <br>
+        {{red}}
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+
+    <script>
+        let data = {
+            age:"黑曼巴",
+            name:"黑7黑8",
+            red:"结果是横扫"
+        }
+
+        let app = new Vue({
+            el:"#top",//判断是否使用了模板。
+            data:data
+        })
+        console.log(top);
+        console.log(app.age===data.age);
+    </script>
+```
+1. beforeUpdate 视图渲染之前，此时数据还是久的，data的数据的最新的
+
+    + 数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
+
+2. updated 视图渲染之后,数据是最新的
+
+    + 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
+
++ 在$data发生变化后,才开始调用beforeUpdate是我理解了的,但是在beforeUpdate钩子函数中输出的$el和updated钩子函数中输出的$el是不一样的
+
++ 最初 mounted 是 '湖人'，第一个在 beforeUpdate 中给 mounted 赋值时，比如赋值成 'world'，会触发更新。
+第二次进入 beforeUpdate 时，mounted 又被赋值成 'world'，但是这个值与之前的 'world' 相等，
+这时就不会触发更新了，而数组每次重新赋值后都是创建了一个新对象，会重新更新。
+```
\ No newline at end of file
diff --git "a/\346\242\201\350\211\272\347\274\244/Vue/index1.html" "b/\346\242\201\350\211\272\347\274\244/Vue/index1.html"
new file mode 100644
index 0000000000000000000000000000000000000000..6a5401cb710cc712690f791c7e2572e98202f34e
--- /dev/null
+++ "b/\346\242\201\350\211\272\347\274\244/Vue/index1.html"
@@ -0,0 +1,56 @@
+<!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="model">
+        {{age}}
+        <br>
+        {{name}}
+        <br>
+        {{red}}
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+
+    <script>
+        let data = {
+            age: "黑曼巴",
+            name: "黑7黑8",
+            red: "结果是横扫"
+        }
+        data.nickname = 'dhg';
+
+        let model = new Vue({
+            el: "#model",
+            data: () => {
+                return data
+            }, mounted: function () {
+                console.log('湖人');
+            }, created: function () {
+                console.log('太阳');
+            }, beforeUpdate: function () {
+                console.log('数据更新前');
+                console.log(this);
+            }, updated: function () {
+                console.log('数据更新后');
+                console.log(this);
+            }
+
+            // template:'<a>风骨</a>'
+        })
+
+        console.log(model.$el);
+        console.log(data);
+
+        console.log(model.age === data.age);
+    </script>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\346\242\201\350\211\272\347\274\244/img/vue.jpg" "b/\346\242\201\350\211\272\347\274\244/img/vue.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..eece235450f84795129863af5ad2f1be36158d71
Binary files /dev/null and "b/\346\242\201\350\211\272\347\274\244/img/vue.jpg" differ
diff --git "a/\346\242\201\350\211\272\347\274\244/img/vue1.jpg" "b/\346\242\201\350\211\272\347\274\244/img/vue1.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..83e70bc7091a331ee7811ab014cd0867201e8ae7
Binary files /dev/null and "b/\346\242\201\350\211\272\347\274\244/img/vue1.jpg" differ
diff --git "a/\346\242\201\350\211\272\347\274\244/img/vue2.jpg" "b/\346\242\201\350\211\272\347\274\244/img/vue2.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..c1b1cb9ae9a7599f6a6ed03162ffc7dc88ee742f
Binary files /dev/null and "b/\346\242\201\350\211\272\347\274\244/img/vue2.jpg" differ
