diff --git "a/\345\274\240\346\241\202\345\234\206/2022-0329-Vue\347\254\254\344\270\200\346\254\241\344\275\234\344\270\232/firstVue.html" "b/\345\274\240\346\241\202\345\234\206/2022-0329-Vue\347\254\254\344\270\200\346\254\241\344\275\234\344\270\232/firstVue.html"
new file mode 100644
index 0000000000000000000000000000000000000000..29badc4849ee52ab2fa9cdf3598597aa2e4eee4d
--- /dev/null
+++ "b/\345\274\240\346\241\202\345\234\206/2022-0329-Vue\347\254\254\344\270\200\346\254\241\344\275\234\344\270\232/firstVue.html"
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
+</head>
+<body>
+    <div id="el">
+        {{message}}
+    </div>
+</body>
+<script>
+    let vm = new Vue({
+        el:'#el',
+        data:{
+            message:'Hello Vue'
+        }
+    })
+</script>
+</html>
\ No newline at end of file
diff --git "a/\345\274\240\346\241\202\345\234\206/2022-0330-Vue\347\254\254\344\272\214\346\254\241\344\275\234\344\270\232/demo.html" "b/\345\274\240\346\241\202\345\234\206/2022-0330-Vue\347\254\254\344\272\214\346\254\241\344\275\234\344\270\232/demo.html"
new file mode 100644
index 0000000000000000000000000000000000000000..15778abd558126db18acb94e21123860157dd09d
--- /dev/null
+++ "b/\345\274\240\346\241\202\345\234\206/2022-0330-Vue\347\254\254\344\272\214\346\254\241\344\275\234\344\270\232/demo.html"
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
+</head>
+
+<body>
+    <div id="app">
+        <div>{{text}}我后面还有哟</div>
+        <div v-text='text'>我这里也有哼！</div>class
+        <div v-html='html'>我是html元素</div>
+        <div v-bind:id='"a_"+id+"_b"'></div>
+        <div v-bind:class='class1'>我是class</div>
+        <div v-bind:disabled='dis'>显示与不显示2222</div>
+        <!----todo--->
+        <button v-bind:disabled="dis">Button</button>
+        <div>{{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: '文本输出',
+        html: '<span style="color:red">我是HTML元素</span>',
+        id: 'demo2',
+        class1: undefined,
+        dis: false,
+        num: 1000,
+        ok: false,
+        val: '  前面有空格，后面也有空格     ',
+        result: false,
+
+    }
+    let vm = 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
diff --git "a/\345\274\240\346\241\202\345\234\206/2022-0330-Vue\347\254\254\344\272\214\346\254\241\344\275\234\344\270\232/\345\210\227\350\241\250\346\270\262\346\237\223.html" "b/\345\274\240\346\241\202\345\234\206/2022-0330-Vue\347\254\254\344\272\214\346\254\241\344\275\234\344\270\232/\345\210\227\350\241\250\346\270\262\346\237\223.html"
new file mode 100644
index 0000000000000000000000000000000000000000..9c877075c4eb14d9f1bfd469baed76e5383004ca
--- /dev/null
+++ "b/\345\274\240\346\241\202\345\234\206/2022-0330-Vue\347\254\254\344\272\214\346\254\241\344\275\234\344\270\232/\345\210\227\350\241\250\346\270\262\346\237\223.html"
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
+</head>
+
+<body>
+    <div id="el">
+        <ul>
+            <li v-for="item in book">
+                {{item}}
+            </li>
+        </ul>
+    </div>
+</body>
+<script>
+    let vm = new Vue({
+        el: '#el',
+        data: {
+            book: ['Vue从入门到精通', 'java', 'web前端']
+        }
+    })
+</script>
+
+</html>
\ No newline at end of file
diff --git "a/\345\274\240\346\241\202\345\234\206/2022-0330-Vue\347\254\254\344\272\214\346\254\241\344\275\234\344\270\232/\347\233\221\345\220\254\344\272\213\344\273\266.html" "b/\345\274\240\346\241\202\345\234\206/2022-0330-Vue\347\254\254\344\272\214\346\254\241\344\275\234\344\270\232/\347\233\221\345\220\254\344\272\213\344\273\266.html"
new file mode 100644
index 0000000000000000000000000000000000000000..014834383c312a2483e5f6ea5ee07d7220f871ff
--- /dev/null
+++ "b/\345\274\240\346\241\202\345\234\206/2022-0330-Vue\347\254\254\344\272\214\346\254\241\344\275\234\344\270\232/\347\233\221\345\220\254\344\272\213\344\273\266.html"
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
+</head>
+<body>
+    <div id='el'>
+        <h2>当前计数:{{counter}}</h2>
+        <!-- <button v-on:click='counter++'>+</button>
+        <button v-on:click='counter--'>-</button> -->
+        <button v-on:click='add'>+</button>
+        <button v-on:click='sub'>-</button>
+    </div>
+</body>
+<script>
+    let vm = new Vue({
+        el:'#el',
+        data:{
+            counter:0
+        },
+        methods:{
+            add:function(){
+                this.counter++
+            },
+            sub:function(){
+                this.counter--
+            }
+        }
+    })
+</script>
+</html>
\ No newline at end of file
diff --git "a/\345\274\240\346\241\202\345\234\206/2022-0330-Vue\347\254\254\344\272\214\346\254\241\344\275\234\344\270\232/\350\241\250\345\215\225\347\273\221\345\256\232.html" "b/\345\274\240\346\241\202\345\234\206/2022-0330-Vue\347\254\254\344\272\214\346\254\241\344\275\234\344\270\232/\350\241\250\345\215\225\347\273\221\345\256\232.html"
new file mode 100644
index 0000000000000000000000000000000000000000..9cd7a06c15ae88992e56785a1a842db175a397ee
--- /dev/null
+++ "b/\345\274\240\346\241\202\345\234\206/2022-0330-Vue\347\254\254\344\272\214\346\254\241\344\275\234\344\270\232/\350\241\250\345\215\225\347\273\221\345\256\232.html"
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
+</head>
+
+<body>
+    <div id='el'>
+        <input v-model='message' type="text">
+        <p>message is : {{message}} </p>
+        <br>
+        <textarea v-model='textarea'></textarea>
+        <p>多行文本内容: {{textarea}} </p>
+        <br>
+        <!-- 复选框 -->
+        <input type="checkbox" id="checkbox" v-model="checked">
+        <label for="checkbox">{{ checked }}</label>
+
+    </div>
+</body>
+<script>
+    let vm = new Vue({
+        el: '#el',
+        data: {
+            message: '',
+            textarea: '',
+            checked:'',
+        },
+
+    })
+</script>
+
+</html>
\ No newline at end of file
