diff --git "a/\351\237\251\345\235\244/2021-5-28.md" "b/\351\237\251\345\235\244/2021-5-28.md"
new file mode 100644
index 0000000000000000000000000000000000000000..a9c5859cb1350af857fde3d82172cb76d8fc3fa2
--- /dev/null
+++ "b/\351\237\251\345\235\244/2021-5-28.md"
@@ -0,0 +1,158 @@
+# 2021-5-28 Vue.js 第四节课 Vue 模板语法 计算属性和侦听器
+## 文本  “Mustache”语法 (双大括号) 的文本插值
+
+## 原始 HTML Attribute
+```
+  <div id="app">
+        <span>{{msg}}</span>
+        <span v-html="msg"></span>
+        <button v-bind:disabled="isButtonDisabled">这是一个按钮</button>
+    </div>
+
+
+
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+    <script>
+        var app=new Vue({
+            el:"#app",
+            data:{
+                msg:`<h1>大大大小小小</h1>`,
+                isButtonDisabled:true,
+            }
+        })
+```
+## 指令 指令 (Directives) 是带有 v- 前缀的特殊 attribute
+
+## 参数 动态参数
+
+```
+ 参数 :一些指令能够接收一个“参数”，在指令名称之后以冒号(:)表示
+ 动态参数 :2.6.0 开始，可以用方括号括([])起来的 JavaScript 表达式作为一个指令的参数：
+```
+
+```
+在 DOM 中使用模板时 (直接在一个 HTML 文件里撰写模板)，还需要避免使用大写字符来命名键名，因为浏览器会把 attribute 名全部强制转为小写
+```
+
+```
+   <div id="app">
+        点击{{dt}}次数
+
+        <input type="button" value="这是一个按钮" v-on:click="onclick">
+
+        <br>
+        <a v-bind:[param]="url">这是个链接</a>
+        <br>
+        <span>{{msg}}</span>
+        <span v-html="msg"></span>
+        <button v-bind:disabled="isButtonDisabled">这是一个按钮</button>
+    </div>
+
+
+
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+    <script>
+        var app=new Vue({
+            el:"#app",
+            data:{
+                msg:`<h1>大大大小小小</h1>`,
+                url:'http://baidu.com',
+                isButtonDisabled:true,
+                dt:0,
+                param:"href",
+            },
+            methods:{
+                onclick:function(){
+                    this.dt+=1
+                }
+            }
+        })
+    </script>
+```
+## 缩写
++ 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>
+```
+## 计算属性
++ computed methods watch
+```
+1.computed当页面中有某些数据依赖其他数据进行变动的时候，可以使用计算属性。
+2.methods通常在这里面写入方法，只要调用就会重新执行一次，相应的有一些触发条件，在某些时候methods和computed看不出来具体的差别，但是一旦在运算量比较复杂的页面中，就会体现出不一样。
+3.watch用于观察和监听页面上的vue实例,如果要在数据变化的同时进行异步操作或者是比较大的开销，那么watch为最佳选择
+
+
+需要注意的是，computed是具有缓存的，这就意味着只要计算属性的依赖没有进行相应的数据更新，那么computed会直接从缓存中获取值，多次访问都会返回之前的计算结果。
+
+computed和watch方面，一个是计算，一个是观察，在语义上是有区别的。
+```
+
+
+```
+ <div id="app">
+
+        点击{{dt}}次数
+
+        <input type="button" value="这是一个按钮" v-on:click="onclick">
+
+        <br>
+
+        <h1>当前年龄是{{age}}</h1>
+
+    </div>
+
+
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+    <script>
+        var app = new Vue({
+            el: '#app',
+            data: {
+                dt: 0,
+                student: {
+                    id: 1,
+                    name: "小米",
+                    birth: 2000,
+                }
+            },
+            methods: {
+                onclick: function () {
+                    this.dt += 1
+                }
+            },
+
+            computed: {
+                age: function () {
+                    return 2021 - this.student.birth
+                    console.log(this.student.birth);
+                }
+            },
+            watch:{
+                'student.birth':function(newVal,val){
+                    console.log("新的："+ newVal);
+                    console.log("旧的："+ val);
+                }
+            }
+        })
+    </script>
+```
+
diff --git "a/\351\237\251\345\235\244/2021-5-29.md" "b/\351\237\251\345\235\244/2021-5-29.md"
new file mode 100644
index 0000000000000000000000000000000000000000..85eb1f9d5d36a3d93213c05638877decac22763e
--- /dev/null
+++ "b/\351\237\251\345\235\244/2021-5-29.md"
@@ -0,0 +1,211 @@
+# 模板语法
+
+## 插值
+
+### 文本
+`v-once`指令:一次性的插值，当数据改变时，插值内容不会更新，只有在Vue实例里重新插值。
+
+### 原始HTML
+
+`v-html`
+```
+var app=new Vue({
+        el:'#app',
+        data:{
+            rawHtml:'<span>我看见蟑螂我不怕不怕啦</span>'
+        },
+    })
+
+```
+```
+ <div id="app">
+        <p>{{rawHtml}}</p>
+        <p> v-html<span v-html="rawHtml"></span></p>
+    </div>
+```
+
+
+指令 指令 (Directives) 是带有 v- 前缀的特殊 attribute 一些指令能够接收一个“参数”，在指令名称之后以冒号(:)表示
+参数 动态参数 2.6.0 开始，可以用方括号括([])起来的 JavaScript 表达式作为一个指令的参数：
+
+```
+  <div id="app">
+        <button v-bind:disabled="isButtonDisabled">这是一个按钮</button>
+    <input type="button" value="点我一下" v-on:click="onclick"> 
+    <a >这是第{{dt}}次点击</a>
+    <a v-bind:[parma]='url'>你好啊，你真好</a>
+    </div>
+        <script>
+       let app=new Vue({
+           el:'#app',
+           data:{
+            isButtonDisabled:false,
+             dt:0,
+             parma:'href',
+             url:`http://baidu.com`
+           },
+           methods:{
+               onclick:function(){
+                   return this.dt+=1;
+               }
+           }
+       })
+    </script>
+    ```
+
+
+## 原始 HTML Attribute
+```
+  <div id="app">
+        <span>{{msg}}</span>
+        <span v-html="msg"></span>
+        <button v-bind:disabled="isButtonDisabled">这是一个按钮</button>
+    </div>
+
+
+
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+    <script>
+        var app=new Vue({
+            el:"#app",
+            data:{
+                msg:`<h1>大大大小小小</h1>`,
+                isButtonDisabled:true,
+            }
+        })
+```
+## 指令 指令 (Directives) 是带有 v- 前缀的特殊 attribute
+
+## 参数 动态参数
+
+```
+ 参数 :一些指令能够接收一个“参数”，在指令名称之后以冒号(:)表示
+ 动态参数 :2.6.0 开始，可以用方括号括([])起来的 JavaScript 表达式作为一个指令的参数：
+```
+
+```
+在 DOM 中使用模板时 (直接在一个 HTML 文件里撰写模板)，还需要避免使用大写字符来命名键名，因为浏览器会把 attribute 名全部强制转为小写
+```
+
+```
+   <div id="app">
+        点击{{dt}}次数
+
+        <input type="button" value="这是一个按钮" v-on:click="onclick">
+
+        <br>
+        <a v-bind:[param]="url">这是个链接</a>
+        <br>
+        <span>{{msg}}</span>
+        <span v-html="msg"></span>
+        <button v-bind:disabled="isButtonDisabled">这是一个按钮</button>
+    </div>
+
+
+
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+    <script>
+        var app=new Vue({
+            el:"#app",
+            data:{
+                msg:`<h1>大大大小小小</h1>`,
+                url:'http://baidu.com',
+                isButtonDisabled:true,
+                dt:0,
+                param:"href",
+            },
+            methods:{
+                onclick:function(){
+                    this.dt+=1
+                }
+            }
+        })
+    </script>
+```
+## 缩写
++ 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>
+```
+## 计算属性
++ computed methods watch
+```
+1.computed当页面中有某些数据依赖其他数据进行变动的时候，可以使用计算属性。
+2.methods通常在这里面写入方法，只要调用就会重新执行一次，相应的有一些触发条件，在某些时候methods和computed看不出来具体的差别，但是一旦在运算量比较复杂的页面中，就会体现出不一样。
+3.watch用于观察和监听页面上的vue实例,如果要在数据变化的同时进行异步操作或者是比较大的开销，那么watch为最佳选择
+
+
+需要注意的是，computed是具有缓存的，这就意味着只要计算属性的依赖没有进行相应的数据更新，那么computed会直接从缓存中获取值，多次访问都会返回之前的计算结果。
+
+computed和watch方面，一个是计算，一个是观察，在语义上是有区别的。
+```
+
+
+```
+ <div id="app">
+
+        点击{{dt}}次数
+
+        <input type="button" value="这是一个按钮" v-on:click="onclick">
+
+        <br>
+
+        <h1>当前年龄是{{age}}</h1>
+
+    </div>
+
+
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+    <script>
+        var app = new Vue({
+            el: '#app',
+            data: {
+                dt: 0,
+                student: {
+                    id: 1,
+                    name: "小米",
+                    birth: 2000,
+                }
+            },
+            methods: {
+                onclick: function () {
+                    this.dt += 1
+                }
+            },
+
+            computed: {
+                age: function () {
+                    return 2021 - this.student.birth
+                    console.log(this.student.birth);
+                }
+            },
+            watch:{
+                'student.birth':function(newVal,val){
+                    console.log("新的："+ newVal);
+                    console.log("旧的："+ val);
+                }
+            }
+        })
+    </script>
+```
+
diff --git "a/\351\237\251\345\235\244/index.html" "b/\351\237\251\345\235\244/index.html"
index e735be3d5983ef1a18845b1f3e0f8669168d4244..dee8f73c06f348973ad077cb2678eacbc5d93acf 100644
--- "a/\351\237\251\345\235\244/index.html"
+++ "b/\351\237\251\345\235\244/index.html"
@@ -6,23 +6,19 @@
     <title>Document</title>
 </head>
 <body>
-    <div id="component-Dome">
-        <eazy-name>
-
-        </eazy-name>
+    <div id="app">
+        <p>{{rawHtml}}</p>
+        <p> v-html<span v-html="rawHtml"></span></p>
     </div>
 </body>
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 <script>
-    Vue.component('eazy-name',{
-        data:function(){
-            return {
-                count:0
-            }
+    var app=new Vue({
+        el:'#app',
+        data:{
+            rawHtml:'<span>我看见蟑螂我不怕不怕啦</span>'
         },
-        template:`<button v-on:click="count++">昨夜梦里梦你{{count}}次</button>`
+    })
 
-    });
-    new Vue({el:'#component-Dome'})
 </script>
 </html>
\ No newline at end of file