diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-03-31\347\224\237\345\221\275\345\221\250\346\234\237(\346\263\250\345\206\214\351\241\265\351\235\242)/img/bg4.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-03-31\347\224\237\345\221\275\345\221\250\346\234\237(\346\263\250\345\206\214\351\241\265\351\235\242)/img/bg4.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..c2ebbe9e308a77167106d9149f0ebb4508032ae3
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-03-31\347\224\237\345\221\275\345\221\250\346\234\237(\346\263\250\345\206\214\351\241\265\351\235\242)/img/bg4.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-03-31\347\224\237\345\221\275\345\221\250\346\234\237(\346\263\250\345\206\214\351\241\265\351\235\242)/register.html" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-03-31\347\224\237\345\221\275\345\221\250\346\234\237(\346\263\250\345\206\214\351\241\265\351\235\242)/register.html"
index 3c2dadd774fd79846c9aa21368f856b97ff65d3d..ff9b5848332e75fd7ddef0e0b28958e693cf52df 100644
--- "a/\345\217\266\347\216\211\351\234\236/Vue/2022-03-31\347\224\237\345\221\275\345\221\250\346\234\237(\346\263\250\345\206\214\351\241\265\351\235\242)/register.html"
+++ "b/\345\217\266\347\216\211\351\234\236/Vue/2022-03-31\347\224\237\345\221\275\345\221\250\346\234\237(\346\263\250\345\206\214\351\241\265\351\235\242)/register.html"
@@ -19,8 +19,8 @@
 
         body {
             font-family: "宋体";
-            background: rgb(207, 232, 240);
-            background-size: 100%;
+            background:url(./img/bg4.jpg);
+            background-size: cover;
             color: black;
         }
 
@@ -33,7 +33,7 @@
             height: 38px;
             width: 50px;
             border: 1px solid silver;
-            border-radius: 4px;
+            border-radius: 5px;
             font-size: 16px;
             cursor: pointer;
             margin-left: 10px;
@@ -44,14 +44,16 @@
             padding: 20px 100px;
             border-radius: 20px;
             box-sizing: border-box;
-            margin: 100px auto;
-            background-color: white;
+            margin: 50px 55%;
+            background-color: rgba(255,255,255,0.7);
         }
-        #app h2{
-            color: rgb(150, 208, 231);
+
+        #app h2 {
+            color: #7b6a6a;
             text-align: center;
             margin: 20px 0;
         }
+
         label {
             display: inline-block;
             width: 70px;
@@ -71,6 +73,9 @@
             width: 200px;
             height: 38px;
             border-radius: 4px;
+            outline: none;
+            border: 0;
+            border: 1px solid #b38e8e
         }
 
         textarea {
@@ -87,7 +92,7 @@
             width: 270px;
             height: 38px;
             border-radius: 5px;
-            background: #77d3ea;
+            background: #7b6a6a;
             border: 1px solid silver;
             color: white;
             font-size: 18px;
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-01\345\210\227\350\241\250\344\270\216\345\210\244\346\226\255(\345\225\206\345\223\201\345\210\227\350\241\250)/demo(\345\274\271\347\252\227).html" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-01\345\210\227\350\241\250\344\270\216\345\210\244\346\226\255(\345\225\206\345\223\201\345\210\227\350\241\250)/demo(\345\274\271\347\252\227).html"
index 123b5c046ba9cdfd1f4292819917c1b94d02abcc..dc145958b821a05a563d060f0ea292889686b184 100644
--- "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-01\345\210\227\350\241\250\344\270\216\345\210\244\346\226\255(\345\225\206\345\223\201\345\210\227\350\241\250)/demo(\345\274\271\347\252\227).html"
+++ "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-01\345\210\227\350\241\250\344\270\216\345\210\244\346\226\255(\345\225\206\345\223\201\345\210\227\350\241\250)/demo(\345\274\271\347\252\227).html"
@@ -56,6 +56,23 @@
             line-height: 20px;
             cursor: pointer;
         }
+
+        a {
+            text-decoration: none;
+            color: rgb(82, 78, 78);
+        }
+
+        .details {
+            width: 80px;
+            height: 30px;
+            background-color: #cac2c4;
+            position: absolute;
+            bottom: 20px;
+            right: 0;
+            text-align: center;
+            line-height: 30px;
+            border-radius: 15px 0 0 15px;
+        }
     </style>
 </head>
 
@@ -63,14 +80,15 @@
     <div id="box">
         <ul>
             <!-- 第一种 -->
-            <li v-for="v in json.list" v-on:click="alert(v)">
+            <!-- <li v-for="v in json.list" v-on:click="alert(v)"> -->
 
             <!-- 第二种：通过下标找到list里面被点击的li -->
-            <!-- <li v-for="(v,index) in json.list" v-on:click="alert(index)" :key='index'> -->
+            <li v-for="(v,index) in json.list" :key='index'>
                 <img v-bind:src="v.src" alt="">
                 <h4>{{v.des}}</h4>
                 <p>{{v.price}}</p>
-                <div class="show" v-if="v.isshow">
+                <div class="details" v-on:click="alert(index)"><a href="#">详情</a></div>
+                <div class="show" v-show="v.isshow">
                     <div class="close" v-on:click="close(index)">X</div>
                     <h4>商品简介</h4>
                     {{v.describe}}
