diff --git "a/\351\273\204\346\266\246\345\261\261/2022-3-29vue/index.html" "b/\351\273\204\346\266\246\345\261\261/2022-3-29vue/index.html"
new file mode 100644
index 0000000000000000000000000000000000000000..4c6518671a6edd9b1d086c2a6a51be70947514b7
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-3-29vue/index.html"
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
+    <title>vue练习el与data</title>
+</head>
+<body>
+    <!-- 写一个vue的页面，把 el，与data的元素都写写，有兴趣的可以看看源码 -->
+    <div id="lai">
+        {{message}}<br>
+        {{hong}}
+    </div>
+    <p>
+        {{hong}}
+    </p>
+
+    <div id="lai2">
+        {{message}}
+    </div>
+</body>
+<script>
+    let vm = new Vue({
+        el:"#lai",
+        data:{
+            message:'hello vue',
+            hong:'虹霖'
+        }
+    });
+    let vc = new Vue({
+        el:"p",
+        data:{
+            hong:'p标签的虹'
+        }
+    })
+    let vm2 = new Vue({
+        el:'#lai2',
+        data:{
+            message:"honglin123"
+        }
+
+    })
+    console.log(vm.$el);
+
+    console.log(vm.message);
+    console.log(vm.hong);
+    console.log(vc.hong);
+    console.log(vc.$data.hong);
+    // $watch方法，Chorem控制台输入 vm.message = '修改后message的值';
+    vm.$watch('message',function(newValue,oldValue){
+        console.log(newValue,oldValue)
+    });
+</script>
+</html>
\ No newline at end of file
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-3-30vue/index.html" "b/\351\273\204\346\266\246\345\261\261/2022-3-30vue/index.html"
new file mode 100644
index 0000000000000000000000000000000000000000..fda361be2f66c880b24dcf84d9a917721d9b7e67
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-3-30vue/index.html"
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>模板语法</title>
+    <!-- <script src="vue.js"></script> -->
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
+</head>
+<body>
+    <div id="app">
+        <div>{{text}}+第一段文字</div>
+        <div v-text="text">+使用v-text,显示不了<li>这是li,也显示不了</li></div>
+        
+        <div>{{html}}</div>
+        <div v-html="html">使用v-html</div>
+        <!-- v-bind:绑定属性 -->
+        <div id="demo"></div>
+        <div v-bind:id="'1_'+id+'_5'">控制台查看v-bind:id</div>
+        <!-- 自定义属性 -->
+        <div v-bind:attr_id="attrid"></div>
+        <div v-bind:class="class1">class</div>
+        
+        <button v-bind:disabled="isButtonDisabled">false状态的按钮</button>
+        <button v-bind:disabled="isButtonDisabled2">ture状态的按钮</button>
+        <div>{{num+'+num后续的输出'}}</div>
+        <div>{{ok?'输出ok':'输出不ok'}}</div>
+        <div>{{val.trim()}}</div>
+        <div>{{echo(val)}}</div>
+        <div v-if="result">if显示?????</div>
+        <div v-else="result">else显示!!!</div>
+        <div v-show="result">show的显示???</div>
+        <div v-on:click="click">点击</div>
+        <div v-on:click="click2()">点击2</div>
+    </div>
+    
+</body>
+<script>
+    let data = {
+        text:'使用外部data写入的一段文本',
+        html:'<span style="color:red">我是html元素</span>',
+        id:'demo2',
+        attrid:100,
+        class1:'cl1',
+        isButtonDisabled:false,
+        isButtonDisabled2:true,
+        num:1000,
+        ok:false,
+        val:'  前面有空格，后面也有空格     ',
+        result:false,
+        click2:function(){
+            alert('虹霖')
+        }
+    }
+    let vue = new Vue({
+        el:"#app",
+        data:data,
+        methods:{
+            echo:function(a){
+                let b = '虹色'+a+'零零零';
+                return b;
+            },
+            click:function(){
+                alert('click')
+            }
+        }
+    })
+</script>
+</html>
\ No newline at end of file
