diff --git "a/\347\216\213\345\207\244\346\254\243/2022.03.30-vue\344\275\234\344\270\232/\346\250\241\346\235\277\350\257\255\346\263\225.html" "b/\347\216\213\345\207\244\346\254\243/2022.03.30-vue\344\275\234\344\270\232/\346\250\241\346\235\277\350\257\255\346\263\225.html"
new file mode 100644
index 0000000000000000000000000000000000000000..e07667307cbef5129b2306cb99d3366d97fddb5f
--- /dev/null
+++ "b/\347\216\213\345\207\244\346\254\243/2022.03.30-vue\344\275\234\344\270\232/\346\250\241\346\235\277\350\257\255\346\263\225.html"
@@ -0,0 +1,82 @@
+<!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="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
+</head>
+<style>
+    body {
+        
+        background-color: #8ac4eb;
+        justify-content: center;
+        align-items: center;
+        font-size: 18px;
+        padding-top: 9px;
+        color: #f7f7f7;
+        text-align: center;
+
+    }
+</style>
+
+<body>
+    <div id="app">
+        <div>{{text}}我后面也有值(*￣︶￣)</div>
+        <div v-text="text">(*￣︶￣)也有值</div>
+    </div>
+    <div>{{html}}</div>
+    <div v-html="html">html元素</div>
+    <div id="demo"></div>
+    <div v-bind:id="'1_'+id+'_5'"></div>
+    <div v-bind:attr_id="attrid"></div>
+    <div v-bind:class="class"></div>
+    <div v-bind:disabled='dis'>显示与不显示</div>
+    <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>
+
+</body>
+<script>
+    let data = {
+        text: '模板语法的文本输出',
+        html: '<span stle ="color:red">html元素',
+        id: 'demo',
+        attrid: 100,
+        class: undefined,
+        dis: false,
+        num: 1000,
+        ok: false,
+        val: '  我前面有空格，后面也有空格  ',
+        result: false,
+        click2: function () {
+            alert('data func')
+        }
+
+    }
+
+    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
diff --git "a/\347\216\213\345\207\244\346\254\243/2022.03.31-vue\344\275\234\344\270\232/img/1.jpg" "b/\347\216\213\345\207\244\346\254\243/2022.03.31-vue\344\275\234\344\270\232/img/1.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..3d05feeb998beb45461c03279e16f563729f824f
Binary files /dev/null and "b/\347\216\213\345\207\244\346\254\243/2022.03.31-vue\344\275\234\344\270\232/img/1.jpg" differ
diff --git "a/\347\216\213\345\207\244\346\254\243/2022.03.31-vue\344\275\234\344\270\232/\346\263\250\345\206\214\351\241\265\351\235\242.html" "b/\347\216\213\345\207\244\346\254\243/2022.03.31-vue\344\275\234\344\270\232/\346\263\250\345\206\214\351\241\265\351\235\242.html"
new file mode 100644
index 0000000000000000000000000000000000000000..3343bec2feafe7fb85075bc7d2d292810de44525
--- /dev/null
+++ "b/\347\216\213\345\207\244\346\254\243/2022.03.31-vue\344\275\234\344\270\232/\346\263\250\345\206\214\351\241\265\351\235\242.html"
@@ -0,0 +1,137 @@
+<!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>注册页面</title>
+</head>
+<style>
+    body {
+        background: url(./img/1.jpg);
+        background-repeat: no-repeat;
+        background-size: 100% auto;
+    }
+    
+    #login {
+        padding: 20px 50px;
+        background: #00000060;
+        width: 456px;
+        height: 360px;
+        margin: 0 auto;
+        margin-top: 10%;
+        color: #8ac4eb;
+    }
+    
+    label {
+        float: left;
+        width: 5em;
+        margin-right: 1em;
+        height: 100%;
+        text-align: right;
+    }
+    
+    h3 {
+        text-align: center;
+    }
+    
+    .item {
+        padding-left: 60px;
+        line-height: 27px;
+        margin-bottom: 21px;
+    }
+    
+    .item>input {
+        width: 200px;
+        height: 23px;
+        border: 1px solid white;
+        border-radius: 10px;
+        background-color: thistle;
+        opacity: 0.7;
+        text-align: center;
+    }
+    
+    .layui-btn {
+        width: 90px;
+        height: 23px;
+        border: 2px solid #6389f1;
+        color: #929294;
+        opacity: 0.5;
+        border-radius: 10px;
+    }
+    
+    .submit {
+        margin-top: 30px;
+        margin-left: 160px;
+        width: 200px;
+        height: 30px;
+        border: 0px;
+        background: #ffffff80;
+        background-image: linear-gradient(120deg, #db3125 0%, #578bc3 100%);
+        border-radius: 15px;
+    }
+</style>
+
+<body>
+    <!-- 作业：写一个注册页面，美观点，然后用vue 进行渲染，要有手机号注册，要有密码，确认密码，
+        要进行 数据严重，手机格式验证，密码6位以上的验证,确认密码于密码一致性的验证 -->
+    <div id="login">
+        <div class="layui-form">
+            <h3>注册页面</h3>
+            <div class="item">
+
+                <label>手机号：</label><input type="text" required @change="phone" id="phone" placeholder="请输入手机号" class="phone">
+            </div>
+            <!-- <div class="item">
+                <label>验证码：</label><input type="number"  placeholder="请输入短信验证码"
+                    v-model="loginForm.code" class="layui-input">
+                <button class="layui-btn" @click="getCode">获取验证码</button>
+            </div> -->
+            <div class="item">
+
+                <label>密码：</label> <input type="password" placeholder="请输入密码" required id="password" @change="password">
+            </div>
+            <div class="item">
+
+                <label>确认密码：</label><input type="password" placeholder="确认密码" required id="password" @change="password">
+            </div>
+            <input type="submit" value="注册" class="submit">
+        </div>
+    </div>
+</body>
+<script>
+    let vm = new Vue({
+        el: '#login',
+        data: {
+            shows: false,
+        },
+        methods: {
+            phone: function() {
+                let phone = document.getElementById('phone').value;
+                let reg = /^1[3-9][0-9]\d{8}$/;
+                console.log(phone);
+                if (!(reg.test(phone))) {
+                    alert('请输入正确的手机号')
+                }
+            },
+            password: function() {
+                let password = document.getElementById('password').value;
+                console.log(password);
+                let reg = /^[a-zA-Z0-9]{6,16}$/;
+                if (!(reg.test(password))) {
+                    alert('请输入含字母和数字的6~16位密码!')
+                }
+            },
+            repassword: function() {
+                let password = document.getElementById('password').value;
+                let repassword = document.getElementById('repassword').value;
+                if (password != repassword) {
+                    alert('密码输入不一致')
+                }
+            }
+        }
+    })
+</script>
+
+</html>
\ No newline at end of file
diff --git "a/\347\216\213\345\207\244\346\254\243/2022.04.01-vue\344\275\234\344\270\232/img/1.jpg" "b/\347\216\213\345\207\244\346\254\243/2022.04.01-vue\344\275\234\344\270\232/img/1.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..339447cf05070329050bf12c14b530009c6936ad
Binary files /dev/null and "b/\347\216\213\345\207\244\346\254\243/2022.04.01-vue\344\275\234\344\270\232/img/1.jpg" differ
diff --git "a/\347\216\213\345\207\244\346\254\243/2022.04.01-vue\344\275\234\344\270\232/img/2.jpg" "b/\347\216\213\345\207\244\346\254\243/2022.04.01-vue\344\275\234\344\270\232/img/2.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..8ed6ebc158ef4caa99d90ad40e867e3ee755ac55
Binary files /dev/null and "b/\347\216\213\345\207\244\346\254\243/2022.04.01-vue\344\275\234\344\270\232/img/2.jpg" differ
diff --git "a/\347\216\213\345\207\244\346\254\243/2022.04.01-vue\344\275\234\344\270\232/img/3.jpg" "b/\347\216\213\345\207\244\346\254\243/2022.04.01-vue\344\275\234\344\270\232/img/3.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..c0bab3b3956c71d8d1cb1d24ab75e0a454957168
Binary files /dev/null and "b/\347\216\213\345\207\244\346\254\243/2022.04.01-vue\344\275\234\344\270\232/img/3.jpg" differ
diff --git "a/\347\216\213\345\207\244\346\254\243/2022.04.01-vue\344\275\234\344\270\232/img/4.jpg" "b/\347\216\213\345\207\244\346\254\243/2022.04.01-vue\344\275\234\344\270\232/img/4.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..4d95327f63f11d2f6ed271c78ef6ca0c39c0b5e8
Binary files /dev/null and "b/\347\216\213\345\207\244\346\254\243/2022.04.01-vue\344\275\234\344\270\232/img/4.jpg" differ
diff --git "a/\347\216\213\345\207\244\346\254\243/2022.04.01-vue\344\275\234\344\270\232/img/5.jpg" "b/\347\216\213\345\207\244\346\254\243/2022.04.01-vue\344\275\234\344\270\232/img/5.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..d1186e1a36bfa6e5a535c816f197f911888c5459
Binary files /dev/null and "b/\347\216\213\345\207\244\346\254\243/2022.04.01-vue\344\275\234\344\270\232/img/5.jpg" differ
diff --git "a/\347\216\213\345\207\244\346\254\243/2022.04.01-vue\344\275\234\344\270\232/img/6.jpg" "b/\347\216\213\345\207\244\346\254\243/2022.04.01-vue\344\275\234\344\270\232/img/6.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..26c55ebb0069177c5ad76ba8a20bc595a2f8365b
Binary files /dev/null and "b/\347\216\213\345\207\244\346\254\243/2022.04.01-vue\344\275\234\344\270\232/img/6.jpg" differ
diff --git "a/\347\216\213\345\207\244\346\254\243/2022.04.01-vue\344\275\234\344\270\232/img/7.jpg" "b/\347\216\213\345\207\244\346\254\243/2022.04.01-vue\344\275\234\344\270\232/img/7.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..8807b867bee0e946cc89c1905916e1c5bf04be49
Binary files /dev/null and "b/\347\216\213\345\207\244\346\254\243/2022.04.01-vue\344\275\234\344\270\232/img/7.jpg" differ
diff --git "a/\347\216\213\345\207\244\346\254\243/2022.04.01-vue\344\275\234\344\270\232/img/8.jpg" "b/\347\216\213\345\207\244\346\254\243/2022.04.01-vue\344\275\234\344\270\232/img/8.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..c8dec588b9876f810d7e1935531d5874fa3ea619
Binary files /dev/null and "b/\347\216\213\345\207\244\346\254\243/2022.04.01-vue\344\275\234\344\270\232/img/8.jpg" differ
diff --git "a/\347\216\213\345\207\244\346\254\243/2022.04.01-vue\344\275\234\344\270\232/\345\225\206\345\223\201\345\210\227\350\241\250\351\241\265.html" "b/\347\216\213\345\207\244\346\254\243/2022.04.01-vue\344\275\234\344\270\232/\345\225\206\345\223\201\345\210\227\350\241\250\351\241\265.html"
new file mode 100644
index 0000000000000000000000000000000000000000..6967ec148348c1c31443f5208a279c0b12508b50
--- /dev/null
+++ "b/\347\216\213\345\207\244\346\254\243/2022.04.01-vue\344\275\234\344\270\232/\345\225\206\345\223\201\345\210\227\350\241\250\351\241\265.html"
@@ -0,0 +1,83 @@
+<!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>商品列表页面</title>
+</head>
+<style>
+    #box ul {
+        display: flex;
+        flex-wrap: wrap;
+    }
+    
+    #box li {
+        padding: 30px;
+        list-style: none;
+        margin-right: 15px;
+        border: 1px solid #ccc;
+    }
+    
+    #box img {
+        width: 200px;
+        height: 150px;
+    }
+</style>
+
+<body>
+    <div id="box">
+        <ul>
+            <li v-for="v in json.list">
+                <img v-bind:src="v.src" alt="">
+                <h4>{{v.des}}</h4>
+                <p>{{v.price}}</p>
+            </li>
+        </ul>
+    </div>
+</body>
+<script>
+    let vue = new Vue({
+        el: '#box',
+        data: {
+            json: {
+                list: [{
+                    src: './img/1.jpg',
+                    des: '粉橙色月季花',
+                    price: 66
+                }, {
+                    src: './img/2.jpg',
+                    des: '牡丹花',
+                    price: 69
+                }, {
+                    src: './img/3.jpg',
+                    des: '康乃馨',
+                    price: 59
+                }, {
+                    src: './img/4.jpg',
+                    des: '向日葵',
+                    price: 66
+                }, {
+                    src: './img/5.jpg',
+                    des: '郁金香',
+                    price: 66
+                }, {
+                    src: './img/6.jpg',
+                    des: '兰花',
+                    price: 66
+                }, {
+                    src: './img/7.jpg',
+                    des: '郁金香',
+                    price: 66
+                }, {
+                    src: './img/8.jpg',
+                    des: '兰花',
+                    price: 66
+                }, ]
+            }
+        }
+    })
+</script>
+
+</html>
\ No newline at end of file
