diff --git a/2021.5.27.md b/2021.5.27.md
new file mode 100644
index 0000000000000000000000000000000000000000..fe2a9222c7495e52d767016a20d47b81ca8d541f
--- /dev/null
+++ b/2021.5.27.md
@@ -0,0 +1,73 @@
+# 2021.5.27
+
+
+## vue实例
+```
+<div id="app">
+    <h1>{{ msg }}</h1>
+</div>
+<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+<script>
+    let app = new Vue({
+        // 选项
+        el:"#app",
+        data:{
+            msg:"Hello Word!"
+        }
+    })
+</script>
+```
+```
+这里我们定义的app就是一个vue实例,在实例中可以定义选项,这里就出现两个
+
+el选项:用于指定在哪个dom元素挂载vue实例
+data选项:用于存在数据库,一些实例中用到的数据都可以在里声明,它的作用域是这一整个实例
+```
+
+## v-bind 与 v-on 
+
+1.v-bind:用于数据的绑定,绑定的数据可以是各种的
+
+如：
+```
+<div id="app">
+    // 我们使用了span标签的特性使用数据绑定实现给title设置一些值,就可以使用到v-bind来实现
+    <span v-bind:title="msg">鼠标悬停几秒看看</span>
+</div>
+
+
+<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+<script>
+    let app = new Vue({
+        el:"#app",
+        data:{
+            msg:"看来你悬停了几秒"
+        }
+    })
+</script>
+```
+
+2.v-on:用于监听dom元素上的一些事件
+
+如点击事件,这里使用了单击实现实现了标签的显示于隐藏:
+```
+<div id="app">
+    <p v-if="show">这里显示文本</p>
+    <button @click="handleClose">点击隐藏</button>
+</div>
+
+
+<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+<script>
+    let app = new Vue({
+        el:"#app",
+        data:{
+            show:true
+        },
+        methods(){
+            this.show = !this.show
+        }
+    })
+</script>
+```
+methods选项:用于存放定义的函数与方法方便复用,methods中的this表示当前实例本身
\ No newline at end of file
diff --git "a/2021.5.28-Vue\345\256\236\344\276\213\347\232\204\347\224\237\345\221\275\345\221\250\346\234\237.md" "b/2021.5.28-Vue\345\256\236\344\276\213\347\232\204\347\224\237\345\221\275\345\221\250\346\234\237.md"
new file mode 100644
index 0000000000000000000000000000000000000000..e87bb27ad517583759ce945ad0a7a2a48c75f12c
--- /dev/null
+++ "b/2021.5.28-Vue\345\256\236\344\276\213\347\232\204\347\224\237\345\221\275\345\221\250\346\234\237.md"
@@ -0,0 +1,65 @@
+# 2021.5.28
+
+## Vue实例的生命周期
+
+生命周期可以是根实例也可以是组件
+
+```
+<div id="app">
+    <input type="button" value="修改msg" @click="msg='No'">
+    <h3 id="h3">{{ msg }}</h3>
+</div>
+
+<script>
+    let vm = new Vue({  //表示创建一个实例对象
+        el:'#app',      // 选择挂载的dom节点
+        data:{          // 要使用的数据
+            msg:'Vue的生命周期'
+        },
+        methods:{
+            show(){
+                console.log('执行了show方法') 
+            }
+        }
+        beforeCreate(){  // 遇到第一个周期函数 
+            console.log(this.msg)
+            this.show()
+            在这个时候,它只是初始化了一个空的实例,什么都没有,data与show方法也并没有初始化,只有实例默认的周期函数与默认的事件    
+        },
+        created(){   // 遇到第二个周期函数
+            console.log(this.msg)
+            this.show()
+            在这个时候,它已经初始化好了数据,你已经可以在这里做些什么了,你也可以在这里写入你想要的初始化的数据或者调用一些你想要的执行的函数,最早,使用一些方法时就可以在这里调用
+        },
+           在 created --> beforMount 之间这个过程
+             它会查找是否有el/template 如果有el那么他会去查找是否有template,如果有的话那么它会去渲染template中的模板,如果没有template那么它会去渲染el选择的dom节点,如果template与el同时存在那么会渲染template到内存中,template会覆盖el,但是el是必须的
+        beforeMount(){  // 遇到第三个周期函数
+            console.log(document.getElementById('h3').innerText)
+            在这个时候,实例已经渲染到了模板保存在内存中,但是还没有挂载到dom上,所以dom上并没有变化
+        },
+        mounted(){    // 遇到第四个周期函数 
+            console.log(document.getElementById('h3').innerText)
+            在这个时候,已经完成了实例化,已经把渲染好的模板挂载到dom上了,页面有了变化,你可以在这个时候编写你的方法或者调用方法
+        },
+            在 mounted --> beforeDestroy 有两个事件 在数据发生变化是会运行
+        beforeUpdate(){   
+            console.log('界面上元素的内容：' + document.getElementById('h3').innerText)
+            console.log('data 中的 msg 数据是：' + this.msg)  
+            如果数据发生了改变,那么在这个时候,它已经重新渲染好了模板并且保存在了内存中,但是并未同步到页面单中,但是数据已经更新了
+        },
+        updated(){
+            console.log('界面上元素的内容：' + document.getElementById('h3').innerText)
+            console.log('data 中的 msg 数据是：' + this.msg)
+            在这个时候,重新渲染好的模板已经跟界面同步了
+        },
+        beforeDestroy(){ // 遇到第五个周期函数
+            在这个时候,实例已经准备进入销毁状态了,但是这个时候实例中的所有东西都还可以使用
+        },
+        destriyed(){ // 遇到第六个周期函数
+            在这个时候,实例已经被销毁了,实例中的东西已经不能使用了,这就是一个实例的生命周期
+        }
+
+    })
+</script>
+```
+
diff --git a/2021.5.28.md b/2021.5.28.md
new file mode 100644
index 0000000000000000000000000000000000000000..0956cd6ce2f6c18f43652a91c6862170acc07b8a
--- /dev/null
+++ b/2021.5.28.md
@@ -0,0 +1,44 @@
+# 2021.5.28 
+
+
+
+## computed 计算机属性
+
+computed属性与methods属性其实差不多,区别就在于computed属性有缓存而methods没有缓存,而且computed属性不是响应式的,而methods属性是响应式的
+
+```
+<div id="app">
+    姓名:{{ fullName() }}
+    <br>
+    当时的时间:{{ now }}
+</div>
+
+<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+<script>
+    let app = new Vue({
+        el:'#app',
+        data:{
+            firstName:'黄',
+            lastName:'某某',
+        },
+        methods:{
+            fullName:function(){
+                return this.firstName + this.lastName
+            }   
+        },
+        computed:{
+            now:function(){
+                return Date.now()
+            }
+        }
+    })
+</script>
+
+
+```
+输出:
+```
+姓名:黄某某
+当时的时间:'这里是当前时间'(时间戳)
+```
+我们这时候改变一下值,app.firstName = '林',你会发现页面上的姓名改变了但是当前时间并没有变化,你应该会好奇,为什么姓名都改变了,可是为什么当前时间没有改变,不是我返回的是当前时间吗?这是因为computed方法并不是响应式的而methods方法是响应式的它会随着值得改变响应到页面上,而computed方法不是响应式的,所以并不会响应到页面上。但是你又好奇当前的时间不是一直在变吗,为什么它也没有变化。如果你刷新一下,你会发现当前时间它变化了,这又是为什么呢。那是因为computed方法存在着缓存机制,这个缓存会保存你页面当时响应时computed中的数据,不管你之后响应了多少次,如果computed方法中的值没有做出改变的话,它就会一直是当时响应时的数据,只有你改变了computed方法中的值它才会做出改变,这也是为什么刷新了页面它就会变的原因。这些就是computed与methods方法的区别,它们本质上其实是一样的,都是用于保存一些方法或函数,使用computed/methods取决去你需不需要缓存。
\ No newline at end of file