diff --git "a/\347\216\213\345\207\244\346\254\243/vue\344\275\234\344\270\232/2022.03.29-vue\344\275\234\344\270\232/firstvue.html" "b/\347\216\213\345\207\244\346\254\243/vue\344\275\234\344\270\232/2022.03.29-vue\344\275\234\344\270\232/firstvue.html"
new file mode 100644
index 0000000000000000000000000000000000000000..151e67be82a12ffae9f7988e98d465741ae42873
--- /dev/null
+++ "b/\347\216\213\345\207\244\346\254\243/vue\344\275\234\344\270\232/2022.03.29-vue\344\275\234\344\270\232/firstvue.html"
@@ -0,0 +1,40 @@
+<!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/dist/vue.js"></script>
+</head>
+<body>
+    <!--  作业：写一个vue的页面，把 el，与data的元素都写写，有兴趣的可以看看源码 -->
+    <div id="el">
+        {{message}}<br>
+        {{show}}
+    </div>
+
+</body>
+<script>
+    let vm =new Vue({
+        el:"#el",
+        data:{
+            message:'hello vue',
+            show:'show vue',
+            muilt:{
+                msg:'muilt'
+            }
+        }
+    });
+    console.log(vm.$el);
+    
+    console.log(document.getElementById("el"));
+    console.log(vm.$el===document.getElementById("el"));
+
+    console.log(vm.message);
+    console.log(vm.$data.message);
+
+    vm.$watch('message',function(newVlaue,oldValue){
+        console.log(newValue,oldValue);
+    })
+</script>
+</html>
\ No newline at end of file
diff --git "a/\347\216\213\345\207\244\346\254\243/vue\344\275\234\344\270\232/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/vue\344\275\234\344\270\232/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/vue\344\275\234\344\270\232/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/vue\344\275\234\344\270\232/2022.03.31-vue\344\275\234\344\270\232/img/1.jpg" "b/\347\216\213\345\207\244\346\254\243/vue\344\275\234\344\270\232/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/vue\344\275\234\344\270\232/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/vue\344\275\234\344\270\232/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/vue\344\275\234\344\270\232/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/vue\344\275\234\344\270\232/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/vue\344\275\234\344\270\232/2022.04.01-vue\344\275\234\344\270\232/img/1.jpg" "b/\347\216\213\345\207\244\346\254\243/vue\344\275\234\344\270\232/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/vue\344\275\234\344\270\232/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/vue\344\275\234\344\270\232/2022.04.01-vue\344\275\234\344\270\232/img/2.jpg" "b/\347\216\213\345\207\244\346\254\243/vue\344\275\234\344\270\232/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/vue\344\275\234\344\270\232/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/vue\344\275\234\344\270\232/2022.04.01-vue\344\275\234\344\270\232/img/3.jpg" "b/\347\216\213\345\207\244\346\254\243/vue\344\275\234\344\270\232/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/vue\344\275\234\344\270\232/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/vue\344\275\234\344\270\232/2022.04.01-vue\344\275\234\344\270\232/img/4.jpg" "b/\347\216\213\345\207\244\346\254\243/vue\344\275\234\344\270\232/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/vue\344\275\234\344\270\232/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/vue\344\275\234\344\270\232/2022.04.01-vue\344\275\234\344\270\232/img/5.jpg" "b/\347\216\213\345\207\244\346\254\243/vue\344\275\234\344\270\232/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/vue\344\275\234\344\270\232/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/vue\344\275\234\344\270\232/2022.04.01-vue\344\275\234\344\270\232/img/6.jpg" "b/\347\216\213\345\207\244\346\254\243/vue\344\275\234\344\270\232/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/vue\344\275\234\344\270\232/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/vue\344\275\234\344\270\232/2022.04.01-vue\344\275\234\344\270\232/img/7.jpg" "b/\347\216\213\345\207\244\346\254\243/vue\344\275\234\344\270\232/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/vue\344\275\234\344\270\232/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/vue\344\275\234\344\270\232/2022.04.01-vue\344\275\234\344\270\232/img/8.jpg" "b/\347\216\213\345\207\244\346\254\243/vue\344\275\234\344\270\232/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/vue\344\275\234\344\270\232/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/vue\344\275\234\344\270\232/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/vue\344\275\234\344\270\232/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/vue\344\275\234\344\270\232/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
diff --git "a/\347\216\213\345\207\244\346\254\243/vue\344\275\234\344\270\232/2022.04.06-vue\344\275\234\344\270\232/img/1.jpg" "b/\347\216\213\345\207\244\346\254\243/vue\344\275\234\344\270\232/2022.04.06-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/vue\344\275\234\344\270\232/2022.04.06-vue\344\275\234\344\270\232/img/1.jpg" differ
diff --git "a/\347\216\213\345\207\244\346\254\243/vue\344\275\234\344\270\232/2022.04.06-vue\344\275\234\344\270\232/img/2.jpg" "b/\347\216\213\345\207\244\346\254\243/vue\344\275\234\344\270\232/2022.04.06-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/vue\344\275\234\344\270\232/2022.04.06-vue\344\275\234\344\270\232/img/2.jpg" differ
diff --git "a/\347\216\213\345\207\244\346\254\243/vue\344\275\234\344\270\232/2022.04.06-vue\344\275\234\344\270\232/img/3.jpg" "b/\347\216\213\345\207\244\346\254\243/vue\344\275\234\344\270\232/2022.04.06-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/vue\344\275\234\344\270\232/2022.04.06-vue\344\275\234\344\270\232/img/3.jpg" differ
diff --git "a/\347\216\213\345\207\244\346\254\243/vue\344\275\234\344\270\232/2022.04.06-vue\344\275\234\344\270\232/img/4.jpg" "b/\347\216\213\345\207\244\346\254\243/vue\344\275\234\344\270\232/2022.04.06-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/vue\344\275\234\344\270\232/2022.04.06-vue\344\275\234\344\270\232/img/4.jpg" differ
diff --git "a/\347\216\213\345\207\244\346\254\243/vue\344\275\234\344\270\232/2022.04.06-vue\344\275\234\344\270\232/img/5.jpg" "b/\347\216\213\345\207\244\346\254\243/vue\344\275\234\344\270\232/2022.04.06-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/vue\344\275\234\344\270\232/2022.04.06-vue\344\275\234\344\270\232/img/5.jpg" differ
diff --git "a/\347\216\213\345\207\244\346\254\243/vue\344\275\234\344\270\232/2022.04.06-vue\344\275\234\344\270\232/img/6.jpg" "b/\347\216\213\345\207\244\346\254\243/vue\344\275\234\344\270\232/2022.04.06-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/vue\344\275\234\344\270\232/2022.04.06-vue\344\275\234\344\270\232/img/6.jpg" differ
diff --git "a/\347\216\213\345\207\244\346\254\243/vue\344\275\234\344\270\232/2022.04.06-vue\344\275\234\344\270\232/img/7.jpg" "b/\347\216\213\345\207\244\346\254\243/vue\344\275\234\344\270\232/2022.04.06-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/vue\344\275\234\344\270\232/2022.04.06-vue\344\275\234\344\270\232/img/7.jpg" differ
diff --git "a/\347\216\213\345\207\244\346\254\243/vue\344\275\234\344\270\232/2022.04.06-vue\344\275\234\344\270\232/img/8.jpg" "b/\347\216\213\345\207\244\346\254\243/vue\344\275\234\344\270\232/2022.04.06-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/vue\344\275\234\344\270\232/2022.04.06-vue\344\275\234\344\270\232/img/8.jpg" differ
diff --git "a/\347\216\213\345\207\244\346\254\243/vue\344\275\234\344\270\232/2022.04.06-vue\344\275\234\344\270\232/\345\225\206\345\223\201\350\257\246\346\203\205\351\241\265\346\212\242\350\264\255.html" "b/\347\216\213\345\207\244\346\254\243/vue\344\275\234\344\270\232/2022.04.06-vue\344\275\234\344\270\232/\345\225\206\345\223\201\350\257\246\346\203\205\351\241\265\346\212\242\350\264\255.html"
new file mode 100644
index 0000000000000000000000000000000000000000..a65b6b82a9754c955cad5b339cf485c992377aea
--- /dev/null
+++ "b/\347\216\213\345\207\244\346\254\243/vue\344\275\234\344\270\232/2022.04.06-vue\344\275\234\344\270\232/\345\225\206\345\223\201\350\257\246\346\203\205\351\241\265\346\212\242\350\264\255.html"
@@ -0,0 +1,230 @@
+<!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>
+<!-- # 作业：一.id 的对象语法，去看看为啥id不行，二.写一个商品详情页，
+#       来个抢购倒计时1小时，比方说下单时间离截至时间剩余1小时以外打6折，
+#       过10分钟折扣减少0.5个点(使用计算缓存) -->
+<style>
+    #box ul {
+        display: flex;
+        flex-wrap: wrap;
+    }
+    
+    #box li {
+        position: relative;
+        padding: 30px;
+        list-style: none;
+        margin-right: 15px;
+        border: 1px solid #ccc;
+    }
+    
+    #box img {
+        width: 200px;
+        height: 150px;
+    }
+    
+    .detail {
+        color: white;
+        width: 200px;
+        height: 80px;
+        font-size: 18px;
+        border: 1px solid #ccc;
+        background-color: rgb(175, 172, 172);
+        opacity: 0.89;
+        border-radius: 12px;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+        z-index: 2;
+        top: 60px;
+        margin-left: 210px;
+    }
+    
+    #detail {
+        position: absolute;
+    }
+    
+    h2 {
+        width: 600px;
+        margin: auto;
+        margin-top: 35px;
+        margin-bottom: 40px;
+        font-size: 40px;
+        color: cornflowerblue;
+    }
+    
+    .title {
+        margin-left: 52px;
+        font-size: 36px;
+        font-weight: 700;
+        color: #c00;
+        margin-right: 5px;
+    }
+    
+    .time {
+        background-color: rgb(241, 6, 6);
+        color: #000;
+        margin: 0 2px;
+        padding: 0 5px;
+        border-radius: 3px;
+        font-size: 32px;
+    }
+    
+    .times {
+        margin-bottom: 30px;
+        padding-right: 30px;
+    }
+</style>
+
+
+<body>
+    <h2>一花一世界</h2>
+    <div class="times" id="aa">
+        <span class="title">抢购倒计时</span>
+        <!-- <span class="time">{{day}}</span>天 -->
+        <span class="time">{{hour}}</span>h
+        <span class="time">{{min}}</span>min
+        <span class="time">{{sec}}</span>s
+        <span class="time">全场{{zhe}}折{{count}}</span>
+        <span class="time">原价:{{price}}{{count}}</span>
+        <span class="time">折扣价:{{cost}}{{count}}</span>
+
+    </div>
+    <div id="box">
+        <ul>
+            <li v-for='(v,index) in list'>
+                <img v-bind:src="v.src" alt="" @click="click(index)" @mouseover="ok(index)" @mouseout="no(index)">
+                <div class="des">{{v.des}}</div>
+                <div class="price">{{v.price}}</div>
+                <div class="detail" id="detail" v-show="index===dis">{{v.details}}</div>
+            </li>
+        </ul>
+    </div>
+
+</body>
+<script>
+    let vue = new Vue({
+        el: '#box',
+        data: {
+
+            dis: -1,
+            list: [{
+                src: './img/1.jpg',
+                des: '粉橙色月季花',
+                price: "￥52",
+                details: '花语是纯洁、希望、永恒'
+            }, {
+                src: './img/2.jpg',
+                des: '牡丹花',
+                price: "￥52",
+                details: '花语是圆满、浓情、富贵、吉祥、幸福、雍容华贵、国色天香'
+            }, {
+                src: './img/3.jpg',
+                des: '康乃馨',
+                price: "￥52",
+                details: '花语是热情、魅力、母亲我爱你、温馨的祝福、浓郁的亲情、伟大'
+            }, {
+                src: './img/4.jpg',
+                des: '向日葵',
+                price: "￥52",
+                details: '花语是默默守护不求回报的爱情，暗恋的心意'
+            }, {
+                src: './img/5.jpg',
+                des: '郁金香',
+                price: "￥52",
+                details: '花语是博爱、体贴、高雅、富贵、能干、聪颖'
+            }, {
+                src: './img/6.jpg',
+                des: '兰花',
+                price: "￥52",
+                details: '花语是高贵、典雅、美好、贤良、清高、淡泊'
+            }, {
+                src: './img/7.jpg',
+                des: '玫瑰',
+                price: "￥52",
+                details: '花语是美好的爱情，勇敢，爱与美'
+            }, {
+                src: './img/8.jpg',
+                des: '菊花',
+                price: "￥52",
+                details: '花语是高洁、真情和健康'
+            }, ]
+        },
+        methods: {
+            click: function(index) {
+                window.location.href = this.url[index];
+                console.log(this.url[index]);
+            },
+            ok: function(index) {
+                if (this.dis == -1) {
+                    this.dis = index;
+                }
+
+            },
+            no: function(index) {
+                this.dis = -1;
+            }
+        }
+
+    });
+    let time = new Vue({
+        el: '#aa',
+        data: {
+            day: 0,
+            hour: 0,
+            min: 0,
+            sec: 0,
+            zhe: 6,
+            price: 52,
+            btn: null,
+            cost: 31.2
+        },
+
+        mounted() {
+            this.add();
+        },
+        methods: {
+            // 防止数值小于10时，出现一位数
+
+            // 倒计时函数
+            add() {
+                const end = Date.parse(new Date('2022-04-08'))
+                const now = Date.parse(new Date())
+                const S = end - now;
+                // let day = parseInt(S / 1000 / 60 / 60 / 24);
+                let hour = parseInt(S / 1000 / 60 / 60 % 24);
+                let min = parseInt(S / 1000 / 60 % 60);
+                let sec = parseInt(S / 1000 % 60);
+                // this.day = day;
+                this.hour = hour > 9 ? hour : '0' + hour;
+                this.min = min > 9 ? min : '0' + min;
+                this.sec = sec > 9 ? sec : '0' + sec;
+                const that = this;
+                setTimeout(function() {
+                    that.add()
+                }, 3600000);
+            }
+        },
+        computed: {
+            count: function() {
+                this.btn = setInterval(() => {
+                    this.zhe += 0.5;
+                    console.log(this.zhe);
+                    this.cost = this.price * this.zhe * 0.1;
+                    if (this.zhe == 10) {
+                        clearInterval(this.btn);
+                    }
+                }, 1000)
+            }
+        }
+
+    })
+</script>
+
+</html>
\ No newline at end of file
diff --git "a/\347\216\213\345\207\244\346\254\243/vue\344\275\234\344\270\232/2022.04.07-vue\344\275\234\344\270\232/img/1.jpg" "b/\347\216\213\345\207\244\346\254\243/vue\344\275\234\344\270\232/2022.04.07-vue\344\275\234\344\270\232/img/1.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..09a23457497621311929f4870140035b50c7fadc
Binary files /dev/null and "b/\347\216\213\345\207\244\346\254\243/vue\344\275\234\344\270\232/2022.04.07-vue\344\275\234\344\270\232/img/1.jpg" differ
diff --git "a/\347\216\213\345\207\244\346\254\243/vue\344\275\234\344\270\232/2022.04.07-vue\344\275\234\344\270\232/img/\345\244\251\347\251\272.webp" "b/\347\216\213\345\207\244\346\254\243/vue\344\275\234\344\270\232/2022.04.07-vue\344\275\234\344\270\232/img/\345\244\251\347\251\272.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..12470ffe5b65ac5a6c5683d3703a772f646f3534
Binary files /dev/null and "b/\347\216\213\345\207\244\346\254\243/vue\344\275\234\344\270\232/2022.04.07-vue\344\275\234\344\270\232/img/\345\244\251\347\251\272.webp" differ
diff --git "a/\347\216\213\345\207\244\346\254\243/vue\344\275\234\344\270\232/2022.04.07-vue\344\275\234\344\270\232/\350\241\250\345\215\225\346\263\250\345\206\214\351\241\265\351\235\242.html" "b/\347\216\213\345\207\244\346\254\243/vue\344\275\234\344\270\232/2022.04.07-vue\344\275\234\344\270\232/\350\241\250\345\215\225\346\263\250\345\206\214\351\241\265\351\235\242.html"
new file mode 100644
index 0000000000000000000000000000000000000000..fcb4a302f0c41639bde24975b95f353e279638d4
--- /dev/null
+++ "b/\347\216\213\345\207\244\346\254\243/vue\344\275\234\344\270\232/2022.04.07-vue\344\275\234\344\270\232/\350\241\250\345\215\225\346\263\250\345\206\214\351\241\265\351\235\242.html"
@@ -0,0 +1,240 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>注册页面</title>
+  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+    }
+
+
+    body {
+      /* width: 100%; */
+      font-size: 14px;
+      font-family: "宋体";
+      background: url(./img/天空.webp) no-repeat;
+      background-size: cover;
+      background-size: 100%;
+    }
+
+    #login {
+      width: 1210px;
+      height: 100%;
+      margin: 0 auto;
+    }
+
+    .box {
+      margin: 120px auto;
+      width: 520px;
+      height: 390px;
+      background-color: #aec8e6;
+      opacity: 0.7;
+      border-radius: 12px;
+    }
+
+    h3 {
+      font-size: 23px;
+      color: white;
+      padding-top: 20px;
+      text-align: center;
+    }
+
+    .item {
+      margin-top: 20px;
+      margin-left: 69px;
+    }
+
+    .item1 {
+      margin-top: 20px;
+      margin-left: 96px;
+    }
+
+    .i {
+      float: left;
+      width: 5em;
+      margin-right: 1em;
+      height: 100%;
+      text-align: right;
+    }
+
+    .item>input {
+      width: 200px;
+      height: 23px;
+      border: 1px solid white;
+      border-radius: 10px;
+      background-color: thistle;
+      opacity: 0.5;
+      text-align: center;
+    }
+
+    .success {
+      color: green !important;
+    }
+
+    .error {
+      color: red;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="login">
+    <div class="box">
+      <h3>欢迎注册</h3>
+      <div class="item">
+        <label class="i">用户名:</label><input v-model="username" @input="checkusername" placeholder="请输入用户名" />
+        <span :class="usernameclass">{{usernametip}}</span>
+      </div>
+      <div class="item">
+        <label class="i">手机号:</label><input v-model="usertel" @input="checkusertel" placeholder="请输入手机号" />
+        <span :class="usertelclass">{{userteltip}}</span>
+      </div>
+      <div class="item">
+        <label class="i">密码:</label><input v-model="userpwd" @input="checkuserpwd" placeholder="请输入密码" />
+        <span :class="userpwdclass" v-html="userpwdtip"></span>
+      </div>
+      <div class="item">
+        <label class="i">确认密码：</label><input v-model="userpwds" @input="checkuserpwds" placeholder="确认密码">
+        <span :class="userpwdsclass" v-html="userpwdstip"></span>
+      </div>
+      <div class="item1"> <label>性别:&nbsp;&nbsp;</label>
+        <input type="radio" id="male" value="male" v-model="sex">
+        <label for="male">男</label>&nbsp;&nbsp;&nbsp;
+        <input type="radio" id="female" value="female" v-model="sex">
+        <label for="female">女</label></div>
+      <div class="item1"><label>职业:</label>
+        <select v-model="work">
+          <option disabled value="">请选择</option>
+          <option>学生</option>
+          <option>工作</option>
+          <option>其他</option>
+        </select></div>
+      <div class="item1">
+        <button @click="submit">验证</button>
+      </div>
+
+    </div>
+  </div>
+</body>
+<script>
+  new Vue({
+    el: "#login",
+    data: {
+      username: "",
+      usernametip: "",
+      usernamereg: /^[a-z_$][0-9a-z_$]{5,9}$/i,
+      usernameclass: "error",
+
+      usertel: "",
+      userteltip: "",
+      usertelreg: /^1[3-9][0-9]{9}$/i,
+      usertelclass: "error",
+
+
+      userpwd: "",
+      userpwdtip: "",
+      userpwdreg: /^[0-9a-z]{6,12}$/i,
+      userpwdclass: "error",
+
+      userpwds: "",
+      userpwdstip: "",
+      userpwdsreg: "",
+      userpwdsclass: "error",
+
+      sex: '',
+      work: '',
+
+
+    },
+    methods: {
+      submit() {
+        //所有的验证是否都通过
+        if (
+          this.usernameclass == "success" &&
+          this.userpwdclass == "success" &&
+          this.userpwdsclass == "success" &&
+          this.usertelclass == "success"
+        ) {
+          alert("验证通过");
+        } else {
+          alert("请检查红色的错误提示");
+        }
+      },
+
+      checkusername() {
+        //检查用户名
+        //正则表达式的验证
+        if (this.usernamereg.test(this.username)) {
+          this.usernametip = "";
+          this.usernameclass = "success";
+        } else {
+          this.usernametip =
+            "用户名只能数字字母_$组成并且不能以数字开头 长度6到10位";
+          this.usernameclass = "error";
+        }
+      },
+      checkusertel() {
+        //检查手机号
+        if (this.usertelreg.test(this.usertel)) {
+          this.userteltip = "";
+          this.usertelclass = "success";
+        } else {
+          this.userteltip = "请输入常用的11位手机号";
+          this.usertelclass = "error";
+        }
+      },
+
+      checkuserpwd() {
+        //验证密码
+        //第一步  验证格式是否合法
+        if (this.userpwdreg.test(this.userpwd)) {
+          // this.userpwdtip = "√";
+          // this.userpwdclass = "success";
+          //这里都是格式合法的
+          let numCount = /[0-9]/.test(this.userpwd); //测试出里面有数字结果就是true
+          let lowerCount = /[a-z]/.test(this.userpwd); //测试是否有小写
+          let uppwerCount = /[A-Z]/.test(this.userpwd); //测试是否有大写
+
+          switch (
+          numCount +
+          lowerCount +
+          uppwerCount //求三个的和
+          ) {
+            case 1:
+              this.userpwdtip = `<button style="width:50px;">弱</button>`;
+              break;
+            case 2:
+              this.userpwdtip = `<button style="width:100px;">中</button>`;
+              break;
+            case 3:
+              this.userpwdtip = `<button style="width:150px;">强</button>`;
+              break;
+          }
+          this.userpwdclass = "success";
+        } else {
+          this.userpwdtip = "密码只能数字字母组成长度6到12位";
+          this.userpwdclass = "error";
+        }
+      },
+      checkuserpwds() {
+        //验证密码
+        //第一步  验证格式是否合法
+        if (this.userpwd != this.userpwds) {
+          this.userpwdstip = "密码不一样";
+          this.userpwdsclass = "error";
+        } else {
+          this.userpwdstip = "";
+          this.userpwdsclass = "success";
+        }
+      }
+    },
+  });
+</script>
+
+</html>
\ No newline at end of file
diff --git "a/\347\216\213\345\207\244\346\254\243/vue\344\275\234\344\270\232/2022.04.08-vue\344\275\234\344\270\232/demo.html" "b/\347\216\213\345\207\244\346\254\243/vue\344\275\234\344\270\232/2022.04.08-vue\344\275\234\344\270\232/demo.html"
new file mode 100644
index 0000000000000000000000000000000000000000..db7dd4309ce8340951cb01768d452a8efb91fb69
--- /dev/null
+++ "b/\347\216\213\345\207\244\346\254\243/vue\344\275\234\344\270\232/2022.04.08-vue\344\275\234\344\270\232/demo.html"
@@ -0,0 +1,65 @@
+<!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>
+    <style type="text/css" media="screen">
+        #app {
+            width: 1024px;
+            height: 1024px;
+        }
+    </style>
+</head>
+
+<body>
+    <h3>自定义指令</h3>
+    <div id="app" v-changebackgroundcolor="color">
+        <h3>
+            <input type="text" v-model="color" placeholder="请输入16进制颜色">
+        </h3>
+    </div>
+</body>
+<script>
+    new Vue({
+        el: "#app",
+        data: {
+            color: "#5FCA34",
+        },
+        methods: {
+            getRandom: function() {
+                var r = Math.floor(Math.random() * 256);
+                var g = Math.floor(Math.random() * 256);
+                var b = Math.floor(Math.random() * 256);
+                var a = Math.random().toFixed(1);
+                return `rgba(${r},${g},${b},${b})`
+            }
+        },
+        directives: {
+            changebackgroundcolor: {
+                bind: function(el, bindings) {
+                    var r = Math.floor(Math.random() * 256);
+                    var g = Math.floor(Math.random() * 256);
+                    var b = Math.floor(Math.random() * 256);
+                    var a = Math.random().toFixed(1);
+
+                    el.style.backgroundColor = `rgba(${r},${g},${b},${a})`;
+                    console.log("绑定成功");
+                },
+                update: function(el, bindings) {
+                    console.log('已更新数据');
+                    var r = Math.floor(Math.random() * 256);
+                    var g = Math.floor(Math.random() * 256);
+                    var b = Math.floor(Math.random() * 256);
+                    var a = Math.random().toFixed(1);
+                    el.style.background = `rgba(${r},${g},${b},${a})`
+                },
+
+            }
+        }
+    });
+</script>
+
+</html>
\ No newline at end of file
diff --git "a/\347\216\213\345\207\244\346\254\243/vue\344\275\234\344\270\232/2022.04.08-vue\344\275\234\344\270\232/\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244.html" "b/\347\216\213\345\207\244\346\254\243/vue\344\275\234\344\270\232/2022.04.08-vue\344\275\234\344\270\232/\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244.html"
new file mode 100644
index 0000000000000000000000000000000000000000..78a311cf71fa585b9189bcf82d9b843d4b953cc7
--- /dev/null
+++ "b/\347\216\213\345\207\244\346\254\243/vue\344\275\234\344\270\232/2022.04.08-vue\344\275\234\344\270\232/\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244.html"
@@ -0,0 +1,42 @@
+<!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>
+
+<body>
+    <div id="main" v-change_color="color">
+        <input type="text">
+        <div>
+            <div>我是子元素</div>
+        </div>
+    </div>
+</body>
+<script>
+    let vue = new Vue({
+        el: '#main',
+        data: {
+            color: 'pink'
+        },
+        directives: {
+            change_color: { //指令名不能写驼峰
+                bind(el, binding) {
+                    console.log(el.parentNode)
+                },
+                // 指令的定义
+                inserted(el, binding) {
+                    el.class = 'hhh'
+                    el.style.background = binding.value;
+                    el.style.height = 1024 + "px";
+                },
+            }
+        },
+
+    })
+</script>
+
+</html>
\ No newline at end of file
diff --git "a/\347\216\213\345\207\244\346\254\243/vue\344\275\234\344\270\232/2022.04.12-vue\344\275\234\344\270\232/\351\232\220\350\227\217\346\230\276\347\244\272.html" "b/\347\216\213\345\207\244\346\254\243/vue\344\275\234\344\270\232/2022.04.12-vue\344\275\234\344\270\232/\351\232\220\350\227\217\346\230\276\347\244\272.html"
new file mode 100644
index 0000000000000000000000000000000000000000..708fe69157130ab32e6f119c99b8a3627e94d4f0
--- /dev/null
+++ "b/\347\216\213\345\207\244\346\254\243/vue\344\275\234\344\270\232/2022.04.12-vue\344\275\234\344\270\232/\351\232\220\350\227\217\346\230\276\347\244\272.html"
@@ -0,0 +1,31 @@
+<!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>Document</title>
+</head>
+<body>
+    <!-- 自定义一个组件，实现 按钮点击后，div 区块的显示与隐藏 -->
+        
+    <div id="app">
+        <button @click="showCont">隐藏显示</button>
+        <div v-if="show">hello world</div>
+    </div>
+</body>
+<script>
+    var app = new Vue({
+        el:"#app",
+        data:{
+            show:true
+        },
+        methods:{
+            showCont:function(){
+                this.show = !this.show;
+            }
+        }
+    })
+
+</script>
+</html>
\ No newline at end of file
diff --git "a/\347\216\213\345\207\244\346\254\243/vue\344\275\234\344\270\232/2022.04.13-vue\344\275\234\344\270\232/\345\261\200\351\203\250\347\273\204\344\273\266.html" "b/\347\216\213\345\207\244\346\254\243/vue\344\275\234\344\270\232/2022.04.13-vue\344\275\234\344\270\232/\345\261\200\351\203\250\347\273\204\344\273\266.html"
new file mode 100644
index 0000000000000000000000000000000000000000..39db0e4ee2f3f361c827585d9e3216858ec90dd4
--- /dev/null
+++ "b/\347\216\213\345\207\244\346\254\243/vue\344\275\234\344\270\232/2022.04.13-vue\344\275\234\344\270\232/\345\261\200\351\203\250\347\273\204\344\273\266.html"
@@ -0,0 +1,44 @@
+<!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/dist/vue.js"></script>
+    <title>局部组件</title>
+</head>
+<style>
+    li{
+        list-style: none;
+        display: flex;
+        width: 360px; 
+        height: 100px;
+        background-color: papayawhip;
+    }
+</style>
+<body>
+    <!-- 作业定义一个局部组件，实现商品遍历，数据在普通实例中 -->
+    <h1>小米商城</h1>
+    <div id="app">
+        <goods v-for="arr in arrs" :arr="arr" ></goods>
+    </div>
+</body>
+<script>
+    let goods = {
+        props:['arr'],
+        template:'<li> <img :src="arr.img">商品： {{arr.name}}  <br> 类型：{{arr.actor}}  </li>'
+    }
+    new Vue({
+        el:'#app',
+        data:{
+            arrs:[
+            {name:"Xiaomi 12 Pro",actor:"Xiaomi",img:'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/02ac31f8d3848f71617e074e8e50879e.png?thumb=1&w=160&h=110&f=webp&q=90'},
+            {name:"Xiaomi 12",actor:"Xiaomi",img:'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/34eec49ce46adcd4739e60a2b56062fc.png?thumb=1&w=160&h=110&f=webp&q=90'},
+            {name:"Xiaomi 12X",actor:"Xiaomi",img:'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/075d45f17b32b39c98be850a5592bbee.png?thumb=1&w=160&h=110&f=webp&q=90'},
+            {name:"Xiaomi Civi",actor:"Xiaomi",img:'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8cad77bda138fd94eadbc2ddfced7c56.png?thumb=1&w=160&h=110&f=webp&q=90'}]
+        },
+        components:{
+            goods,
+        }
+    })
+</script>
+</html>
\ No newline at end of file
diff --git "a/\347\216\213\345\207\244\346\254\243/vue\344\275\234\344\270\232/2022.04.14-vue\344\275\234\344\270\232/\345\265\214\345\245\227\347\273\204\344\273\266.html" "b/\347\216\213\345\207\244\346\254\243/vue\344\275\234\344\270\232/2022.04.14-vue\344\275\234\344\270\232/\345\265\214\345\245\227\347\273\204\344\273\266.html"
new file mode 100644
index 0000000000000000000000000000000000000000..c688fdc6f7c922dc3ecf1f7e04b28b1bbbfc6222
--- /dev/null
+++ "b/\347\216\213\345\207\244\346\254\243/vue\344\275\234\344\270\232/2022.04.14-vue\344\275\234\344\270\232/\345\265\214\345\245\227\347\273\204\344\273\266.html"
@@ -0,0 +1,165 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
+    <title>嵌套组件</title>
+
+    <style>
+        .main {
+            clear: both;
+            margin-top: 20px
+        }
+
+        .catalog {
+            margin: 120px 0 0 100px;
+            width: 200px;
+            float: left;
+            text-align: center;
+
+        }
+
+        .product {
+            width: 715px;
+            height: 300px;
+            margin-top: 0px;
+            margin-left: 360px;
+            padding-bottom: 66px;
+            background-color: bisque;
+        }
+
+        li {
+            FONT-WEIGHT: 600;
+            list-style: none;
+            width: 222px;
+            margin-top: 60px;
+            text-align: center;
+            float: left;
+        }
+
+        .ctalog-item {
+            height: 50px;
+            line-height: 50px;
+            margin-bottom: 2px;
+            background-color: rgb(161, 159, 159);
+        }
+    </style>
+</head>
+
+<body>
+    <!-- 作业：写一个嵌套组件，商品目录组件嵌套商品（图片，价格，商品名 ......）组件，数据在 vm 实例中 -->
+    <div id="app">
+        <app :catalogs="catalogs" :products="products"><span>hot!</span></app>
+    </div>
+</body>
+<script>
+
+
+    let product = {
+        props: ['product'],
+        template: "<li><img :src='product.img' width='100%'>{{product.name}}{{product.price}}</li>",
+    }
+
+    let catalog = {
+        data: function () {
+            return { catid: 0 }
+        },
+        methods: {
+            catshow: function () {
+                this.show = !this.show
+            }
+        },
+        props: ['catalog'],
+        template: "<div >{{catalog.name}}</div>",
+        components: {
+
+        }
+    }
+
+
+    let app = {
+        methods: {
+            choicecat: function (i) {// 事件里直接写上 函数名即可 v-on:click="choicecat" 也可以传递参数  v-on:click="choicecat（参数）"
+                this.catid = i
+            }
+        },
+        data: function () {
+            return { catid: 1 }
+        },
+        props: ['catalogs', 'products'],
+        template: "<div class='main'>" +// 只能由一个根元素
+            "<div class='catalog' ><catalog  class='ctalog-item' v-for='catalog in catalogs' :catalog='catalog'  @click.native='choicecat(catalog.id)'></catalog></div><ul class='product'  >" +
+            "<product v-for='product in products' :product='product'  v-show='(catid==product.cid)'></product>" +
+            "</ul></div>",//组件里面要使用方法加上修饰符 .native
+        components: {
+            catalog,
+            product,
+        }
+    }
+
+    new Vue({
+        el: "#app",
+        data: {
+            catalogs: [
+                {
+                    name: '手机',
+                    id: 1,
+                    img: ''
+                },
+                {
+                    name: '电视',
+                    id: 2,
+                    img: '',
+                }
+            ],
+            products: [
+                {
+                    cid: 1,
+                    name: '黑鲨5 Pro  ',
+                    price: '4699 元',
+                    img: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1648539027.11133390.png'
+                },
+                {
+                    cid: 1,
+                    name: 'Redmi K50 电竞版  ',
+                    price: '3899 元',
+                    img: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1644895162.54098125.png'
+                },
+                {
+                    cid: 1,
+                    name: 'Xiaomi 12 Pro  ',
+                    price: '5399 元',
+                    img: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1640680536.47346782.png'
+                },
+                {
+                    cid: 2,
+                    name: 'Redmi智能电视X65 2022款  ',
+                    price: '3399 元',
+                    img: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1634637922.04175457.jpg'
+                },
+                {
+                    cid: 2,
+                    name: '小米电视 ES75 2022款  ',
+                    price: '5499元',
+                    img: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1634637922.04175457.jpg'
+                },
+                {
+                    cid: 2,
+                    name: '小米电视6 至尊版 55英寸  ',
+                    price: '5499元',
+                    img: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1634637922.04175457.jpg'
+                },
+            ],
+        },
+
+        components: {
+            app,
+        }
+    })
+
+</script>
+
+</html>
\ No newline at end of file
diff --git "a/\347\216\213\345\207\244\346\254\243/vue\344\275\234\344\270\232/2022.04.15-vue\344\275\234\344\270\232/\346\217\222\346\247\275.html" "b/\347\216\213\345\207\244\346\254\243/vue\344\275\234\344\270\232/2022.04.15-vue\344\275\234\344\270\232/\346\217\222\346\247\275.html"
new file mode 100644
index 0000000000000000000000000000000000000000..29a649fd1e8213a4e2e4f6f8394ccd6a67aa4062
--- /dev/null
+++ "b/\347\216\213\345\207\244\346\254\243/vue\344\275\234\344\270\232/2022.04.15-vue\344\275\234\344\270\232/\346\217\222\346\247\275.html"
@@ -0,0 +1,171 @@
+<!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/dist/vue.js"></script>
+    <title>slot插槽</title>
+    <style>
+        .main {
+            clear: both;
+            margin-top: 20px
+        }
+
+        .catalog {
+            width: 300px;
+            float: left;
+            text-align: center;
+            background: grey;
+            height: 70px;
+            line-height: 70px;
+            margin-bottom: 2px;
+        }
+
+        .product {
+            padding-top: 20px;
+            width: 650px;
+            height: 222px;
+            margin-left: 360px;
+            padding-bottom: 36px;
+            background-color: bisque;
+        }
+
+        li {
+            list-style: none;
+            width: 200px;
+            height: 216px;
+            float: left;
+        }
+    </style>
+</head>
+
+
+<body>
+    <!-- 作业,es2015模块，回顾下，没学预习下, 在上一节课基础之上使用 slot插槽 为不同的目录，添加不同的背景图片-->
+    <div id="app">
+        <app :app="catalogs[0]"></app>
+        <app :app="catalogs[1]"><img 
+            src='https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0a1ae5341d2dae66cd42566c60d2d666.png?thumb=1&w=160&h=110&f=webp&q=90' />
+        </app>
+        <app :app="catalogs[2]"><img 
+            src='https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/4732fb7e6c170d1438a4554bb702e7ca.png?thumb=1&w=160&h=110&f=webp&q=90 ' />
+        <img width="100px" src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1628600350.1553788.png">
+        </app>
+    </div>
+
+</body>
+<script>
+    let product = {
+        props: ['product'],
+        template: "<li><img :src='product.img' width='100%'>{{product.name}}{{product.price}}</li>",
+    }
+
+    let catalog = {
+        data: function () {
+            return { show: true }
+        },
+        methods: {
+            catshow: function () {
+                this.show = !this.show
+            }
+        },
+        props: ['data'],
+
+        template: "<div><div class='catalog' @click='catshow' ><div></div>{{data.name}}</div>" +
+            "<ul class='product' v-if='show' ><product v-for='(product,index) in data.products' :product='product'></product>" +
+            "</ul></div>",
+        components: {
+            product
+        }
+    }
+
+    let app = {
+        props: ['app'],
+        //目录的模板 slot 可以理解为是变量,在 <app></app> 写html 标签即可传递
+        template: "<div class='main'><catalog :data='app'></catalog><slot><img src='https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/087c52d253d9301dff7743d6bf2d0330.png?thumb=1&w=160&h=110&f=webp&q=90' /></slot></div>",
+        components: {
+            catalog
+        }
+    }
+
+    new Vue({
+        el: "#app",
+        data: {
+            catalogs: [
+                {
+                    id: 1,
+                    name: '手机',
+                    products: [
+                        {
+                            name: '黑鲨5 Pro  ',
+                            price: '4699 元',
+                            img: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1648539027.11133390.png'
+                        },
+                        {
+
+                            name: 'Redmi K50 电竞版  ',
+                            price: '3899 元',
+                            img: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1644895162.54098125.png'
+                        },
+                        {
+                            name: 'Xiaomi 12 Pro  ',
+                            price: '5399 元',
+                            img: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1640680536.47346782.png'
+                        }
+                    ]
+                },
+                {
+                    id: 2,
+                    name: '电视',
+                    products: [
+                        {
+                            name: 'Redmi智能电视X65 2022款  ',
+                            price: '3399 元',
+                            img: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1634637922.04175457.jpg'
+                        },
+                        {
+                            name: '小米电视 ES75 2022款  ',
+                            price: '5499元',
+                            img: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1634637922.04175457.jpg'
+                        },
+                        {
+                            name: '小米电视6 至尊版 55英寸  ',
+                            price: '5499元',
+                            img: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1634637922.04175457.jpg'
+                        }
+                    ]
+                },
+                {
+                    id: 3,
+                    name: '笔记本 平板',
+                    products: [
+                        {
+                            name: 'Redmi Book Pro 14 2022  ',
+                            price: '5399 元',
+                            img: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1647320245.05395660.png'
+                        },
+                        {
+                            name: 'Redmi G 2021  ',
+                            price: '5499 元',
+                            img: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1631957457.33064712.jpg'
+                        },
+                        {
+                            name: '小米笔记本 Pro 15 增强版  ',
+                            price: '5999 元',
+                            img: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1629388763.38582634.png'
+                        }
+                    ]
+                }
+            ]
+        },
+        //template:'<app  :data="catalogs" />',
+        components: {
+            app,
+        }
+    })
+
+
+</script>
+
+</html>
\ No newline at end of file
