diff --git "a/\347\216\213\344\273\260\346\226\207/note-2021-05-28.md" "b/\347\216\213\344\273\260\346\226\207/note-2021-05-28.md"
new file mode 100644
index 0000000000000000000000000000000000000000..aac6013e274645a696ef744f290e76ce23dc3fac
--- /dev/null
+++ "b/\347\216\213\344\273\260\346\226\207/note-2021-05-28.md"
@@ -0,0 +1,138 @@
+# 大二第二学期课堂笔记
+
+### Description
+课堂笔记 2021-05-28
+
+### Content
+
+### Vue实例
+
+1. 关于Vue实例
+```
+    Vue应用没有完全遵循MVVM模型，但经常使用变量名 vm 表示Vue实例;
+
+    通常地只创造一个根实例;
+
+    一个Vue实例中只能有一个实例对象。
+```
+
+2. 数据和方法
+
+```
+当一个数据对象创建在Vue实例前时，这个数据对象会加入到Vue实例中。当数据对象的属性发生改变时，数据对象和Vue实例中相应的内容也会发生改变;  ---使用了Object.freeze()方法除外;
+
+初始化Vue实例后再创建数据对象，会报错且数据对象不会加入到Vue实例中;
+如果事先知道晚些时候可能需要一些属性，可以在一开始时设置为空值或0。
+
+除了数据 property，Vue 实例还暴露了一些有用的实例 property 与方法。它们都有前缀 $，以便与用户定义的 property 区分开来。例如：
+
+    vm.$data === data // => true    
+    vm.$el === document.getElementById('example') // => true
+
+    // $watch 是一个实例方法
+    vm.$watch('a', function (newValue, oldValue) {
+    // 这个回调将在 `vm.a` 改变后调用
+    })
+```
+```
+    <div id="app">
+        {{msg}}
+        
+
+        {{first}}      数据与方法
+        <br>
+        {{second}}
+        <br>
+        {{third}}
+        <br>                
+
+
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+    <script>
+
+        // 数据与方法
+
+
+        let data1 = {       //数据对象创建在Vue实例前
+            first:'Red',
+            second:'Orange',
+            third:'Yellow'
+            // msg:null     后续可能需要的属性设置为null 或 0
+        };
+
+        // Object.freeze(data1);   //此方法会阻止浏览器控制台修改vm实例中选相对象的原始数据
+
+        let vm = new Vue({
+            el:'#app',            
+
+            data:data1
+            // data:data2
+            
+        });        
+
+        // let data2 = {       // 数据对象创建在Vue实例后
+        //     msg:'tstts'
+        // }
+
+        console.log(vm);
+        console.log(data1);
+        // console.log(data2);
+
+        // console.log(vm.third === data1.third);   //true
+
+        // data1.msg ='2ss'     后续添加属性
+                
+    </script>
+```
+
+3. 实例生命周期钩子
+```
+每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
+
+生命周期钩子的 this 上下文指向调用它的 Vue 实例。
+
+
+
+
+避免在选项 property 或回调函数上使用箭头函数，比如
+    created: () => console.log(this.a) 或
+    vm.$watch('a', newValue => this.myMethod())。
+
+因为箭头函数并没有 this，this 会作为变量一直向上级词法作用域查找，直至找到为止，经常导致报错。
+
+```
+```
+    <div id="app">
+        {{msg}}        
+
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+    <script>
+        
+        // 生命周期钩子
+
+        let vm = new Vue({
+            el:'#app',
+            data:{
+                msg:'666'                
+            },
+            mounted:function(){
+                console.log('模型视图挂载完成后');
+            },
+            created: function(){
+                console.log('Vue实例初始化完成后');
+            },
+            beforeUpdate:function(){
+                console.log('在数据更新之前。。。');
+                console.log(this);  //this指向 vm 实例
+
+            },
+            updated:function(){
+                console.log('在数据更新之后。。。');
+                console.log(this);
+            }
+        })
+        
+    </script>
+```
\ No newline at end of file