@@ -85,7 +103,7 @@
         let vue = new Vue({
             el: "#box",
             data: {
-                isshow:false,
+                isshow: false,
                 json: {
                     list: [
                         {
@@ -136,31 +154,34 @@
             },
             methods: {
                 //第一种
-                alert(e){
-                    // 记录点击那一项的状态
-                    const nowStatus = e.isshow;
-                    // 将每一项列表的isshow设置为false，让所有的列表隐藏
-                    this.json.list.forEach(item => {
-                        item.isshow = false;
-                    });
-                    // 将点击的一项取反
-                    e.isshow =! nowStatus
-                }
-                
-                // 第二种
-                // alert(index) {
-                //     // 将每一项的isShow改为false
+                // alert(e){
+                //     // 记录点击那一项的状态
+                //     const nowStatus = e.isshow;
+                //     // 将每一项列表的isshow设置为false，让所有的列表隐藏
                 //     this.json.list.forEach(item => {
-                //         item.isshow = false
+                //         item.isshow = false;
                 //     });
-                //     this.json.list[index].isshow = true
+                //     // 将点击的一项取反
+                //     e.isshow =! nowStatus
                 // }
+
+                // 第二种
+                alert(index) {
+                    // 将每一项的isShow改为false
+                    this.json.list.forEach(item => {
+                        item.isshow = false
+                    });
+                    this.json.list[index].isshow = true
+                }
                 ,
-               close(index){
-                   this.json.list[index].isshow = false
-                   console.log(this.json.list[index].isshow);
-                   
-               }
+                close(index) {
+                    this.json.list[index].isshow = false
+
+                    // let obj=this.json.list[index];
+                    // obj.isshow=false;
+                    // vue.$set(this.json.list,index,obj)
+
+                }
             }
         })
     </script>
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-06\350\256\241\347\256\227\345\261\236\346\200\247(\345\225\206\345\223\201\350\257\246\346\203\205\345\200\222\350\256\241\346\227\266\346\212\230\346\211\243)/demo.html" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-06\350\256\241\347\256\227\345\261\236\346\200\247(\345\225\206\345\223\201\350\257\246\346\203\205\345\200\222\350\256\241\346\227\266\346\212\230\346\211\243)/demo.html"
new file mode 100644
index 0000000000000000000000000000000000000000..8f7e15b50a72705ba8e1784981a77002406e0489
--- /dev/null
+++ "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-06\350\256\241\347\256\227\345\261\236\346\200\247(\345\225\206\345\223\201\350\257\246\346\203\205\345\200\222\350\256\241\346\227\266\346\212\230\346\211\243)/demo.html"
@@ -0,0 +1,359 @@
+<!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>Document</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+        }
+
+        #box ul {
+            display: flex;
+            flex-wrap: wrap;
+        }
+
+        #box li {
+            position: relative;
+            padding: 3px;
+            list-style: none;
+            margin-right: 15px;
+            border: 1px solid #eee;
+        }
+
+        #box img {
+            width: 200px;
+            height: 150px;
+        }
+
+        .show {
+            position: absolute;
+            top: 40px;
+            left: 25px;
+            width: 150px;
+            height: 200px;
+            border-radius: 10px;
+            background-color: rgb(214, 229, 238);
+            opacity: 0.9;
+            font-size: 14px;
+            padding: 10px;
+            box-sizing: border-box;
+        }
+
+        .show h4 {
+            text-align: center;
+        }
+
+        .close {
+            position: absolute;
+            top: -5px;
+            right: -5px;
+            width: 20px;
+            height: 20px;
+            background-color: rgb(193, 222, 234);
+            border-radius: 10px;
+            text-align: center;
+            line-height: 20px;
+            cursor: pointer;
+        }
+
+        a {
+            text-decoration: none;
+            color: rgb(82, 78, 78);
+        }
+
+        .details {
+            width: 80px;
+            height: 30px;
+            background-color: #cac2c4;
+            position: absolute;
+            bottom: 40px;
+            right: 0;
+            text-align: center;
+            line-height: 30px;
+            border-radius: 15px 0 0 15px;
+        }
+
+        li p {
+            color: rgb(159, 155, 155);
+            font-size: 14px;
+        }
+
+        li h4 {
+            margin: 10px 0;
+        }
+
+        li span {
+            font-size: 14px;
+        }
+
+        li p span {
+            text-decoration: line-through;
+        }
+
+        .time {
+            width: 150px;
+            height: 50px;
+            border-radius: 15px;
+            /* line-height: 40px; */
+            background-color: red;
+            position: absolute;
+            top: 20px;
+            right: 0;
+            font-size: 13px;
+            text-align: center;
+            color: white;
+        }
+
+        .time p {
+            font-size: 20px;
+            color: white;
+        }
+    </style>
+</head>
+
+<body>
+
+    <!-- 二.写一个商品详情页，来个抢购倒计时1小时，比方说下单时间离截至时间剩余1小时以外打6折，过10分钟折扣减少0.5个点(使用计算缓存) -->
+
+    <div id="box">
+        <ul>
+            <!-- 第一种 -->
+            <!-- <li v-for="v in json.list" v-on:click="alert(v)"> -->
+
+            <!-- 第二种：通过下标找到list里面被点击的li -->
+            <li v-for="(v,index) in json.list" :key='index'>
+                <img v-bind:src="v.src" alt="">
+                <h4>{{v.des}}</h4>
+                <p>原价：<span>{{v.price}}</span></p>
+                <span>现价：{{ v.nowprice }}</span>
+                <!-- 详情按钮 -->
+                <div class="details" v-on:click="alert(index)"><a href="#">详情</a></div>
+                <!-- 详情弹窗 -->
+                <div class="show" v-show="v.isshow">
+                    <!-- 详情关闭按钮 -->
+                    <div class="close" v-on:click="close(index)">X</div>
+                    <h4>商品简介</h4>
+                    {{v.describe}}
+                    <br>
+                    {{v.src}}
+                </div>
+                <!-- 抢购倒计时 -->
+                <div class="time">
+                    <span>限时抢购</span>
+                    {{ day }}:
+                    {{ hour }}:
+                    {{ minute }}:
+                    {{ seconds }}
+                    <br>
+                    <p>{{discount }}折!</p>
+                </div>
+            </li>
+        </ul>
+    </div>
+
+    <script>
+        let vue = new Vue({
+            el: "#box",
+            data: {
+                isshow: false,
+                days: 00,
+                hours: 00,
+                minutes: 00,
+                seconds: 00,
+                discounts: 0,
+
+                json: {
+                    list: [
+                        {
+                            src: "img/1.jpg",
+                            des: "爱马仕包包",
+                            price: 9999,
+                            nowprice: 0,
+                            describe: "这是第一个商品的简介",
+                            isshow: false
+                        },
+                        {
+                            src: "img/2.jpg",
+                            des: "代餐奶昔",
+                            price: 199,
+                            nowprice: 0,
+                            describe: "这是第二个商品的简介",
+                            isshow: false
+                        },
+                        {
+                            src: "img/3.jpg",
+                            des: "芒果",
+                            price: 50,
+                            nowprice: 0,
+                            describe: "这是第三个商品的简介",
+                            isshow: false
+                        },
+                        {
+                            src: "img/4.jpg",
+                            des: "葡萄",
+                            price: 49.9,
+                            nowprice: 0,
+                            describe: "这是第四个商品的简介",
+                            isshow: false
+                        },
+                        {
+                            src: "img/5.jpg",
+                            des: "手表",
+                            price: 1999,
+                            nowprice: 0,
+                            describe: "这是第五个商品的简介",
+                            isshow: false
+                        },
+                        {
+                            src: "img/6.jpg",
+                            des: "香水",
+                            price: 399,
+                            nowprice: 0,
+                            describe: "这是第六个商品的简介",
+                            isshow: false
+                        }
+                    ]
+
+                }
+            },
+            methods: {
+                // 弹出详情
+                //第一种
+                // alert(e){
+                //     // 记录点击那一项的状态
+                //     const nowStatus = e.isshow;
+                //     // 将每一项列表的isshow设置为false，让所有的列表隐藏
+                //     this.json.list.forEach(item => {
+                //         item.isshow = false;
+                //     });
+                //     // 将点击的一项取反
+                //     e.isshow =! nowStatus
+                // }
+
+                // 第二种
+                alert(index) {
+                    // 将每一项的isShow改为false
+                    this.json.list.forEach(item => {
+                        item.isshow = false
+                    });
+                    this.json.list[index].isshow = true
+                },
+                // 关闭详情
+                close(index) {
+                    this.json.list[index].isshow = false
+
+                    // let obj=this.json.list[index];
+                    // obj.isshow=false;
+                    // vue.$set(this.json.list,index,obj)
+
+                },
+                // 倒计时
+                timer: function () {
+                    // 定义结束时间戳
+                    const end = Date.parse(new Date('2022-4-7 18:53:00'))
+                    // 定义当前时间戳
+                    const now = Date.parse(new Date())
+
+                    // 用结束时间减去当前时间获得倒计时时间戳
+                    const time = end - now
+                    // 一个小时的时间戳
+                    let beyond = 1 * 60 * 60 * 1000;
+                    // 十分钟的时间戳
+                    let shifen = 10 * 60 * 1000;
+                    // 判断当时间戳大于一个小时的时候都为6折
+                    if (time > beyond) {
+                        this.discounts = 6
+                    } else { 
+                        if (Math.floor(time / shifen) == 5) {
+                            this.discounts = 6.5
+                        }
+                        else if (Math.floor(time / shifen) == 4) {
+                            this.discounts = 7
+                        }
+                        else if (Math.floor(time / shifen) == 3) {
+                            this.discounts = 7.5
+                        }
+                        else if (Math.floor(time / shifen) == 2) {
+                            this.discounts = 8
+                        }
+                        else if (Math.floor(time / shifen) == 1) {
+                            this.discounts = 8.5
+                        }
+                        else if (Math.floor(time / shifen) == 0) {
+                            this.discounts = 9
+                        }
+                    }
+                    // 将现价根据折扣修改 现价等于原价乘以折扣
+                    this.json.list.forEach(item => {
+                        item.nowprice = ((this.discounts / 10) * item.price).toFixed(2)
+                    })
+
+                    // 计算出来之后在computed里面拼接，分钟 小时 天 不会频繁的变化 当计算出来的值没有变化时 就会从缓存里面取
+                    this.days = parseInt(time / 1000 / 60 / 60 / 24) //算出天数
+                    this.hours = parseInt(time / 1000 / 60 / 60 % 24)//算出小时数
+                    this.minutes = parseInt(time / 1000 / 60 % 60)//算出分钟数
+                    // 因为秒数 每一秒都要重新渲染 把他放在computed里面没有意义 所以在这里直接拼接
+                    this.seconds = parseInt(time / 1000 % 60) > 9? parseInt(time / 1000 % 60): '0'+parseInt(time / 1000 % 60)//算出秒数
+
+                    if (time == 0) {
+                        alert("活动结束")
+                    }
+                    // 做判断当倒计时结束时都为0
+                    if (now == end) {
+                        return
+                        this.days = 0,
+                            this.hours = 0,
+                            this.minutes = 0,
+                            this.seconds = 0
+                    }
+                    //定义this指向
+                    const that = this
+                    console.log(that);
+                    // 使用定时器 然后使用递归 让每一次函数能调用自己达到倒计时效果 一秒钟执行timer() 然后重新进入setTimeout 重复上述
+                    setTimeout(function () {
+                        that.timer()
+                    }, 1000)
+                },
+                num: function(n) {
+                   n = n > 9 ? n : '0' + n
+                   return n
+                }
+            },
+
+            mounted() { //完成渲染时执行
+                // 倒计时
+                this.timer();
+            },
+
+            computed: {
+                day: function(){
+                    console.log("1");
+                    return this.num(this.days)
+                },
+                hour: function(){
+                    console.log("2");
+                    return this.num(this.hours)
+                },
+                minute: function () {
+					console.log("1");
+                    return this.num(this.minutes);
+                },
+                discount: function () {
+                    console.log("2");
+                    return this.discounts;
+                },
+                
+                
+            }
+        })
+    </script>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-06\350\256\241\347\256\227\345\261\236\346\200\247(\345\225\206\345\223\201\350\257\246\346\203\205\345\200\222\350\256\241\346\227\266\346\212\230\346\211\243)/img/1.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-06\350\256\241\347\256\227\345\261\236\346\200\247(\345\225\206\345\223\201\350\257\246\346\203\205\345\200\222\350\256\241\346\227\266\346\212\230\346\211\243)/img/1.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..87c813e5817bad879914cd3fe9b39ea44ac267b2
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-06\350\256\241\347\256\227\345\261\236\346\200\247(\345\225\206\345\223\201\350\257\246\346\203\205\345\200\222\350\256\241\346\227\266\346\212\230\346\211\243)/img/1.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-06\350\256\241\347\256\227\345\261\236\346\200\247(\345\225\206\345\223\201\350\257\246\346\203\205\345\200\222\350\256\241\346\227\266\346\212\230\346\211\243)/img/2.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-06\350\256\241\347\256\227\345\261\236\346\200\247(\345\225\206\345\223\201\350\257\246\346\203\205\345\200\222\350\256\241\346\227\266\346\212\230\346\211\243)/img/2.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..99df2688a8a20a92b305073d13a3094c79385a57
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-06\350\256\241\347\256\227\345\261\236\346\200\247(\345\225\206\345\223\201\350\257\246\346\203\205\345\200\222\350\256\241\346\227\266\346\212\230\346\211\243)/img/2.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-06\350\256\241\347\256\227\345\261\236\346\200\247(\345\225\206\345\223\201\350\257\246\346\203\205\345\200\222\350\256\241\346\227\266\346\212\230\346\211\243)/img/3.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-06\350\256\241\347\256\227\345\261\236\346\200\247(\345\225\206\345\223\201\350\257\246\346\203\205\345\200\222\350\256\241\346\227\266\346\212\230\346\211\243)/img/3.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..2d4e8c877f5debaa34c20dbb03a98d16a1ec3ee9
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-06\350\256\241\347\256\227\345\261\236\346\200\247(\345\225\206\345\223\201\350\257\246\346\203\205\345\200\222\350\256\241\346\227\266\346\212\230\346\211\243)/img/3.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-06\350\256\241\347\256\227\345\261\236\346\200\247(\345\225\206\345\223\201\350\257\246\346\203\205\345\200\222\350\256\241\346\227\266\346\212\230\346\211\243)/img/4.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-06\350\256\241\347\256\227\345\261\236\346\200\247(\345\225\206\345\223\201\350\257\246\346\203\205\345\200\222\350\256\241\346\227\266\346\212\230\346\211\243)/img/4.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..a2619abb127456d0298062c002118c35d878a5ce
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-06\350\256\241\347\256\227\345\261\236\346\200\247(\345\225\206\345\223\201\350\257\246\346\203\205\345\200\222\350\256\241\346\227\266\346\212\230\346\211\243)/img/4.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-06\350\256\241\347\256\227\345\261\236\346\200\247(\345\225\206\345\223\201\350\257\246\346\203\205\345\200\222\350\256\241\346\227\266\346\212\230\346\211\243)/img/5.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-06\350\256\241\347\256\227\345\261\236\346\200\247(\345\225\206\345\223\201\350\257\246\346\203\205\345\200\222\350\256\241\346\227\266\346\212\230\346\211\243)/img/5.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..e3ed37064f6c977f122968c98420953257b3b897
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-06\350\256\241\347\256\227\345\261\236\346\200\247(\345\225\206\345\223\201\350\257\246\346\203\205\345\200\222\350\256\241\346\227\266\346\212\230\346\211\243)/img/5.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-06\350\256\241\347\256\227\345\261\236\346\200\247(\345\225\206\345\223\201\350\257\246\346\203\205\345\200\222\350\256\241\346\227\266\346\212\230\346\211\243)/img/6.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-06\350\256\241\347\256\227\345\261\236\346\200\247(\345\225\206\345\223\201\350\257\246\346\203\205\345\200\222\350\256\241\346\227\266\346\212\230\346\211\243)/img/6.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..2a3d696aefe9ea037ad926861f3eff170432fa77
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-06\350\256\241\347\256\227\345\261\236\346\200\247(\345\225\206\345\223\201\350\257\246\346\203\205\345\200\222\350\256\241\346\227\266\346\212\230\346\211\243)/img/6.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-07\347\233\221\345\220\254\345\231\250\344\270\216\350\241\250\345\215\225(\346\263\250\345\206\214\351\241\265\351\235\242)/img/bg4.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-07\347\233\221\345\220\254\345\231\250\344\270\216\350\241\250\345\215\225(\346\263\250\345\206\214\351\241\265\351\235\242)/img/bg4.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..c2ebbe9e308a77167106d9149f0ebb4508032ae3
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-07\347\233\221\345\220\254\345\231\250\344\270\216\350\241\250\345\215\225(\346\263\250\345\206\214\351\241\265\351\235\242)/img/bg4.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-07\347\233\221\345\220\254\345\231\250\344\270\216\350\241\250\345\215\225(\346\263\250\345\206\214\351\241\265\351\235\242)/img/man.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-07\347\233\221\345\220\254\345\231\250\344\270\216\350\241\250\345\215\225(\346\263\250\345\206\214\351\241\265\351\235\242)/img/man.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..2d825f0808ba93d94c73c60817015059ae752ede
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-07\347\233\221\345\220\254\345\231\250\344\270\216\350\241\250\345\215\225(\346\263\250\345\206\214\351\241\265\351\235\242)/img/man.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-07\347\233\221\345\220\254\345\231\250\344\270\216\350\241\250\345\215\225(\346\263\250\345\206\214\351\241\265\351\235\242)/login.html" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-07\347\233\221\345\220\254\345\231\250\344\270\216\350\241\250\345\215\225(\346\263\250\345\206\214\351\241\265\351\235\242)/login.html"
new file mode 100644
index 0000000000000000000000000000000000000000..bc8e936e8d0c7ffdf904399160a7b2fa6565e8ea
--- /dev/null
+++ "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-07\347\233\221\345\220\254\345\231\250\344\270\216\350\241\250\345\215\225(\346\263\250\345\206\214\351\241\265\351\235\242)/login.html"
@@ -0,0 +1,142 @@
+<!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.6.14/dist/vue.js"></script>
+    <title>Document</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+        }
+
+        a {
+            text-decoration: none;
+            font-size: 12px;
+            color: white;
+            float: right;
+            margin: -20px 20px 0 0;
+        }
+
+        body {
+            font-family: "宋体";
+            background-size: 100%;
+            background-color: rgb(207, 232, 240);
+        }
+
+        #app {
+            width: 300px;
+            height: 350px;
+            margin: 100px auto;
+            text-align: center;
+            background: rgba(172, 179, 180, 0.6);
+            border-radius: 10px;
+            padding: 20px 0 0 0;
+            box-sizing: border-box;
+        }
+
+        .title {
+            line-height: 50px;
+            color: rgb(71, 85, 91);
+            border-bottom: 1px solid silver;
+        }
+
+        .inner {
+            margin-top: 50px;
+        }
+
+        input {
+            width: 170px;
+            height: 34px;
+            border-radius: 5px;
+            color: black;
+            outline: none;
+            border: 0;
+        }
+
+        span {
+            font-size: 12px;
+            color: silver;
+            margin-left: -80px;
+        }
+
+        button {
+            width: 170px;
+            height: 36px;
+            border-radius: 5px;
+            background: #a6d6e3;
+            border: 1px solid silver;
+            color: white;
+            font-size: 18px;
+            margin-top: -10px;
+            cursor: pointer;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="app">
+        <h2 class="title">登录</h2>
+        <div class="inner">
+            <input type="text" placeholder="请输入用户名" v-model="userIn.user"><br>
+            <span>{{ usertishi }}</span><br>
+            <input type="password" placeholder="请输入密码" v-model="userIn.pass" @keyup.enter="login()"><br>
+            <span>{{ passtishi }}</span><br>
+            <span>{{ tishi }}</span><br>
+        </div>
+        <a href="./register.html">没有账号？点击注册</a><br>
+        <button type="button" @click="login()" id="login">登录</button>
+        <h3 v-show="isShow">{{Info}}</h3>
+    </div>
+
+    <script>
+        var vm = new Vue({
+            el: '#app',
+            data: {
+                isShow: false,
+                Info: localStorage.getItem("userArr"),
+                usertishi: '',
+                passtishi: '',
+                tishi: '',
+                userIn: {
+                    user: '',
+                    pass: '',
+                },
+
+            },
+            methods: {
+                login() {
+                    this.usertishi = '';
+                    this.passtishi = ''
+                    //用户名随意
+                    var obj = JSON.parse(this.Info);
+                    /*console.log(obj[0])//去数组里的第一组数据*/
+                    if (!this.userIn.user) { this.usertishi = '用户名不能为空'; }
+                    //判断注册的数组中是否能找到输入的用户名
+                    var testList = obj.find((item) => { return this.userIn.user === item.username });
+                    if (!testList) this.usertishi = '用户名不存在';
+                    //密码
+                    if (!this.userIn.pass) {
+                        this.passtishi = '密码不能为空';
+                    }
+                    //判断输入的密码是否为输入的用户名的密码
+                    var testpass = obj.find((item) => { return this.userIn.pass === item.password && this.userIn.user === item.username });
+                    /*console.log(testpass)*/
+                    if (!testpass) this.passtishi = '密码不正确';
+                    if (this.usertishi || this.passtishi) return;
+
+                    userInfo = JSON.stringify(testpass)//把内容转换成字符串形式
+
+                    localStorage.setItem('userInfo', userInfo);
+                    window.location.href = './success.html';
+
+                }
+            }
+        })
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-07\347\233\221\345\220\254\345\231\250\344\270\216\350\241\250\345\215\225(\346\263\250\345\206\214\351\241\265\351\235\242)/register.html" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-07\347\233\221\345\220\254\345\231\250\344\270\216\350\241\250\345\215\225(\346\263\250\345\206\214\351\241\265\351\235\242)/register.html"
new file mode 100644
index 0000000000000000000000000000000000000000..7fdc343ff5797147a590aca86733cd6d3a2788f5
--- /dev/null
+++ "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-07\347\233\221\345\220\254\345\231\250\344\270\216\350\241\250\345\215\225(\346\263\250\345\206\214\351\241\265\351\235\242)/register.html"
@@ -0,0 +1,341 @@
+<!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>
+    <style>
+        * {
+            margin: 0px;
+            padding: 0px;
+        }
+
+        a {
+            color: black;
+            text-decoration: none;
+        }
+
+        body {
+            font-family: "宋体";
+            background: url(./img/bg4.jpg);
+            background-size: cover;
+            color: black;
+        }
+
+        .now_login {
+            font-size: 14px;
+            float: right;
+        }
+
+        .btd_login {
+            height: 38px;
+            width: 50px;
+            border-radius: 5px;
+            font-size: 16px;
+            cursor: pointer;
+            margin-left: 10px;
+            background-color: #7b6a6a;
+            border: 0;
+            color: white;
+            font-size: 14px;
+        }
+
+        #app1 {
+            width: 500px;
+            padding: 20px 100px;
+            border-radius: 20px;
+            box-sizing: border-box;
+            margin: 50px 55%;
+            background-color: rgba(255, 255, 255, 0.7);
+        }
+
+        #app h2 {
+            color: #7b6a6a;
+            text-align: center;
+            margin: 20px 0;
+        }
+
+        label {
+            display: inline-block;
+            width: 70px;
+            height: 38px;
+            text-align: justify;
+            text-align-last: justify;
+            margin-right: 10px;
+        }
+
+        .tiShi {
+            font-size: 12px;
+            color: red;
+            margin: 0 0 10px 70px;
+        }
+
+        .input {
+            width: 200px;
+            height: 38px;
+            border-radius: 4px;
+            outline: none;
+            border: 0;
+            border: 1px solid #b38e8e
+        }
+
+        textarea {
+            resize: none;
+            border-radius: 4px;
+        }
+
+        .checkbox {
+            font-size: 14px;
+            margin-left: 20px;
+        }
+
+        #btd {
+            width: 270px;
+            height: 38px;
+            border-radius: 5px;
+            background: #7b6a6a;
+            border: 1px solid silver;
+            color: white;
+            font-size: 18px;
+            cursor: pointer;
+            margin-top: 10px;
+            margin-left: 13px;
+        }
+
+        #successful {
+            width: 300px;
+            height: 200px;
+            border: 1px solid silver;
+            position: fixed;
+            left: 50%;
+            bottom: 50%;
+            background: #D8D8D8;
+            display: none;
+            margin-left: -150px;
+        }
+
+        #btn {
+            width: 50px;
+            height: 30px;
+            display: inline-block;
+            float: right;
+            margin-right: 15px;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="app">
+        <div id="successful">
+            <h3 style="text-align: center;margin-top: 80px;margin-bottom: 40px;">注册成功，快去登录吧!</h3>
+            <button id="btn" @click="close">取消</button>
+            <button id="btn" @click="login">登录</button>
+        </div>
+        <div class="now_login">我已注册，现在就<button class="btd_login">登录</button></div>
+        <div id="app1">
+            <h2>注册页面</h2>
+            <label>用户名</label><input type="text" placeholder="请设置用户名" class="input" v-model.lazy="userInfo.user"><br>
+            <span class="tiShi">{{ tiShi.tishi1 }}</span><br>
+            <label>设置密码</label><input type="password" placeholder="请设置登录密码" class="input" v-model.lazy="userInfo.password1"><br>
+            <span class="tiShi">{{ tiShi.tishi2 }}</span><br>
+            <label>确认密码</label><input type="password" class="input" v-model.lazy="userInfo.password2"><br>
+            <span class="tiShi">{{ tiShi.tishi3}}</span><br>
+            <label>真实姓名</label><input type="text" class="input" v-model.lazy="userInfo.name"><br>
+            <span class="tiShi">{{ tiShi.tishi4}}</span><br>
+            <label>手机号</label><input type="text" placeholder="请输入手机号码" class="input" v-model.lazy="userInfo.num"><br>
+            <span class="tiShi">{{ tiShi.tishi5}}</span><br>
+            <label>家庭住址</label><textarea rows="5" cols="26" placeholder="请输入您的家庭住址" v-model.lazy="userInfo.address"></textarea><br>
+            <span class="tiShi">{{ tiShi.tishi6}}</span><br>
+            <div class="checkbox"><input type="checkbox" style="margin-right: 10px;" v-model="userInfo.checkbox">阅读并接受<a href="">《xxx用户协议》</a></div>
+            <button id="btd" @click="flag" :disabled="btn">立即注册</button>
+        </div>
+    </div>
+    <script>
+
+        var vm = new Vue({
+            el: '#app',
+            data: {
+                // isReturn: false,
+                btn: false,
+                tiShi: {
+                    tiShi1: '',
+                    tishi2: '',
+                    tishi3: '',
+                    tishi4: '',
+                    tishi5: '',
+                    tishi6: '',
+                },
+                userInfo: {
+                    user: '',
+                    password1: '',
+                    password2: '',
+                    num: '',
+                    name: '',
+                    address: '',
+                    checkbox: true,
+                },
+                userArr: []
+            },
+            methods:{
+                flag() {
+                    //alert(1)
+                    this.tiShi.tishi1 = '';
+                    this.tiShi.tishi2 = '';
+                    this.tiShi.tishi3 = '';
+                    this.tiShi.tishi4 = '';
+                    this.tiShi.tishi5 = '';
+                    this.tiShi.tishi6 = '';
+                    this.isReturn = false;
+                    //用户名
+                    var a = /^[a-z]+$/;//小写字母组成
+                    if (!this.userInfo.user) {
+                        this.tiShi.tishi1 = '用户名不能为空';
+                        this.isReturn = true;
+                    }
+                    else if (!a.test(this.userInfo.user)) {
+                        this.isReturn = true;
+                        this.tiShi.tishi1 = "由小写字母组成"
+                    }
+                    if (window.localStorage.userArr) {
+                        // JSON.parse()可以把JSON规则的字符串转换为JSONObject
+                        var array = JSON.parse(window.localStorage.userArr);
+                    } else { array = [] }
+                    //遍历数组进行匹配
+                    for (var i = 0; i < array.length; i++) {
+                        //判断是否有相同账号
+                        console.log(array)
+                        /*alert(array[i].username)*/
+                        if (this.userInfo.user == array[i].username) {
+                            alert('该账号已存在');
+                            /*this.tiShi.tiShi1='该账号已存在';*/
+                            return;
+                        }
+                    }
+
+                    //字母开头 ，由字母+数字组成
+                    var p = /[a-zA-Z]\w[z0-9]/;
+                    if (!this.userInfo.password1) {
+                        this.isReturn = true;
+                        this.tiShi.tishi2 = '密码不能为空';
+                    }
+                    else if (!p.test(this.userInfo.password1)) {
+                        this.isReturn = true;
+                        this.tiShi.tishi2 = "由字母+数字组成，字母开头"
+                    }
+                    //确认密码
+                    if (!this.userInfo.password2) {
+                        this.isReturn = true;
+                        this.tiShi.tishi3 = '密码不能为空';
+                    }
+                    else if (!p.test(this.userInfo.password2)) {
+                        this.isReturn = true;
+                        this.tiShi.tishi3 = "由字母+数字组成，以字母开头"
+                    }
+                    if (this.userInfo.password1 != this.userInfo.password2) {
+                        this.isReturn = true;
+                        this.tiShi.tishi3 = '两次密码不一致';
+                    }
+                    //姓名
+                    if (!this.userInfo.name) this.tiShi.tishi4 = '姓名不能为空'; this.isReturn = true;
+                    //手机号
+                    var n = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/
+                    if (!this.userInfo.num) {
+                        this.tiShi.tishi5 = '手机号不能为空';
+                        this.isReturn = true;
+                    }
+                    else if (!n.test(this.userInfo.num)) { this.tiShi.tishi5 = '手机号码格式不正确'; this.isReturn = true; }
+                    //家庭住址
+                    if (!this.userInfo.address) { this.tiShi.tishi6 = '请输入您的家庭住址'; this.isReturn = true; }
+                    //同意协议
+                    if (this.userInfo.checkbox != true) { this.btn = false; alert('是否同意该协议'); this.isReturn = true; return }
+                    //如果有这些提示就return
+                    if (this.tiShi.tishi || this.tiShi.tishi2 || this.tiShi.tishi3 || this.tiShi.tishi4 || this.tiShi.tishi5 || this.tiShi.tishi6) return;
+                    //if (this.isReturn) return;
+                    var box = document.getElementById("successful");
+                    box.style.display = 'block';
+                    //创建对象
+                    var obj = { username: this.userInfo.user, password: this.userInfo.password1, number: this.userInfo.num, name: this.userInfo.name, address: this.userInfo.address, }
+
+                    array.push(obj);
+                    window.localStorage.userArr = JSON.stringify(array);//把内容转换成字符串形式
+                    /*userInfo =JSON.stringify(window.localStorage.userArr)*/
+                    localStorage.setItem('userArr', window.localStorage.userArr);
+                    // window.location.href='./login.html';
+                },
+                login(){
+                    window.location.href = "./login.html"
+                },
+                close(){
+                    let box = document.getElementById("successful");
+                    box.style.display = "none"
+                }
+            },
+            watch: {
+                "userInfo.user"(val) {
+                    this.tiShi.tishi1 = '';
+                    // this.isReturn = true;
+                    var a = /^[a-z]+$/;//小写字母组成
+                    if (!this.userInfo.user) this.tiShi.tishi1 = '用户名不能为空';
+                    else if (!a.test(this.userInfo.user)) {
+                        // this.isReturn = true;
+                        this.tiShi.tishi1 = "由小写字母组成"
+                    }
+                },
+                "userInfo.password1"(val){
+                    this.tiShi.tishi2 = '';
+                    this.isReturn = true;
+                    var p = /[a-zA-Z]\w[z0-9]/;
+                    if (!this.userInfo.password1) {
+                        this.isReturn = true;
+                        this.tiShi.tishi2 = '密码不能为空';
+                    }
+                    else if (!p.test(this.userInfo.password1)) {
+                        this.isReturn = true;
+                        this.tiShi.tishi2 = "由字母+数字组成，字母开头"
+                    }
+                },
+                "userInfo.password2"(val){
+                    this.tiShi.tishi3 = '';
+                    this.isReturn = true;
+                    var p = /[a-zA-Z]\w[z0-9]/;
+                    if (!this.userInfo.password2) {
+                        this.isReturn = true;
+                        this.tiShi.tishi3 = '密码不能为空';
+                    }
+                    else if (!p.test(this.userInfo.password2)) {
+                        this.isReturn = true;
+                        this.tiShi.tishi3 = "由字母+数字组成，以字母开头"
+                    }
+                    if (this.userInfo.password1 != this.userInfo.password2) {
+                        this.isReturn = true;
+                        this.tiShi.tishi3 = '两次密码不一致';
+                    }
+                },
+                "userInfo.name"(val){
+                    this.tiShi.tishi4 = '';
+                    this.isReturn = true;
+                    if (!this.userInfo.name) this.tiShi.tishi4 = '姓名不能为空'; this.isReturn = true;
+                },
+                "userInfo.num"(val){
+                    this.tiShi.tishi5 = '';
+                    this.isReturn = true;
+                    var n = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/
+                    if (!this.userInfo.num) {
+                        this.tiShi.tishi5 = '手机号不能为空';
+                        this.isReturn = true;
+                    }
+                    else if (!n.test(this.userInfo.num)) { this.tiShi.tishi5 = '手机号码格式不正确'; this.isReturn = true; }
+                },
+                "userInfo.address"(val){
+                    this.tiShi.tishi6 = '';
+                    this.isReturn = true;
+                    if (!this.userInfo.address) { this.tiShi.tishi6 = '请输入您的家庭住址'; this.isReturn = true; }
+                }
+            }
+        })
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-07\347\233\221\345\220\254\345\231\250\344\270\216\350\241\250\345\215\225(\346\263\250\345\206\214\351\241\265\351\235\242)/success.html" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-07\347\233\221\345\220\254\345\231\250\344\270\216\350\241\250\345\215\225(\346\263\250\345\206\214\351\241\265\351\235\242)/success.html"
new file mode 100644
index 0000000000000000000000000000000000000000..7b3904ffd4a5446c811ddd812090c53d140f0dd6
--- /dev/null
+++ "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-07\347\233\221\345\220\254\345\231\250\344\270\216\350\241\250\345\215\225(\346\263\250\345\206\214\351\241\265\351\235\242)/success.html"
@@ -0,0 +1,106 @@
+<!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.6.14/dist/vue.js"></script>
+    <title>Document</title>
+    <style>
+        *{
+            margin: 0;
+            padding: 0;
+        }
+        body {
+            background: url(./img/bg4.jpg);
+            background-size: cover;
+        }
+
+        ul {
+            list-style: none;
+        }
+
+        #app {
+            position: relative;
+            width: 300px;
+            height: 350px;
+            margin: 100px auto;
+            border-radius: 10px;
+            background-color: rgba(172, 179, 180, 0.6);
+            padding: 20px 0 0 90px;
+            box-sizing: border-box;
+            
+        }
+        #app h2{
+            color: #7b6a6a;
+        }
+        #msg {
+            position: absolute;
+            left: 50px;
+            font-family: '仿宋';
+            font-size: 20px;
+            margin-top: 20px;
+            
+        }
+    </style>
+</head>
+
+<body>
+    <div id="app">
+        <h2 style="margin-bottom: 20px;">用户详细信息</h2>
+        <!--头像-->
+        <div>
+            <input type="file" @change="upimgg" id="btn_img" style="display: none;">
+            <img :src="imgurl || 'img/man.jpg'" @click="upimg" style=" width: 117px;height: 100px;cursor: pointer;">
+        </div>
+        <!-- 信息 -->
+        <div id="msg">
+            <ul>
+                <li v-for="(item,index) in items" style="margin-top: 5px;">
+                    {{index | myfilter}}:{{item}}
+
+            </ul>
+        </div>
+    </div>
+
+    <script>
+        //自定义过滤器 
+        Vue.filter('myfilter', function (index) {
+            switch (index) {
+                case 'username':
+                    return '用户名';
+                case 'password':
+                    return '密码';
+                case 'number':
+                    return '手机号';
+                case 'name':
+                    return '真实姓名';
+                case 'address':
+                    return '家庭住址';
+
+            }
+            return index;
+
+        })
+        var vm = new Vue({
+            el: '#app',
+            data: {
+                items: JSON.parse(localStorage.getItem("userInfo")),
+                imgurl: ''
+            },
+            methods: {
+                upimg() {
+                    var url = document.getElementById("btn_img").click();
+                    /* console.log(this.items[0])//取数组中的第一组数据*/
+                },
+                upimgg() {
+                    var imgFile = document.getElementById("btn_img");
+                    this.imgurl = window.URL.createObjectURL(imgFile.files[0]);
+                    console.log(this.imgurl)
+                }
+            },
+        })
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-07\347\233\221\345\220\254\345\231\250\344\270\216\350\241\250\345\215\225(\346\263\250\345\206\214\351\241\265\351\235\242)/test.html" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-07\347\233\221\345\220\254\345\231\250\344\270\216\350\241\250\345\215\225(\346\263\250\345\206\214\351\241\265\351\235\242)/test.html"
new file mode 100644
index 0000000000000000000000000000000000000000..887707eb257e8efbbdcd62cf4426d250fd80eedd
--- /dev/null
+++ "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-07\347\233\221\345\220\254\345\231\250\344\270\216\350\241\250\345\215\225(\346\263\250\345\206\214\351\241\265\351\235\242)/test.html"
@@ -0,0 +1,351 @@
+<!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>
+    <style>
+        * {
+            margin: 0px;
+            padding: 0px;
+        }
+
+        a {
+            color: black;
+            text-decoration: none;
+        }
+
+        body {
+            font-family: "宋体";
+            background:url(./img/bg4.jpg);
+            background-size: cover;
+            color: black;
+        }
+
+        .now_login {
+            font-size: 14px;
+            float: right;
+        }
+
+        .btd_login {
+            height: 38px;
+            width: 50px;
+            border-radius: 5px;
+            font-size: 16px;
+            cursor: pointer;
+            margin-left: 10px;
+            background-color: #7b6a6a;
+            border: 0;
+            color: white;
+            font-size: 14px;
+        }
+
+        #app1 {
+            width: 500px;
+            padding: 20px 100px;
+            border-radius: 20px;
+            box-sizing: border-box;
+            margin: 50px 55%;
+            background-color: rgba(255,255,255,0.7);
+        }
+
+        #app h2 {
+            color: #7b6a6a;
+            text-align: center;
+            margin: 20px 0;
+        }
+
+        label {
+            display: inline-block;
+            width: 70px;
+            height: 38px;
+            text-align: justify;
+            text-align-last: justify;
+            margin-right: 10px;
+        }
+
+        .tiShi {
+            font-size: 12px;
+            color: red;
+            margin: 0 0 10px 70px;
+        }
+
+        .input {
+            width: 200px;
+            height: 38px;
+            border-radius: 4px;
+            outline: none;
+            border: 0;
+            border: 1px solid #b38e8e
+        }
+
+        textarea {
+            resize: none;
+            border-radius: 4px;
+        }
+
+        .checkbox {
+            font-size: 14px;
+            margin-left: 20px;
+        }
+
+        #btd {
+            width: 270px;
+            height: 38px;
+            border-radius: 5px;
+            background: #7b6a6a;
+            border: 1px solid silver;
+            color: white;
+            font-size: 18px;
+            cursor: pointer;
+            margin-top: 10px;
+            margin-left: 13px;
+        }
+
+        #successful {
+            width: 300px;
+            height: 200px;
+            border: 1px solid silver;
+            position: fixed;
+            left: 50%;
+            bottom: 50%;
+            background: #D8D8D8;
+            display: none;
+            margin-left: -150px;
+        }
+
+        #btn {
+            width: 50px;
+            height: 30px;
+            display: inline-block;
+            float: right;
+            margin-right: 15px;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="app">
+        <div id="successful">
+            <h3 style="text-align: center;margin-top: 80px;margin-bottom: 40px;">注册成功，快去登录吧!</h3>
+            <button id="btn" @click="close">取消</button>
+            <button @click="login" id="btn">登录</button>
+        </div>
+        <div class="now_login">我已注册，现在就<button class="btd_login" @click="login">登录</button></div>
+        <div id="app1">
+            <h2>注册页面</h2>
+            <label>用户名</label><input type="text" placeholder="请设置用户名" v-model="userInfo.user" class="input"
+                @blur="a"><br>
+            <span class="tiShi">{{ tiShi.tishi1 }}</span><br>
+            <label>设置密码</label><input type="password" placeholder="请设置登录密码" v-model="userInfo.password1" class="input"
+                @blur="b"><br>
+            <span class="tiShi">{{ tiShi.tishi2 }}</span><br>
+            <label>确认密码</label><input type="password" v-model="userInfo.password2" class="input" @blur="c"><br>
+            <span class="tiShi">{{ tiShi.tishi3}}</span><br>
+            <label>真实姓名</label><input type="text" v-model="userInfo.name" class="input" @blur="d"><br>
+            <span class="tiShi">{{ tiShi.tishi4}}</span><br>
+            <label>手机号</label><input type="text" placeholder="请输入手机号码" v-model="userInfo.num" class="input"
+                @blur="e"><br>
+            <span class="tiShi">{{ tiShi.tishi5}}</span><br>
+            <label>家庭住址</label><textarea rows="5" cols="26" placeholder="请输入您的家庭住址" v-model="userInfo.address"
+                @blur="f"></textarea><br>
+            <span class="tiShi">{{ tiShi.tishi6}}</span><br>
+            <div class="checkbox"><input type="checkbox" style="margin-right: 10px;" v-model="userInfo.checkbox">阅读并接受<a
+                    href="">《xxx用户协议》</a></div>
+            <button id="btd" @click="flag" :disabled="btn">立即注册</button>
+        </div>
+    </div>
+    <script>
+
+        var vm = new Vue({
+            el: '#app',
+            data: {
+                isReturn: false,
+                btn: false,
+                tiShi: {
+                    tiShi1: '',
+                    tishi2: '',
+                    tishi3: '',
+                    tishi4: '',
+                    tishi5: '',
+                    tishi6: '',
+                },
+                userInfo: {
+                    user: '',
+                    password1: '',
+                    password2: '',
+                    num: '',
+                    name: '',
+                    address: '',
+                    checkbox: true,
+                },
+                userArr: []
+            },
+            methods: {
+                //用户名
+                a() {
+                    this.tiShi.tishi1 = '';
+                    this.isReturn = true;
+                    var a = /^[a-z]+$/;//小写字母组成
+                    if (!this.userInfo.user) this.tiShi.tishi1 = '用户名不能为空';
+                    else if (!a.test(this.userInfo.user)) {
+                        this.isReturn = true;
+                        this.tiShi.tishi1 = "由小写字母组成"
+                    }
+                },
+                //密码
+                b() {
+                    this.tiShi.tishi2 = '';
+                    this.isReturn = true;
+                    var p = /[a-zA-Z]\w[z0-9]/;
+                    if (!this.userInfo.password1) {
+                        this.isReturn = true;
+                        this.tiShi.tishi2 = '密码不能为空';
+                    }
+                    else if (!p.test(this.userInfo.password1)) {
+                        this.isReturn = true;
+                        this.tiShi.tishi2 = "由字母+数字组成，字母开头"
+                    }
+                },
+                //第二遍密码
+                c() {
+                    this.tiShi.tishi3 = '';
+                    this.isReturn = true;
+                    var p = /[a-zA-Z]\w[z0-9]/;
+                    if (!this.userInfo.password2) {
+                        this.isReturn = true;
+                        this.tiShi.tishi3 = '密码不能为空';
+                    }
+                    else if (!p.test(this.userInfo.password2)) {
+                        this.isReturn = true;
+                        this.tiShi.tishi3 = "由字母+数字组成，以字母开头"
+                    }
+                    if (this.userInfo.password1 != this.userInfo.password2) {
+                        this.isReturn = true;
+                        this.tiShi.tishi3 = '两次密码不一致';
+                    }
+                },
+                //真实姓名
+                d() {
+                    this.tiShi.tishi4 = '';
+                    this.isReturn = true;
+                    if (!this.userInfo.name) this.tiShi.tishi4 = '姓名不能为空'; this.isReturn = true;
+                },
+                //手机号
+                e() {
+                    this.tiShi.tishi5 = '';
+                    this.isReturn = true;
+                    var n = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/
+                    if (!this.userInfo.num) {
+                        this.tiShi.tishi5 = '手机号不能为空';
+                        this.isReturn = true;
+                    }
+                    else if (!n.test(this.userInfo.num)) { this.tiShi.tishi5 = '手机号码格式不正确'; this.isReturn = true; }
+                },
+                //家庭住址
+                f() {
+                    this.tiShi.tishi6 = '';
+                    this.isReturn = true;
+                    if (!this.userInfo.address) { this.tiShi.tishi6 = '请输入您的家庭住址'; this.isReturn = true; }
+                },
+                flag() {
+                    //alert(1)
+                    this.tiShi.tishi1 = '';
+                    this.tiShi.tishi2 = '';
+                    this.tiShi.tishi3 = '';
+                    this.tiShi.tishi4 = '';
+                    this.tiShi.tishi5 = '';
+                    this.tiShi.tishi6 = '';
+                    this.isReturn = false;
+                    //用户名
+                    var a = /^[a-z]+$/;//小写字母组成
+                    if (!this.userInfo.user) {
+                        this.tiShi.tishi1 = '用户名不能为空';
+                        this.isReturn = true;
+                    }
+                    else if (!a.test(this.userInfo.user)) {
+                        this.isReturn = true;
+                        this.tiShi.tishi1 = "由小写字母组成"
+                    }
+                    if (window.localStorage.userArr) {
+                        // JSON.parse()可以把JSON规则的字符串转换为JSONObject
+                        var array = JSON.parse(window.localStorage.userArr);
+                    } else { array = [] }
+                    //遍历数组进行匹配
+                    for (var i = 0; i < array.length; i++) {
+                        //判断是否有相同账号
+                        console.log(array)
+                        /*alert(array[i].username)*/
+                        if (this.userInfo.user == array[i].username) {
+                            alert('该账号已存在');
+                            /*this.tiShi.tiShi1='该账号已存在';*/
+                            return;
+                        }
+                    }
+
+                    //字母开头 ，由字母+数字组成
+                    var p = /[a-zA-Z]\w[z0-9]/;
+                    if (!this.userInfo.password1) {
+                        this.isReturn = true;
+                        this.tiShi.tishi2 = '密码不能为空';
+                    }
+                    else if (!p.test(this.userInfo.password1)) {
+                        this.isReturn = true;
+                        this.tiShi.tishi2 = "由字母+数字组成，字母开头"
+                    }
+                    //确认密码
+                    if (!this.userInfo.password2) {
+                        this.isReturn = true;
+                        this.tiShi.tishi3 = '密码不能为空';
+                    }
+                    else if (!p.test(this.userInfo.password2)) {
+                        this.isReturn = true;
+                        this.tiShi.tishi3 = "由字母+数字组成，以字母开头"
+                    }
+                    if (this.userInfo.password1 != this.userInfo.password2) {
+                        this.isReturn = true;
+                        this.tiShi.tishi3 = '两次密码不一致';
+                    }
+                    //姓名
+                    if (!this.userInfo.name) this.tiShi.tishi4 = '姓名不能为空'; this.isReturn = true;
+                    //手机号
+                    var n = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/
+                    if (!this.userInfo.num) {
+                        this.tiShi.tishi5 = '手机号不能为空';
+                        this.isReturn = true;
+                    }
+                    else if (!n.test(this.userInfo.num)) { this.tiShi.tishi5 = '手机号码格式不正确'; this.isReturn = true; }
+                    //家庭住址
+                    if (!this.userInfo.address) { this.tiShi.tishi6 = '请输入您的家庭住址'; this.isReturn = true; }
+                    //同意协议
+                    if (this.userInfo.checkbox != true) { this.btn = false; alert('是否同意该协议'); this.isReturn = true; return }
+                    //如果有这些提示就return
+                    if (this.tiShi.tishi || this.tiShi.tishi2 || this.tiShi.tishi3 || this.tiShi.tishi4 || this.tiShi.tishi5 || this.tiShi.tishi6) return;
+                    //if (this.isReturn) return;
+                    var box = document.getElementById("successful");
+                    box.style.display = 'block';
+                    //创建对象
+                    var obj = { username: this.userInfo.user, password: this.userInfo.password1, number: this.userInfo.num, name: this.userInfo.name, address: this.userInfo.address, }
+
+                    array.push(obj);
+                    window.localStorage.userArr = JSON.stringify(array);//把内容转换成字符串形式
+                    /*userInfo =JSON.stringify(window.localStorage.userArr)*/
+                    localStorage.setItem('userArr', window.localStorage.userArr);
+                    // window.location.href='./login.html';
+                },
+                login() {
+                    window.location.href = './login.html';
+                },
+                close() {
+                    var box = document.getElementById("successful");
+                    box.style.display = "none";
+                }
+
+            }
+        })
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-08\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244(\345\256\236\347\216\260\346\214\207\345\256\232\347\232\204\350\203\214\346\231\257\351\242\234\350\211\262)/demo.html" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-08\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244(\345\256\236\347\216\260\346\214\207\345\256\232\347\232\204\350\203\214\346\231\257\351\242\234\350\211\262)/demo.html"
new file mode 100644
index 0000000000000000000000000000000000000000..65eeac9a4a915644201ea1a4f1c7f07cb5e424f5
--- /dev/null
+++ "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-08\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244(\345\256\236\347\216\260\346\214\207\345\256\232\347\232\204\350\203\214\346\231\257\351\242\234\350\211\262)/demo.html"
@@ -0,0 +1,48 @@
+<!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>Document</title>
+    <style>
+        #app{
+            width: 500px;
+            height: 500px;
+        }
+    </style>
+</head>
+<body>
+    <div id="app" v-change-bg-color="bgcolor">
+        <input type="text" v-model="bgcolor">
+    </div>
+
+    <script>
+        new Vue({
+            el:"#app",
+            data:{
+                bgcolor:"#5FCA34"
+            },
+            directives:{
+                changeBgColor:{
+                    bind:function(el){    //bind只调用一次，指令第一次绑定到元素时调用
+                        let r = Math.floor(Math.random() * 256);
+                        let g = Math.floor(Math.random() * 256);
+                        let b = Math.floor(Math.random() * 256);
+                        let a = Math.random().toFixed(1);
+                        el.style.backgroundColor="rgba(" + r + "," + g + "," + b + "," + a + ")"
+                    },
+                    update:function(el){   //更新时调用
+                        let r = Math.floor(Math.random() * 256);
+                        let g = Math.floor(Math.random() * 256);
+                        let b = Math.floor(Math.random() * 256);
+                        let a = Math.random().toFixed(1);
+                        el.style.backgroundColor="rgba(" + r + "," + g + "," + b + "," + a + ")"
+
+                    }
+                }
+            }
+        })
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-12\347\273\204\344\273\266(\346\214\211\351\222\256\346\230\276\347\244\272\351\232\220\350\227\217div)/demo.html" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-12\347\273\204\344\273\266(\346\214\211\351\222\256\346\230\276\347\244\272\351\232\220\350\227\217div)/demo.html"
new file mode 100644
index 0000000000000000000000000000000000000000..205c0fb3ba94a4f7907fd37d2e73f9307c062fc0
--- /dev/null
+++ "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-12\347\273\204\344\273\266(\346\214\211\351\222\256\346\230\276\347\244\272\351\232\220\350\227\217div)/demo.html"
@@ -0,0 +1,35 @@
+<!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 id="app">
+        <show></show>
+    </div>
+
+    <script>
+        Vue.component('show',{
+            data:function(){
+                return {
+                    use:true
+                }
+            },
+            methods:{
+                change:function(){
+                    this.use =! this.use
+                    console.log(this.use);
+                }
+            },
+            template:'<div><button @click="change">点击</button><div v-if="use" style="width:100px;height:100px;backgroundColor:#c0c6ff"></div></div>'
+        })
+
+        new Vue({
+            el:"#app"
+        })
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-13\345\261\200\351\203\250\347\273\204\344\273\266(\345\256\236\347\216\260\351\201\215\345\216\206)/demo.html" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-13\345\261\200\351\203\250\347\273\204\344\273\266(\345\256\236\347\216\260\351\201\215\345\216\206)/demo.html"
new file mode 100644
index 0000000000000000000000000000000000000000..789e6a5506af624c5f3267897e7e2753a48c1951
--- /dev/null
+++ "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-13\345\261\200\351\203\250\347\273\204\344\273\266(\345\256\236\347\216\260\351\201\215\345\216\206)/demo.html"
@@ -0,0 +1,43 @@
+<!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.6.14/dist/vue.js"></script>
+    <title>Document</title>
+</head>
+<body>
+    <!-- //作业定义一个局部组件，实现商品遍历，数据在普通实例中 -->
+    <div id="app">
+        <goods v-for="arr in arrs" :arr="arr"></goods>
+
+    </div>
+
+    <script>
+
+        let goods = {
+            props:['arr'],
+            template:'<div>商品名称：{{arr.name}}-------------价格：{{arr.price}}</div>'
+        }
+        new Vue({
+            el:"#app",
+            data:{
+                arrs:[
+                    {
+                        name:"珂润面霜",
+                        price:180,
+                    },
+                    {
+                        name:"赫莲娜黑绷带",
+                        price:3500
+                    }
+                ]
+            },
+            components:{
+                goods
+            }
+        })
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-14\347\273\204\344\273\266\345\265\214\345\245\227(\345\225\206\345\223\201)/demo.html" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-14\347\273\204\344\273\266\345\265\214\345\245\227(\345\225\206\345\223\201)/demo.html"
new file mode 100644
index 0000000000000000000000000000000000000000..6f8219b5c39c3902f7b757ad2d1ad2f7deabb4e2
--- /dev/null
+++ "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-14\347\273\204\344\273\266\345\265\214\345\245\227(\345\225\206\345\223\201)/demo.html"
@@ -0,0 +1,222 @@
+<!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>
+    <style>
+        *{
+            margin: 0;
+            padding: 0;
+        }
+        .card {
+            width: 210px;
+            height: 300px;
+            border: 1px solid #ddd;
+            padding-left: 10px;
+            box-sizing: border-box;
+            float: left;
+            margin: 8px;
+        }
+        .card h4,.card span{
+            margin: 20px 10px;
+        }
+
+        img {
+            width: 175px;
+            height: 200px;
+            margin-left: 5px;
+        }
+        #app{
+            position: relative;
+        }
+        .outer {
+            border: 1px solid #ddd;
+            position: absolute;
+            top: 0;
+            left: 150px;
+        }
+        .showname{
+            width: 100px;
+            height: 40px;
+            line-height: 40px;
+            text-align: justify;
+            text-align-last: justify;
+            background-color: #ddd;
+            border-bottom: 1px solid #aaa;
+            padding:0 20px;
+            color: #6b3c3c;
+        }
+    </style>
+</head>
+
+<body>
+    <!-- //作业：写一个嵌套组件，商品目录组件嵌套商品（图片，价格，商品名 ......）组件，数据在 vm 实例中 -->
+    <div id="app">
+        <mydata :shname="app[0]"></mydata>
+        <mydata :shname="app[1]"></mydata>
+        <mydata :shname="app[2]"></mydata>
+    </div>
+
+    <script>
+
+        let allgoods = {
+            data: function () {
+                return {
+
+                }
+            },
+            props: ['god'],
+            template: "<div class='card'><img :src='god.img'></img><h4>{{god.name}}</h4><span>￥{{god.price}}</span></div>"
+        }
+
+        var laststatus;
+        let last;
+
+        let mydata = {
+            data: function () {
+                return {
+                    use: false
+                }
+            },
+            methods: {
+                display() {
+                    this.use = !this.use // 当前点击元素的显示和隐藏
+                    if(last){
+                        last.use = !laststatus  // 如果上一个点击的模块存在，就修改上一个模块(showname)的兄弟(outer)的状态,因为use在outer身上
+                    }
+                    last = this // 记录上一个点击的模块
+                    laststatus = this.use // 上一个点击的模块的兄弟的状态
+                }
+            },
+            props: ['shname'],
+            template: "<div class='father'><div @click='display' class='showname'>{{shname.showname}}</div> <div v-if='use' class='outer'><allgoods  v-for='good in shname.goods' :god='good'></allgoods></div></div>",
+            components: {
+                allgoods
+            }
+        }
+
+
+        new Vue({
+            el: "#app",
+            data: {
+                app: [
+                    { //第一个模块
+                        showname: '手机通讯频道',
+                        goods: [
+                            {
+                                name: 'Apple iPad Air5',
+                                price: 4399.00,
+                                img: "./img/1.jpg"
+                            },
+                            {
+                                name: 'Apple MacBook ',
+                                price: 7999,
+                                img: "./img/2.jpg"
+                            },
+                            {
+                                name: 'vivo X Fold',
+                                price: 8999,
+                                img: "./img/3.jpg"
+                            },
+                            {
+                                name: 'Apple Watch Series 7',
+                                price: 2999,
+                                img: "./img/4.jpg"
+                            },
+                            {
+                                name: '华为智选 优畅享20',
+                                price: 1699,
+                                img: "./img/5.jpg"
+                            },
+                            {
+                                name: '华为P50',
+                                price: 2699,
+                                img: "./img/6.jpg"
+                            },
+                        ]
+                    },
+                    { //第二个模块
+                        showname: '畅销图书',
+                        goods: [
+                            {
+                                name: '孔子传',
+                                price: 86,
+                                img: "./img/11.jpg"
+                            },
+                            {
+                                name: '人心至上',
+                                price: 42.1,
+                                img: "./img/12.jpg"
+                            },
+                            {
+                                name: '曾国潘家书',
+                                price: 60.5,
+                                img: "./img/13.jpg"
+                            },
+                            {
+                                name: '暗格里的秘密',
+                                price: 59.8,
+                                img: "./img/14.jpg"
+                            },
+                            {
+                                name: '十年一品温如言',
+                                price: 86,
+                                img: "./img/15.jpg"
+                            },
+                            {
+                                name: '奥特曼系列视觉志',
+                                price: 49,
+                                img: "./img/16.jpg"
+                            },
+                        ]
+                    },
+                    { //第三个模块
+                        showname: '超级美妆',
+                        goods: [
+                            {
+                                name: '雪花秀焕颜精华',
+                                price: 886,
+                                img: "./img/21.jpg"
+                            },
+                            {
+                                name: '欧诗漫OSM美白套装',
+                                price: 249,
+                                img: "./img/22.jpg"
+                            },
+                            {
+                                name: '欧诗漫OSM玻尿酸面膜',
+                                price: 99,
+                                img: "./img/23.jpg"
+                            },
+                            {
+                                name: '祖玛珑蓝风铃香水',
+                                price: 610,
+                                img: "./img/24.jpg"
+                            },
+                            {
+                                name: '芙丽芳丝洗面奶',
+                                price: 119,
+                                img: "./img/25.jpg"
+                            },
+                            {
+                                name: 'WIS玻尿酸面膜',
+                                price: 119,
+                                img: "./img/26.jpg"
+                            },
+                        ]
+                    },
+                ]
+            },
+            components: {
+                // 注册组件
+                mydata,
+
+            }
+        })
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-14\347\273\204\344\273\266\345\265\214\345\245\227(\345\225\206\345\223\201)/img/1.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-14\347\273\204\344\273\266\345\265\214\345\245\227(\345\225\206\345\223\201)/img/1.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..aa5370728eb0d89914b5fd3ac0ce6183a274b3eb
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-14\347\273\204\344\273\266\345\265\214\345\245\227(\345\225\206\345\223\201)/img/1.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-14\347\273\204\344\273\266\345\265\214\345\245\227(\345\225\206\345\223\201)/img/11.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-14\347\273\204\344\273\266\345\265\214\345\245\227(\345\225\206\345\223\201)/img/11.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..e8cde3a92f9de57d2a84ca3f6d13596522a8fea3
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-14\347\273\204\344\273\266\345\265\214\345\245\227(\345\225\206\345\223\201)/img/11.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-14\347\273\204\344\273\266\345\265\214\345\245\227(\345\225\206\345\223\201)/img/12.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-14\347\273\204\344\273\266\345\265\214\345\245\227(\345\225\206\345\223\201)/img/12.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..e132482636b20fa7686abc9b076ef6aebb0c1a27
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-14\347\273\204\344\273\266\345\265\214\345\245\227(\345\225\206\345\223\201)/img/12.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-14\347\273\204\344\273\266\345\265\214\345\245\227(\345\225\206\345\223\201)/img/13.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-14\347\273\204\344\273\266\345\265\214\345\245\227(\345\225\206\345\223\201)/img/13.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..96548c071bf7be8c2c63e6e75b8584415ab7fd03
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-14\347\273\204\344\273\266\345\265\214\345\245\227(\345\225\206\345\223\201)/img/13.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-14\347\273\204\344\273\266\345\265\214\345\245\227(\345\225\206\345\223\201)/img/14.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-14\347\273\204\344\273\266\345\265\214\345\245\227(\345\225\206\345\223\201)/img/14.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..01b46442c9a36cd9a471bfb90ae4ceeba8986f0c
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-14\347\273\204\344\273\266\345\265\214\345\245\227(\345\225\206\345\223\201)/img/14.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-14\347\273\204\344\273\266\345\265\214\345\245\227(\345\225\206\345\223\201)/img/15.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-14\347\273\204\344\273\266\345\265\214\345\245\227(\345\225\206\345\223\201)/img/15.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..c4b6455601e5d040b71e85dca62a9d781ea70339
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-14\347\273\204\344\273\266\345\265\214\345\245\227(\345\225\206\345\223\201)/img/15.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-14\347\273\204\344\273\266\345\265\214\345\245\227(\345\225\206\345\223\201)/img/16.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-14\347\273\204\344\273\266\345\265\214\345\245\227(\345\225\206\345\223\201)/img/16.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..6ec03b70b3e6c47a0e4a6c7e5838deec2b11c149
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-14\347\273\204\344\273\266\345\265\214\345\245\227(\345\225\206\345\223\201)/img/16.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-14\347\273\204\344\273\266\345\265\214\345\245\227(\345\225\206\345\223\201)/img/2.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-14\347\273\204\344\273\266\345\265\214\345\245\227(\345\225\206\345\223\201)/img/2.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..1309b24b51569743d9eae3924a3289e442ece14f
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-14\347\273\204\344\273\266\345\265\214\345\245\227(\345\225\206\345\223\201)/img/2.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-14\347\273\204\344\273\266\345\265\214\345\245\227(\345\225\206\345\223\201)/img/21.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-14\347\273\204\344\273\266\345\265\214\345\245\227(\345\225\206\345\223\201)/img/21.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..609be1f26317af5f10c2760153fac0a18d64d87f
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-14\347\273\204\344\273\266\345\265\214\345\245\227(\345\225\206\345\223\201)/img/21.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-14\347\273\204\344\273\266\345\265\214\345\245\227(\345\225\206\345\223\201)/img/22.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-14\347\273\204\344\273\266\345\265\214\345\245\227(\345\225\206\345\223\201)/img/22.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..ec1a51d00c98d2c3d0ab15e2866d3e8ba4ed0446
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-14\347\273\204\344\273\266\345\265\214\345\245\227(\345\225\206\345\223\201)/img/22.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-14\347\273\204\344\273\266\345\265\214\345\245\227(\345\225\206\345\223\201)/img/23.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-14\347\273\204\344\273\266\345\265\214\345\245\227(\345\225\206\345\223\201)/img/23.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..fbd43535b920f4ff65aa73c14db27593b57b12a7
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-14\347\273\204\344\273\266\345\265\214\345\245\227(\345\225\206\345\223\201)/img/23.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-14\347\273\204\344\273\266\345\265\214\345\245\227(\345\225\206\345\223\201)/img/24.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-14\347\273\204\344\273\266\345\265\214\345\245\227(\345\225\206\345\223\201)/img/24.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..f9d78986671a2d17f575fadc17b61366ee2c752d
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-14\347\273\204\344\273\266\345\265\214\345\245\227(\345\225\206\345\223\201)/img/24.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-14\347\273\204\344\273\266\345\265\214\345\245\227(\345\225\206\345\223\201)/img/25.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-14\347\273\204\344\273\266\345\265\214\345\245\227(\345\225\206\345\223\201)/img/25.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..816c2fb038be34d9a37f4a8aebdbdd804da7d271
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-14\347\273\204\344\273\266\345\265\214\345\245\227(\345\225\206\345\223\201)/img/25.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-14\347\273\204\344\273\266\345\265\214\345\245\227(\345\225\206\345\223\201)/img/26.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-14\347\273\204\344\273\266\345\265\214\345\245\227(\345\225\206\345\223\201)/img/26.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..7ff609d7478fa46d6447333290de918cb191bab1
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-14\347\273\204\344\273\266\345\265\214\345\245\227(\345\225\206\345\223\201)/img/26.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-14\347\273\204\344\273\266\345\265\214\345\245\227(\345\225\206\345\223\201)/img/3.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-14\347\273\204\344\273\266\345\265\214\345\245\227(\345\225\206\345\223\201)/img/3.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..408056d3d1e47e227b8bd704e0ea06f6378c1199
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-14\347\273\204\344\273\266\345\265\214\345\245\227(\345\225\206\345\223\201)/img/3.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-14\347\273\204\344\273\266\345\265\214\345\245\227(\345\225\206\345\223\201)/img/4.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-14\347\273\204\344\273\266\345\265\214\345\245\227(\345\225\206\345\223\201)/img/4.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..cb99bc079a02b503d86899dae74a00d36b4d6f57
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-14\347\273\204\344\273\266\345\265\214\345\245\227(\345\225\206\345\223\201)/img/4.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-14\347\273\204\344\273\266\345\265\214\345\245\227(\345\225\206\345\223\201)/img/5.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-14\347\273\204\344\273\266\345\265\214\345\245\227(\345\225\206\345\223\201)/img/5.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..0d201b5df5340102e14ac419beb2673360e47aa2
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-14\347\273\204\344\273\266\345\265\214\345\245\227(\345\225\206\345\223\201)/img/5.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-14\347\273\204\344\273\266\345\265\214\345\245\227(\345\225\206\345\223\201)/img/6.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-14\347\273\204\344\273\266\345\265\214\345\245\227(\345\225\206\345\223\201)/img/6.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..4a674593f8a16875b16192db519b1c7e2903e3be
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-14\347\273\204\344\273\266\345\265\214\345\245\227(\345\225\206\345\223\201)/img/6.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-15\346\217\222\346\247\275\344\270\216\345\215\225\346\226\207\344\273\266\347\273\204\344\273\266(\345\225\206\345\223\201\346\267\273\345\212\240\345\233\276\347\211\207)/demo.html" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-15\346\217\222\346\247\275\344\270\216\345\215\225\346\226\207\344\273\266\347\273\204\344\273\266(\345\225\206\345\223\201\346\267\273\345\212\240\345\233\276\347\211\207)/demo.html"
new file mode 100644
index 0000000000000000000000000000000000000000..8fd7630fbd90dd648d01041a9dca4acd309b0521
--- /dev/null
+++ "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-15\346\217\222\346\247\275\344\270\216\345\215\225\346\226\207\344\273\266\347\273\204\344\273\266(\345\225\206\345\223\201\346\267\273\345\212\240\345\233\276\347\211\207)/demo.html"
@@ -0,0 +1,224 @@
+<!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>
+    <style>
+        *{
+            margin: 0;
+            padding: 0;
+        }
+        .card {
+            width: 210px;
+            height: 300px;
+            border: 1px solid #ddd;
+            padding-left: 10px;
+            box-sizing: border-box;
+            float: left;
+            margin: 8px;
+        }
+        .card h4,.card span{
+            margin: 20px 10px;
+        }
+
+        img {
+            width: 175px;
+            height: 200px;
+        }
+        #app{
+            position: relative;
+        }
+        .outer {
+            border: 1px solid #ddd;
+            position: absolute;
+            top: 0;
+            left: 170px;
+        }
+        .showname{
+            width: 150px;
+            height: 50px;
+            line-height: 40px;
+            text-align: justify;
+            text-align-last: justify;
+            background-color: #ddd;
+            border-bottom: 1px solid #aaa;
+            color: #6b3c3c;
+        }
+        .showname span{
+            display: block;
+            margin: 10px 20px;
+        }
+    </style>
+</head>
+
+<body>
+    <!-- //作业：写一个嵌套组件，商品目录组件嵌套商品（图片，价格，商品名 ......）组件，数据在 vm 实例中 -->
+    <div id="app">
+        <mydata :shname="app[0]"><img style="height: 50px;width: 100%;" src="./img/first.jpg" alt=""></mydata>
+        <mydata :shname="app[1]"><img style="height: 50px;width: 100%;" src="./img/second.jpg" alt=""></mydata>
+        <mydata :shname="app[2]"><img style="height: 50px;width: 100%;" src="./img/third.jpg" alt=""></mydata>
+    </div>
+
+    <script>
+
+        let allgoods = {
+            data: function () {
+                return {
+
+                }
+            },
+            props: ['god'],
+            template: "<div class='card'><img :src='god.img'></img><h4>{{god.name}}</h4><span>￥{{god.price}}</span></div>"
+        }
+
+        var laststatus;
+        let last;
+
+        let mydata = {
+            data: function () {
+                return {
+                    use: false
+                }
+            },
+            methods: {
+                display() {
+                    this.use = !this.use // 当前点击元素的显示和隐藏
+                    if(last){
+                        last.use = !laststatus  // 如果上一个点击的模块存在，就修改上一个模块(showname)的兄弟(outer)的状态,因为use在outer身上
+                    }
+                    last = this // 记录上一个点击的模块
+                    laststatus = this.use // 上一个点击的模块的兄弟的状态
+                }
+            },
+            props: ['shname'],
+            template: "<div class='father'><div @click='display' class='showname'><slot><span>{{shname.showname}}</span></slot></div> <div v-if='use' class='outer'><allgoods  v-for='good in shname.goods' :god='good'></allgoods></div></div>",
+            components: {
+                allgoods
+            }
+        }
+
+
+        new Vue({
+            el: "#app",
+            data: {
+                app: [
+                    { //第一个模块
+                        showname: '手机通讯频道',
+                        goods: [
+                            {
+                                name: 'Apple iPad Air5',
+                                price: 4399.00,
+                                img: "./img/1.jpg"
+                            },
+                            {
+                                name: 'Apple MacBook ',
+                                price: 7999,
+                                img: "./img/2.jpg"
+                            },
+                            {
+                                name: 'vivo X Fold',
+                                price: 8999,
+                                img: "./img/3.jpg"
+                            },
+                            {
+                                name: 'Apple Watch Series 7',
+                                price: 2999,
+                                img: "./img/4.jpg"
+                            },
+                            {
+                                name: '华为智选 优畅享20',
+                                price: 1699,
+                                img: "./img/5.jpg"
+                            },
+                            {
+                                name: '华为P50',
+                                price: 2699,
+                                img: "./img/6.jpg"
+                            },
+                        ]
+                    },
+                    { //第二个模块
+                        showname: '畅销图书',
+                        goods: [
+                            {
+                                name: '孔子传',
+                                price: 86,
+                                img: "./img/11.jpg"
+                            },
+                            {
+                                name: '人心至上',
+                                price: 42.1,
+                                img: "./img/12.jpg"
+                            },
+                            {
+                                name: '曾国潘家书',
+                                price: 60.5,
+                                img: "./img/13.jpg"
+                            },
+                            {
+                                name: '暗格里的秘密',
+                                price: 59.8,
+                                img: "./img/14.jpg"
+                            },
+                            {
+                                name: '十年一品温如言',
+                                price: 86,
+                                img: "./img/15.jpg"
+                            },
+                            {
+                                name: '奥特曼系列视觉志',
+                                price: 49,
+                                img: "./img/16.jpg"
+                            },
+                        ]
+                    },
+                    { //第三个模块
+                        showname: '超级美妆',
+                        goods: [
+                            {
+                                name: '雪花秀焕颜精华',
+                                price: 886,
+                                img: "./img/21.jpg"
+                            },
+                            {
+                                name: '欧诗漫OSM美白套装',
+                                price: 249,
+                                img: "./img/22.jpg"
+                            },
+                            {
+                                name: '欧诗漫OSM玻尿酸面膜',
+                                price: 99,
+                                img: "./img/23.jpg"
+                            },
+                            {
+                                name: '祖玛珑蓝风铃香水',
+                                price: 610,
+                                img: "./img/24.jpg"
+                            },
+                            {
+                                name: '芙丽芳丝洗面奶',
+                                price: 119,
+                                img: "./img/25.jpg"
+                            },
+                            {
+                                name: 'WIS玻尿酸面膜',
+                                price: 119,
+                                img: "./img/26.jpg"
+                            },
+                        ]
+                    },
+                ]
+            },
+            components: {
+                // 注册组件
+                mydata,
+
+            }
+        })
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-15\346\217\222\346\247\275\344\270\216\345\215\225\346\226\207\344\273\266\347\273\204\344\273\266(\345\225\206\345\223\201\346\267\273\345\212\240\345\233\276\347\211\207)/img/1.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-15\346\217\222\346\247\275\344\270\216\345\215\225\346\226\207\344\273\266\347\273\204\344\273\266(\345\225\206\345\223\201\346\267\273\345\212\240\345\233\276\347\211\207)/img/1.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..aa5370728eb0d89914b5fd3ac0ce6183a274b3eb
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-15\346\217\222\346\247\275\344\270\216\345\215\225\346\226\207\344\273\266\347\273\204\344\273\266(\345\225\206\345\223\201\346\267\273\345\212\240\345\233\276\347\211\207)/img/1.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-15\346\217\222\346\247\275\344\270\216\345\215\225\346\226\207\344\273\266\347\273\204\344\273\266(\345\225\206\345\223\201\346\267\273\345\212\240\345\233\276\347\211\207)/img/11.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-15\346\217\222\346\247\275\344\270\216\345\215\225\346\226\207\344\273\266\347\273\204\344\273\266(\345\225\206\345\223\201\346\267\273\345\212\240\345\233\276\347\211\207)/img/11.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..e8cde3a92f9de57d2a84ca3f6d13596522a8fea3
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-15\346\217\222\346\247\275\344\270\216\345\215\225\346\226\207\344\273\266\347\273\204\344\273\266(\345\225\206\345\223\201\346\267\273\345\212\240\345\233\276\347\211\207)/img/11.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-15\346\217\222\346\247\275\344\270\216\345\215\225\346\226\207\344\273\266\347\273\204\344\273\266(\345\225\206\345\223\201\346\267\273\345\212\240\345\233\276\347\211\207)/img/12.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-15\346\217\222\346\247\275\344\270\216\345\215\225\346\226\207\344\273\266\347\273\204\344\273\266(\345\225\206\345\223\201\346\267\273\345\212\240\345\233\276\347\211\207)/img/12.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..e132482636b20fa7686abc9b076ef6aebb0c1a27
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-15\346\217\222\346\247\275\344\270\216\345\215\225\346\226\207\344\273\266\347\273\204\344\273\266(\345\225\206\345\223\201\346\267\273\345\212\240\345\233\276\347\211\207)/img/12.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-15\346\217\222\346\247\275\344\270\216\345\215\225\346\226\207\344\273\266\347\273\204\344\273\266(\345\225\206\345\223\201\346\267\273\345\212\240\345\233\276\347\211\207)/img/13.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-15\346\217\222\346\247\275\344\270\216\345\215\225\346\226\207\344\273\266\347\273\204\344\273\266(\345\225\206\345\223\201\346\267\273\345\212\240\345\233\276\347\211\207)/img/13.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..96548c071bf7be8c2c63e6e75b8584415ab7fd03
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-15\346\217\222\346\247\275\344\270\216\345\215\225\346\226\207\344\273\266\347\273\204\344\273\266(\345\225\206\345\223\201\346\267\273\345\212\240\345\233\276\347\211\207)/img/13.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-15\346\217\222\346\247\275\344\270\216\345\215\225\346\226\207\344\273\266\347\273\204\344\273\266(\345\225\206\345\223\201\346\267\273\345\212\240\345\233\276\347\211\207)/img/14.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-15\346\217\222\346\247\275\344\270\216\345\215\225\346\226\207\344\273\266\347\273\204\344\273\266(\345\225\206\345\223\201\346\267\273\345\212\240\345\233\276\347\211\207)/img/14.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..01b46442c9a36cd9a471bfb90ae4ceeba8986f0c
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-15\346\217\222\346\247\275\344\270\216\345\215\225\346\226\207\344\273\266\347\273\204\344\273\266(\345\225\206\345\223\201\346\267\273\345\212\240\345\233\276\347\211\207)/img/14.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-15\346\217\222\346\247\275\344\270\216\345\215\225\346\226\207\344\273\266\347\273\204\344\273\266(\345\225\206\345\223\201\346\267\273\345\212\240\345\233\276\347\211\207)/img/15.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-15\346\217\222\346\247\275\344\270\216\345\215\225\346\226\207\344\273\266\347\273\204\344\273\266(\345\225\206\345\223\201\346\267\273\345\212\240\345\233\276\347\211\207)/img/15.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..c4b6455601e5d040b71e85dca62a9d781ea70339
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-15\346\217\222\346\247\275\344\270\216\345\215\225\346\226\207\344\273\266\347\273\204\344\273\266(\345\225\206\345\223\201\346\267\273\345\212\240\345\233\276\347\211\207)/img/15.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-15\346\217\222\346\247\275\344\270\216\345\215\225\346\226\207\344\273\266\347\273\204\344\273\266(\345\225\206\345\223\201\346\267\273\345\212\240\345\233\276\347\211\207)/img/16.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-15\346\217\222\346\247\275\344\270\216\345\215\225\346\226\207\344\273\266\347\273\204\344\273\266(\345\225\206\345\223\201\346\267\273\345\212\240\345\233\276\347\211\207)/img/16.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..6ec03b70b3e6c47a0e4a6c7e5838deec2b11c149
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-15\346\217\222\346\247\275\344\270\216\345\215\225\346\226\207\344\273\266\347\273\204\344\273\266(\345\225\206\345\223\201\346\267\273\345\212\240\345\233\276\347\211\207)/img/16.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-15\346\217\222\346\247\275\344\270\216\345\215\225\346\226\207\344\273\266\347\273\204\344\273\266(\345\225\206\345\223\201\346\267\273\345\212\240\345\233\276\347\211\207)/img/2.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-15\346\217\222\346\247\275\344\270\216\345\215\225\346\226\207\344\273\266\347\273\204\344\273\266(\345\225\206\345\223\201\346\267\273\345\212\240\345\233\276\347\211\207)/img/2.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..1309b24b51569743d9eae3924a3289e442ece14f
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-15\346\217\222\346\247\275\344\270\216\345\215\225\346\226\207\344\273\266\347\273\204\344\273\266(\345\225\206\345\223\201\346\267\273\345\212\240\345\233\276\347\211\207)/img/2.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-15\346\217\222\346\247\275\344\270\216\345\215\225\346\226\207\344\273\266\347\273\204\344\273\266(\345\225\206\345\223\201\346\267\273\345\212\240\345\233\276\347\211\207)/img/21.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-15\346\217\222\346\247\275\344\270\216\345\215\225\346\226\207\344\273\266\347\273\204\344\273\266(\345\225\206\345\223\201\346\267\273\345\212\240\345\233\276\347\211\207)/img/21.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..609be1f26317af5f10c2760153fac0a18d64d87f
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-15\346\217\222\346\247\275\344\270\216\345\215\225\346\226\207\344\273\266\347\273\204\344\273\266(\345\225\206\345\223\201\346\267\273\345\212\240\345\233\276\347\211\207)/img/21.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-15\346\217\222\346\247\275\344\270\216\345\215\225\346\226\207\344\273\266\347\273\204\344\273\266(\345\225\206\345\223\201\346\267\273\345\212\240\345\233\276\347\211\207)/img/22.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-15\346\217\222\346\247\275\344\270\216\345\215\225\346\226\207\344\273\266\347\273\204\344\273\266(\345\225\206\345\223\201\346\267\273\345\212\240\345\233\276\347\211\207)/img/22.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..ec1a51d00c98d2c3d0ab15e2866d3e8ba4ed0446
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-15\346\217\222\346\247\275\344\270\216\345\215\225\346\226\207\344\273\266\347\273\204\344\273\266(\345\225\206\345\223\201\346\267\273\345\212\240\345\233\276\347\211\207)/img/22.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-15\346\217\222\346\247\275\344\270\216\345\215\225\346\226\207\344\273\266\347\273\204\344\273\266(\345\225\206\345\223\201\346\267\273\345\212\240\345\233\276\347\211\207)/img/23.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-15\346\217\222\346\247\275\344\270\216\345\215\225\346\226\207\344\273\266\347\273\204\344\273\266(\345\225\206\345\223\201\346\267\273\345\212\240\345\233\276\347\211\207)/img/23.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..fbd43535b920f4ff65aa73c14db27593b57b12a7
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-15\346\217\222\346\247\275\344\270\216\345\215\225\346\226\207\344\273\266\347\273\204\344\273\266(\345\225\206\345\223\201\346\267\273\345\212\240\345\233\276\347\211\207)/img/23.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-15\346\217\222\346\247\275\344\270\216\345\215\225\346\226\207\344\273\266\347\273\204\344\273\266(\345\225\206\345\223\201\346\267\273\345\212\240\345\233\276\347\211\207)/img/24.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-15\346\217\222\346\247\275\344\270\216\345\215\225\346\226\207\344\273\266\347\273\204\344\273\266(\345\225\206\345\223\201\346\267\273\345\212\240\345\233\276\347\211\207)/img/24.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..f9d78986671a2d17f575fadc17b61366ee2c752d
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-15\346\217\222\346\247\275\344\270\216\345\215\225\346\226\207\344\273\266\347\273\204\344\273\266(\345\225\206\345\223\201\346\267\273\345\212\240\345\233\276\347\211\207)/img/24.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-15\346\217\222\346\247\275\344\270\216\345\215\225\346\226\207\344\273\266\347\273\204\344\273\266(\345\225\206\345\223\201\346\267\273\345\212\240\345\233\276\347\211\207)/img/25.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-15\346\217\222\346\247\275\344\270\216\345\215\225\346\226\207\344\273\266\347\273\204\344\273\266(\345\225\206\345\223\201\346\267\273\345\212\240\345\233\276\347\211\207)/img/25.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..816c2fb038be34d9a37f4a8aebdbdd804da7d271
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-15\346\217\222\346\247\275\344\270\216\345\215\225\346\226\207\344\273\266\347\273\204\344\273\266(\345\225\206\345\223\201\346\267\273\345\212\240\345\233\276\347\211\207)/img/25.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-15\346\217\222\346\247\275\344\270\216\345\215\225\346\226\207\344\273\266\347\273\204\344\273\266(\345\225\206\345\223\201\346\267\273\345\212\240\345\233\276\347\211\207)/img/26.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-15\346\217\222\346\247\275\344\270\216\345\215\225\346\226\207\344\273\266\347\273\204\344\273\266(\345\225\206\345\223\201\346\267\273\345\212\240\345\233\276\347\211\207)/img/26.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..7ff609d7478fa46d6447333290de918cb191bab1
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-15\346\217\222\346\247\275\344\270\216\345\215\225\346\226\207\344\273\266\347\273\204\344\273\266(\345\225\206\345\223\201\346\267\273\345\212\240\345\233\276\347\211\207)/img/26.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-15\346\217\222\346\247\275\344\270\216\345\215\225\346\226\207\344\273\266\347\273\204\344\273\266(\345\225\206\345\223\201\346\267\273\345\212\240\345\233\276\347\211\207)/img/3.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-15\346\217\222\346\247\275\344\270\216\345\215\225\346\226\207\344\273\266\347\273\204\344\273\266(\345\225\206\345\223\201\346\267\273\345\212\240\345\233\276\347\211\207)/img/3.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..408056d3d1e47e227b8bd704e0ea06f6378c1199
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-15\346\217\222\346\247\275\344\270\216\345\215\225\346\226\207\344\273\266\347\273\204\344\273\266(\345\225\206\345\223\201\346\267\273\345\212\240\345\233\276\347\211\207)/img/3.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-15\346\217\222\346\247\275\344\270\216\345\215\225\346\226\207\344\273\266\347\273\204\344\273\266(\345\225\206\345\223\201\346\267\273\345\212\240\345\233\276\347\211\207)/img/4.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-15\346\217\222\346\247\275\344\270\216\345\215\225\346\226\207\344\273\266\347\273\204\344\273\266(\345\225\206\345\223\201\346\267\273\345\212\240\345\233\276\347\211\207)/img/4.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..cb99bc079a02b503d86899dae74a00d36b4d6f57
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-15\346\217\222\346\247\275\344\270\216\345\215\225\346\226\207\344\273\266\347\273\204\344\273\266(\345\225\206\345\223\201\346\267\273\345\212\240\345\233\276\347\211\207)/img/4.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-15\346\217\222\346\247\275\344\270\216\345\215\225\346\226\207\344\273\266\347\273\204\344\273\266(\345\225\206\345\223\201\346\267\273\345\212\240\345\233\276\347\211\207)/img/5.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-15\346\217\222\346\247\275\344\270\216\345\215\225\346\226\207\344\273\266\347\273\204\344\273\266(\345\225\206\345\223\201\346\267\273\345\212\240\345\233\276\347\211\207)/img/5.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..0d201b5df5340102e14ac419beb2673360e47aa2
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-15\346\217\222\346\247\275\344\270\216\345\215\225\346\226\207\344\273\266\347\273\204\344\273\266(\345\225\206\345\223\201\346\267\273\345\212\240\345\233\276\347\211\207)/img/5.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-15\346\217\222\346\247\275\344\270\216\345\215\225\346\226\207\344\273\266\347\273\204\344\273\266(\345\225\206\345\223\201\346\267\273\345\212\240\345\233\276\347\211\207)/img/6.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-15\346\217\222\346\247\275\344\270\216\345\215\225\346\226\207\344\273\266\347\273\204\344\273\266(\345\225\206\345\223\201\346\267\273\345\212\240\345\233\276\347\211\207)/img/6.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..4a674593f8a16875b16192db519b1c7e2903e3be
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-15\346\217\222\346\247\275\344\270\216\345\215\225\346\226\207\344\273\266\347\273\204\344\273\266(\345\225\206\345\223\201\346\267\273\345\212\240\345\233\276\347\211\207)/img/6.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-15\346\217\222\346\247\275\344\270\216\345\215\225\346\226\207\344\273\266\347\273\204\344\273\266(\345\225\206\345\223\201\346\267\273\345\212\240\345\233\276\347\211\207)/img/first.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-15\346\217\222\346\247\275\344\270\216\345\215\225\346\226\207\344\273\266\347\273\204\344\273\266(\345\225\206\345\223\201\346\267\273\345\212\240\345\233\276\347\211\207)/img/first.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..5116154bb8d8a1856837b4f68ac2a94c42a9fd4b
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-15\346\217\222\346\247\275\344\270\216\345\215\225\346\226\207\344\273\266\347\273\204\344\273\266(\345\225\206\345\223\201\346\267\273\345\212\240\345\233\276\347\211\207)/img/first.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-15\346\217\222\346\247\275\344\270\216\345\215\225\346\226\207\344\273\266\347\273\204\344\273\266(\345\225\206\345\223\201\346\267\273\345\212\240\345\233\276\347\211\207)/img/second.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-15\346\217\222\346\247\275\344\270\216\345\215\225\346\226\207\344\273\266\347\273\204\344\273\266(\345\225\206\345\223\201\346\267\273\345\212\240\345\233\276\347\211\207)/img/second.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..d30fcc52c396c691a3c0bcf6ab3b8f0b6b7fded5
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-15\346\217\222\346\247\275\344\270\216\345\215\225\346\226\207\344\273\266\347\273\204\344\273\266(\345\225\206\345\223\201\346\267\273\345\212\240\345\233\276\347\211\207)/img/second.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-15\346\217\222\346\247\275\344\270\216\345\215\225\346\226\207\344\273\266\347\273\204\344\273\266(\345\225\206\345\223\201\346\267\273\345\212\240\345\233\276\347\211\207)/img/third.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-15\346\217\222\346\247\275\344\270\216\345\215\225\346\226\207\344\273\266\347\273\204\344\273\266(\345\225\206\345\223\201\346\267\273\345\212\240\345\233\276\347\211\207)/img/third.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..64f881f9499c7c64864320fc8cb4d3f9ea51ae76
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-15\346\217\222\346\247\275\344\270\216\345\215\225\346\226\207\344\273\266\347\273\204\344\273\266(\345\225\206\345\223\201\346\267\273\345\212\240\345\233\276\347\211\207)/img/third.jpg" differ