diff --git "a/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-06 \350\256\241\347\256\227\345\261\236\346\200\247\345\225\206\345\223\201\346\212\242\350\264\255\346\211\223\346\212\230\345\200\222\350\256\241\346\227\266/countdown.html" "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-06 \350\256\241\347\256\227\345\261\236\346\200\247\345\225\206\345\223\201\346\212\242\350\264\255\346\211\223\346\212\230\345\200\222\350\256\241\346\227\266/countdown.html"
new file mode 100644
index 0000000000000000000000000000000000000000..ae2569709061b967edd8d528661958999fa46f48
--- /dev/null
+++ "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-06 \350\256\241\347\256\227\345\261\236\346\200\247\345\225\206\345\223\201\346\212\242\350\264\255\346\211\223\346\212\230\345\200\222\350\256\241\346\227\266/countdown.html"	
@@ -0,0 +1,276 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title></title>
+    <meta charset="utf-8">
+    <meta http-equiv="Pragma" content="no-cache">
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
+
+</head>
+
+<body>
+    <style type="text/css">
+        html,
+        body,
+        ul,
+        li,
+        dl {
+            margin: 0;
+            padding: 0;
+        }
+
+        .j02 {
+            width: 906px;
+            margin: 0 auto;
+        }
+
+        .j02 .product {
+            width: 800px;
+            height: 900px;
+            margin-right: 20px;
+            margin-bottom: 20px;
+
+        }
+
+        .j02 .product:nth-of-type(3n) {
+            margin-right: 0;
+        }
+
+        .j02 .product-box {
+            width: 1208px;
+            margin-right: -20px;
+        }
+
+
+
+        .product {
+            position: relative;
+            float: left;
+            background: #fff;
+            line-height: 1.5;
+            overflow: visible;
+            z-index: 1;
+        }
+
+        .product:hover {
+            overflow: visible;
+            z-index: 3;
+        }
+
+        .product:hover .iwrap {
+            margin: -3px;
+            border: 4px solid #f83760;
+            -webkit-transition: border-color .2s ease-in;
+            -moz-transition: border-color .2s ease-in;
+            -ms-transition: border-color .2s ease-in;
+            -o-transition: border-color .2s ease-in;
+            transition: border-color .2s ease-in;
+        }
+
+        .iwrap {
+            display: block;
+            position: absolute;
+            background: #fff;
+            left: 0;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            border: 1px solid #ececec;
+            box-sizing: content-box;
+        }
+
+        .iwrap img {
+            width: 100%;
+            margin-bottom: 10px;
+        }
+
+        .iwrap p.line1 {
+            margin-left: 10px;
+            margin-right: 10px;
+            color: #333;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+        }
+
+        .iwrap p.line2 {
+            margin-left: 10px;
+            margin-right: 10px;
+            margin-bottom: 13px;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+        }
+
+        .iwrap .line3 {
+            position: absolute;
+            bottom: 0;
+            background: #f8f8f8;
+            width: 100%;
+            height: 56px;
+        }
+
+        .iwrap .line3 dd {
+            display: block;
+            float: left;
+            line-height: 1;
+        }
+
+        .iwrap .line3 .c1 {
+            width: 35%;
+            font-size: 26px;
+            overflow: hidden;
+            white-space: nowrap;
+        }
+
+        .iwrap .rmb {
+            display: block;
+            float: left;
+            font-size: 16px;
+            padding-left: 0.5em;
+        }
+
+        .iwrap .money {
+            display: block;
+            float: left;
+        }
+
+        .iwrap .line3 .c2 {
+            min-width: 22%;
+            max-width: 28%;
+            height: 56px;
+            box-sizing: border-box;
+            overflow: hidden;
+            text-align: center;
+        }
+
+        .iwrap .triangle {
+            display: block;
+            float: left;
+            width: 0;
+            height: 0;
+            box-sizing: border-box;
+            border-width: 28px 14px 28px 14px;
+            border-style: solid;
+            border-color: #f8f8f8 #f73760 #f8f8f8 #f8f8f8;
+        }
+
+        .iwrap .line3 .c3 {
+            width: 40%;
+            height: 56px;
+            background: #f73760;
+            color: #fff;
+            line-height: 56px;
+            text-align: center;
+            float: right;
+            cursor: pointer;
+        }
+
+        /* ******** 商品展示:图片列表 end  *********** */
+        /**弹框**/
+        .dialogBox {
+            position: absolute;
+            margin: 0 auto;
+            margin-top: 60px;
+            text-align: center;
+            border: 1px solid #d2d2d2;
+            z-index: 999;
+
+        }
+
+        .dialogDiv {
+            display: none;
+        }
+    </style>
+    <div id="main">
+        <div id="list">
+            <div class="j02 main clearfix">
+                <!-- 把这段代码重复copy 6次 start -->
+                <div class="product">
+                    <div target="_blank" class="iwrap">
+                        <img :src="img_url">
+                        <p class="f16 line1">倒计时{{leftdate}}</p>
+                        <p class="f12 line2 red"></p>
+                        <dl class="line3">
+                            <dd class="c2 red"><span class="rmb">￥1万</span></dd>
+                            <dd class="c3 f16" @click="getprice"><i class="triangle"></i>购买</dd>
+                        </dl>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+<script>
+    let vue = new Vue({
+        el: '#main',
+        data: {
+            deadline: 0,
+            img_url: 'https://youjia-image.cdn.bcebos.com/modelImage/3e7fc7749996492ca2cc392bab734a21/1628501201288910972d.JPG',
+            discountArr: {},
+            keysArr: [],
+            leftdate: '',
+            discountIndex: 0,
+            price: 10
+        },
+        methods: {
+            init: function () {
+                //截止时间
+                let deadline = (new Date("2022-04-07 23:00:00")).getTime() / 1000;
+                this.deadline = deadline;
+                //截止时间往前每10分钟一个折扣,设置6个区间
+                //构建数组
+                //['时间戳':折扣.....]         
+                for (let i = 5; i >= 0; i--) {
+                    let timestamp = deadline - 60 * 10 * i
+                    //this.discountArr[timestamp] = 0.6 + 0.05 * i
+                    this.discountArr[timestamp] = 0.9 - 0.05 * i;
+                    this.keysArr.push(timestamp);
+                }
+                this.discountIndex = this.keysArr.pop();
+                console.log(this.discountArr)
+            },
+
+            countdown: function () {
+                // setInterval//定时触发
+                let that = this;
+                //console.log(this);
+                setTimeout(function () {
+                    //console.log(this);//this 指向到了 window
+                    //this.Vue.countdown();
+                    let now = parseInt(new Date().getTime() / 1000)
+                    let lefttime = that.deadline - now;
+                    leftd = Math.floor(lefttime / (60 * 60 * 24));  //计算天数
+                    lefth = Math.floor(lefttime / (60 * 60) % 24);  //计算小时数
+                    leftm = Math.floor(lefttime / (60) % 60);  //计算分钟数
+                    lefts = Math.floor(lefttime % 60);  //计算秒数
+                    that.leftdate = "剩余:" + leftd + "天" + lefth + "小时" + leftm + "小时" + lefts + "秒"
+                    //判断折扣
+                    //console.log(that.discountArr);
+                    if (now > that.discountIndex) {
+                        if (that.keysArr.length > 0) {
+                            that.discountIndex = that.keysArr.pop();
+                        }
+                    }
+                    that.countdown();//递归函数
+                }, 1000)
+
+            },
+            getprice: function () {
+                console.log(this.price * this.getDiscount)
+            }
+        },
+        computed: {
+            getDiscount: function () {
+                console.log(this.discountIndex);
+                console.log(this.discountArr);
+                return this.discountArr[this.discountIndex];
+            }
+        }
+    });
+    vue.init();
+    vue.countdown();
+</script>
+
+</html>
\ No newline at end of file
diff --git "a/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-06 \350\256\241\347\256\227\345\261\236\346\200\247\345\225\206\345\223\201\346\212\242\350\264\255\346\211\223\346\212\230\345\200\222\350\256\241\346\227\266/countdown1.html" "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-06 \350\256\241\347\256\227\345\261\236\346\200\247\345\225\206\345\223\201\346\212\242\350\264\255\346\211\223\346\212\230\345\200\222\350\256\241\346\227\266/countdown1.html"
new file mode 100644
index 0000000000000000000000000000000000000000..f78f92b33035b94afe728e25857d265b1c5c6ee7
--- /dev/null
+++ "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-06 \350\256\241\347\256\227\345\261\236\346\200\247\345\225\206\345\223\201\346\212\242\350\264\255\346\211\223\346\212\230\345\200\222\350\256\241\346\227\266/countdown1.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: 210px;
+            height: 160px;
+        }
+
+        .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: 10px;
+            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: 99,
+                            nowprice: 0,
+                            describe: "这是葡萄",
+                            isshow: false
+                        },
+                        {
+                            src: "img/2.jpg",
+                            des: "香水",
+                            price: 199,
+                            nowprice: 0,
+                            describe: "这是第二个商品的简介",
+                            isshow: false
+                        },
+                        {
+                            src: "img/3.jpg",
+                            des: "城野医生爽肤水",
+                            price: 79,
+                            nowprice: 0,
+                            describe: "这是第三个商品的简介",
+                            isshow: false
+                        },
+                        {
+                            src: "img/4.jpg",
+                            des: "气垫",
+                            price: 89.9,
+                            nowprice: 0,
+                            describe: "这是第四个商品的简介",
+                            isshow: false
+                        },
+                        {
+                            src: "img/5.jpg",
+                            des: "洗面奶",
+                            price: 129,
+                            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/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-06 \350\256\241\347\256\227\345\261\236\346\200\247\345\225\206\345\223\201\346\212\242\350\264\255\346\211\223\346\212\230\345\200\222\350\256\241\346\227\266/img/1.jpg" "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-06 \350\256\241\347\256\227\345\261\236\346\200\247\345\225\206\345\223\201\346\212\242\350\264\255\346\211\223\346\212\230\345\200\222\350\256\241\346\227\266/img/1.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..a2619abb127456d0298062c002118c35d878a5ce
Binary files /dev/null and "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-06 \350\256\241\347\256\227\345\261\236\346\200\247\345\225\206\345\223\201\346\212\242\350\264\255\346\211\223\346\212\230\345\200\222\350\256\241\346\227\266/img/1.jpg" differ
diff --git "a/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-06 \350\256\241\347\256\227\345\261\236\346\200\247\345\225\206\345\223\201\346\212\242\350\264\255\346\211\223\346\212\230\345\200\222\350\256\241\346\227\266/img/2.jpg" "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-06 \350\256\241\347\256\227\345\261\236\346\200\247\345\225\206\345\223\201\346\212\242\350\264\255\346\211\223\346\212\230\345\200\222\350\256\241\346\227\266/img/2.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..2a3d696aefe9ea037ad926861f3eff170432fa77
Binary files /dev/null and "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-06 \350\256\241\347\256\227\345\261\236\346\200\247\345\225\206\345\223\201\346\212\242\350\264\255\346\211\223\346\212\230\345\200\222\350\256\241\346\227\266/img/2.jpg" differ
diff --git "a/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-06 \350\256\241\347\256\227\345\261\236\346\200\247\345\225\206\345\223\201\346\212\242\350\264\255\346\211\223\346\212\230\345\200\222\350\256\241\346\227\266/img/3.jpg" "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-06 \350\256\241\347\256\227\345\261\236\346\200\247\345\225\206\345\223\201\346\212\242\350\264\255\346\211\223\346\212\230\345\200\222\350\256\241\346\227\266/img/3.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..a300891e285ee6e782a331888b573ef8dc816df3
Binary files /dev/null and "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-06 \350\256\241\347\256\227\345\261\236\346\200\247\345\225\206\345\223\201\346\212\242\350\264\255\346\211\223\346\212\230\345\200\222\350\256\241\346\227\266/img/3.jpg" differ
diff --git "a/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-06 \350\256\241\347\256\227\345\261\236\346\200\247\345\225\206\345\223\201\346\212\242\350\264\255\346\211\223\346\212\230\345\200\222\350\256\241\346\227\266/img/4.jpg" "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-06 \350\256\241\347\256\227\345\261\236\346\200\247\345\225\206\345\223\201\346\212\242\350\264\255\346\211\223\346\212\230\345\200\222\350\256\241\346\227\266/img/4.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..8b5de3c1fc316bb9fcf60056564176dcaf753a6b
Binary files /dev/null and "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-06 \350\256\241\347\256\227\345\261\236\346\200\247\345\225\206\345\223\201\346\212\242\350\264\255\346\211\223\346\212\230\345\200\222\350\256\241\346\227\266/img/4.jpg" differ
diff --git "a/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-06 \350\256\241\347\256\227\345\261\236\346\200\247\345\225\206\345\223\201\346\212\242\350\264\255\346\211\223\346\212\230\345\200\222\350\256\241\346\227\266/img/5.jpg" "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-06 \350\256\241\347\256\227\345\261\236\346\200\247\345\225\206\345\223\201\346\212\242\350\264\255\346\211\223\346\212\230\345\200\222\350\256\241\346\227\266/img/5.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..5b94e0377220b9ae5509e54c576b267ac4dc41aa
Binary files /dev/null and "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-06 \350\256\241\347\256\227\345\261\236\346\200\247\345\225\206\345\223\201\346\212\242\350\264\255\346\211\223\346\212\230\345\200\222\350\256\241\346\227\266/img/5.jpg" differ
diff --git "a/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-06 \350\256\241\347\256\227\345\261\236\346\200\247\345\225\206\345\223\201\346\212\242\350\264\255\346\211\223\346\212\230\345\200\222\350\256\241\346\227\266/img/6.jpg" "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-06 \350\256\241\347\256\227\345\261\236\346\200\247\345\225\206\345\223\201\346\212\242\350\264\255\346\211\223\346\212\230\345\200\222\350\256\241\346\227\266/img/6.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..26f0ffbabf1dd06a366bd7d39fc6d410dac5bae5
Binary files /dev/null and "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-06 \350\256\241\347\256\227\345\261\236\346\200\247\345\225\206\345\223\201\346\212\242\350\264\255\346\211\223\346\212\230\345\200\222\350\256\241\346\227\266/img/6.jpg" differ
diff --git "a/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-06 \350\256\241\347\256\227\345\261\236\346\200\247\345\225\206\345\223\201\346\212\242\350\264\255\346\211\223\346\212\230\345\200\222\350\256\241\346\227\266/productdetail.html" "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-06 \350\256\241\347\256\227\345\261\236\346\200\247\345\225\206\345\223\201\346\212\242\350\264\255\346\211\223\346\212\230\345\200\222\350\256\241\346\227\266/productdetail.html"
new file mode 100644
index 0000000000000000000000000000000000000000..b1fcafcfbfcf4c4e8bae19962d1e0900a06f0919
--- /dev/null
+++ "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-06 \350\256\241\347\256\227\345\261\236\346\200\247\345\225\206\345\223\201\346\212\242\350\264\255\346\211\223\346\212\230\345\200\222\350\256\241\346\227\266/productdetail.html"	
@@ -0,0 +1,114 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>详情页面</title>
+<link href="a.css" rel="stylesheet" type="text/css">
+<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
+
+
+</head>
+<!-- 作业：一.id 的对象语法，去看看为啥id不行，
+二.写一个商品详情页，
+来个抢购倒计时1小时，比方说下单时间离截至时间剩余1小时以外打6折，
+过10分钟折扣减少0.5个点(使用计算缓存) -->
+<body>
+
+<!-----商品详情部分------->
+<div class="shopdetails" id="app">
+	<!-------放大镜-------->
+	<div id="leftbox">
+	<div id="showbox">
+  <img src='imgs/1.png' width="400" />
+  
+	</div><!--展示图片盒子-->
+		<div id="showsum"></div><!--展示图片里边-->
+		<p class="showpage">
+ 		 <a href="javascript:void(0);" id="showlast"> < </a>
+  		 <a href="javascript:void(0);" id="shownext"> > </a>
+		</p>
+        
+	</div>
+    <!----中间----->
+
+    <div class="centerbox">
+        <p class="imgname">2022主新款高端定制婚纱礼服明星同款</p><br>
+        <h2>抢购倒计时：{{count}}</h2><br>
+    	<p class="Aprice">价格：<samp>￥{{cost}}</samp></p>
+    	<p class="price">促销价：<samp>￥{{price}}{{countdown}}</samp></p>
+    	<p class="youhui">店铺优惠：<samp>当前商品打{{discount}}折</samp></p>
+        <ul>
+        <li class="kuanshi">款式：</li><br>
+        <li class=" now shopimg"><a href="#" title="熊猫套装"><img src="imgs/2.webp" width="45"></a></li>
+        <li class="shopimg"><a href="#" title="铁塔套装"><img src="imgs/3.webp" width="45"></a></li>
+        <li class="shopimg"><a href="#" title="创意胡子"><img src="imgs/4.webp" width="45"></a></li>
+        <li class="shopimg"><a href="#" title="四色小猫"><img src="imgs/5.webp" width="45"></a></li>
+        </ul><br>
+        <div class="clear"></div>
+        <p class="chima">尺码：均码</p>
+        <p class="buy"><a href="#" id="firstbuy">立即购买</a><a href="#">加入购物车</a></p>
+   		<div class="clear"></div>
+        <div class="fenx"><a href="#"><img src="imgs/1.png"></a></div>
+        <p class="fuwu">服务承诺：</p>
+        <p class="pay">支付方式：</p>
+        <br><br>
+        
+    </div>
+            
+</div>
+</body>
+<script>
+    let vm = new Vue({
+        el:'#app',
+        data:{
+            count: '00时60分00秒', //倒计时
+            seconds: 3600 ,//
+            price:300 ,
+            cost:500,
+            discount:6,
+            end:null,
+            btn:null
+        },
+        methods:{
+             // 天 时 分 秒 格式化函数
+            countDown() {
+                let d = parseInt(this.seconds / (24 * 60 * 60))
+                d = d < 10 ? "0" + d : d
+                let h = parseInt(this.seconds / (60 * 60) % 24);
+                h = h < 10 ? "0" + h : h
+                let m = parseInt(this.seconds / 60 % 60);
+                m = m < 10 ? "0" + m : m
+                let s = parseInt(this.seconds % 60);
+                s = s < 10 ? "0" + s : s
+                this.count =  h + '时' + m + '分' + s + '秒'
+            },
+            //定时器没过1秒参数减1
+            Time() {
+                this.btn=setInterval(() => {
+                    this.seconds -= 1
+                    this.countDown();
+                    if(this.seconds == 0){
+                    clearInterval(this.btn)
+                    }
+                }, 1000)
+            },
+                },
+        mounted() {
+            this.Time() //调用定时器
+            },
+        computed:{
+            countdown:function(){
+                this.end = setInterval(() => {
+                this.discount += 0.5;
+                this.price = parseInt(this.discount * 0.1 * this.cost);
+                if(this.discount == 10){
+                    clearInterval(this.end)
+                 }
+                }, 600000)
+                }
+            }
+            
+            
+    })
+</script>
+</html>
\ No newline at end of file
diff --git "a/\346\234\261\347\276\216\346\236\227/Vue.js/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\345\256\214\345\226\204/register.html" "b/\346\234\261\347\276\216\346\236\227/Vue.js/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\345\256\214\345\226\204/register.html"
new file mode 100644
index 0000000000000000000000000000000000000000..268e95c22eeddc50905451e39eab6da652ad3837
--- /dev/null
+++ "b/\346\234\261\347\276\216\346\236\227/Vue.js/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\345\256\214\345\226\204/register.html"	
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!-- <script src="vue.js"></script> -->
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
+    <title>登陆注册页面</title>
+    <!-- 写一个注册页面，美观点，然后用vue 进行渲染，要有手机号注册，要有密码，确认密码，要进行 数据验证，手机格式验证，密码6位以上的验证 -->
+    <!-- 确认密码于密码一致性的验证 -->
+</head>
+<style>
+    * {
+        padding: 0;
+        margin: 0;
+    }
+
+    body {
+        background-color: aliceblue;
+    }
+
+    #main {
+        width: 500px;
+        margin: 0 auto;
+        text-align: center;
+        padding: 150px;
+    }
+
+    #button {
+        background-color: rgba(121, 196, 223, 0.5);
+        font-size: 18px;
+        margin-bottom: 10px;
+        margin: 10px 20px 30px 10px;
+        text-decoration: none;
+        border-radius: 8px;
+    }
+</style>
+
+<body>
+    <div id="main">
+        <form action="" method="get" @submit.prevent="submit" name="form" @keyup.enter="submit">
+            <fieldset>
+                <legend>Register</legend><br>
+                <label for="username">用户名: <input type="text" name="username" id="username" placeholder="请输入用户名"
+                        required v-model='username'></label><br><br>
+                <label for="password">密码: <input type="password" name="password" id="password" placeholder="请输入密码"
+                        required pattern="^[a-zA-Z]\w{5,17}$" v-model='password'></label><br><br>
+
+                <label for="verifypassword">确认密码: <input type="password" name="password" id="verifypassword"
+                        placeholder="请确认密码" required pattern="^[a-zA-Z]\w{5,17}$" v-model='verifypassword'></label><br><br>
+
+                <label for="sex">性别：<input type="radio" name="sex" id="sex" value="男" v-model='checkval'>男</label>    &nbsp&nbsp
+                <input type="radio" name="sex" id="sex" value="女" v-model='checkval'>女</label>
+                <br><br>
+                <label for="province">
+                    省份:
+                    <select name="" id="province" v-model='select1'>
+                        <option value="江西省">江西省</option>
+                        <option value="福建省">福建省</option>
+                        <option value="湖南省">湖南省</option>
+                        <option value="湖北省">湖北省</option>
+                    </select>
+                    {{select1}}
+                    &nbsp&nbsp
+                    <label for="city">
+                        市:
+                        <select name="" id="city" v-model='select2'>
+                            <option value="南昌">南昌</option>
+                            <option value="福州">福州</option>
+                            <option value="长沙">长沙</option>
+                            <option value="武汉">武汉</option>
+                        </select>
+                        {{select2}}
+                    </label>
+                    <br><br>
+                    <input type="submit" value="注册" id="button">
+            </fieldset>
+        </form>
+    </div>
+</body>
+<script>
+
+    let vue = new Vue({
+        el: "#main",
+        data: {
+            username:'',
+            password:'',
+            verifypassword:'',
+            checkval:'',
+            select1:'',
+            select2:'',
+   
+        },
+        methods: {
+            submit: function () {
+                if (this.password == this.verifypassword) {
+                    window.location.href = 'https://mp.weixin.qq.com/mp/appmsgalbum?__biz=Mzg3NTcwNTAxMg==&action=getalbum&album_id=2321438574316961792#wechat_redirect';
+                }
+            },
+
+        }
+    })
+</script>
+
+</html>
\ No newline at end of file
diff --git "a/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-08 \350\207\252\345\256\232\344\271\211vue\346\214\207\344\273\244\345\256\236\347\216\260\350\203\214\346\231\257\351\242\234\350\211\262\345\210\207\346\215\242/demo.js" "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-08 \350\207\252\345\256\232\344\271\211vue\346\214\207\344\273\244\345\256\236\347\216\260\350\203\214\346\231\257\351\242\234\350\211\262\345\210\207\346\215\242/demo.js"
new file mode 100644
index 0000000000000000000000000000000000000000..44a0ad71669f5a4168eef4ec4bdbd0539a726848
--- /dev/null
+++ "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-08 \350\207\252\345\256\232\344\271\211vue\346\214\207\344\273\244\345\256\236\347\216\260\350\203\214\346\231\257\351\242\234\350\211\262\345\210\207\346\215\242/demo.js"	
@@ -0,0 +1 @@
+// 先把el添加class搞定 自建一个vue的指令,实现指定的背景色
\ No newline at end of file
diff --git "a/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-08 \350\207\252\345\256\232\344\271\211vue\346\214\207\344\273\244\345\256\236\347\216\260\350\203\214\346\231\257\351\242\234\350\211\262\345\210\207\346\215\242/homework.html" "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-08 \350\207\252\345\256\232\344\271\211vue\346\214\207\344\273\244\345\256\236\347\216\260\350\203\214\346\231\257\351\242\234\350\211\262\345\210\207\346\215\242/homework.html"
new file mode 100644
index 0000000000000000000000000000000000000000..3fa0ec31ac2c8384f53b465b0e734b9ac75b8ff6
--- /dev/null
+++ "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-08 \350\207\252\345\256\232\344\271\211vue\346\214\207\344\273\244\345\256\236\347\216\260\350\203\214\346\231\257\351\242\234\350\211\262\345\210\207\346\215\242/homework.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>自定义vue指令实现背景颜色切换</title>
+    <style>
+        #app{
+            width: 400px;
+            height: 350px;
+        }
+    </style>
+</head>
+<body>
+    <div id="app" v-change-background-color="bgcolor">
+        <input type="text" v-model="bgcolor" style="background-color: bisque;">
+    </div>
+
+    <script>
+        new Vue({
+            el:"#app",
+            data:{
+                bgcolor:"#5FCA34"
+            },
+            directives:{
+                changeBackgroundColor:{
+                    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/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-08 \350\207\252\345\256\232\344\271\211vue\346\214\207\344\273\244\345\256\236\347\216\260\350\203\214\346\231\257\351\242\234\350\211\262\345\210\207\346\215\242/\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244.html" "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-08 \350\207\252\345\256\232\344\271\211vue\346\214\207\344\273\244\345\256\236\347\216\260\350\203\214\346\231\257\351\242\234\350\211\262\345\210\207\346\215\242/\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244.html"
new file mode 100644
index 0000000000000000000000000000000000000000..37d344e310a9da34d6b48cee95b889968d7183c8
--- /dev/null
+++ "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-08 \350\207\252\345\256\232\344\271\211vue\346\214\207\344\273\244\345\256\236\347\216\260\350\203\214\346\231\257\351\242\234\350\211\262\345\210\207\346\215\242/\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244.html"	
@@ -0,0 +1,93 @@
+<!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>自定义指令2</title>
+</head>
+
+<body>
+    <div id="main">
+        <input type="text" v-change_color v-model="name">
+        <div v-add_img="image">
+            <div>我是子元素</div>
+        </div>
+    </div>
+
+</body>
+<script>
+    //全局directice
+    Vue.directive('focus', {
+        // 当被绑定的元素插入到 DOM 中时
+        inserted(el) {
+            // 获取焦点
+            el.focus();
+        }
+    });
+
+    //局部
+    let vue = new Vue({
+        el: "#main",
+        data: {
+            demo: 'demoname',
+            color: "blue",
+            name: 'demo',
+            image: 'https://img.alicdn.com/imgextra/i1/16381334/O1CN01hY19rb1Lj140e7by5_!!0-saturn_solar.jpg_468x468q75.jpg_.webp'
+        },
+        directives: {
+            focus: {//指令名不能写驼峰
+                // 指令的定义
+                inserted(el, binding) {
+                    el.focus();
+                }
+            },
+            change_color: {//指令名不能写驼峰
+                bind(el, binding) {
+                    console.log(el.parentNode)
+                },
+                // 指令的定义
+                inserted(el, binding) {
+                    console.log(el.parentNode)
+                    console.log(binding);
+                    el.style.color = binding.value;
+                    el.style.margin = "0 auto";
+                    el.id = 'demo';
+                    el.className = 'calss1';//自己测测
+                    el.title = '我是标题';
+                },
+                update(el, binding) {//vnode更新时触发
+                    console.log('update diaoyongle')
+                },
+                componentUpdated() {//vnode更新完以后触发
+
+                },
+                unbind() {//解绑时触发
+                }
+            },
+            add_img: {
+                // 指令的定义
+                inserted(el, binding) {
+                    let imgurl = binding.value;
+                    let image = new Image();//js 里面的 图片对象
+                    image.src = imgurl;
+                    image.onload = function () {//图片加载完时触发
+                        //console.log(image);
+                        console.log(image.width);
+                        console.log(image.height)
+                        el.style.width = image.width + "px";
+                        el.style.height = image.height + "px";
+                        el.style.background = "url(" + imgurl + ")";
+
+                    }
+
+                }
+            }
+
+        }
+    })
+</script>
+
+</html>
\ No newline at end of file
diff --git "a/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-12 \351\232\220\350\227\217\346\230\276\347\244\272/demo.html" "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-12 \351\232\220\350\227\217\346\230\276\347\244\272/demo.html"
new file mode 100644
index 0000000000000000000000000000000000000000..7013df22b859ca4b473983dab7b9cd572873e2d3
--- /dev/null
+++ "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-12 \351\232\220\350\227\217\346\230\276\347\244\272/demo.html"	
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
+    <title>动态指令作业</title>
+</head>
+<body>
+    <div id="app">
+       <name></name>
+    </div>
+    
+</body>
+<script>
+    Vue.component('name',{//组件也是一个实例，默认只能调用自身的属性和方法
+        data:function(){//为什么是函数？如果说对象，变量的指向到对象时，存储的是对象的地址，对象只有一份
+            return {
+                result:true
+            };
+        },
+        methods:{
+            change:function(){
+                 this.result=!this.result
+             }
+        },
+        template:'<div><button @click="change">点击</button><div v-if="result" style="width:100px;height:100px;backgroundColor:#c0c6ff">内容</div></div>'
+
+    });//组件的定义？ 可复用的vue实例,实例都是隔离的
+
+     new Vue({
+         el:"#app",
+        //  data:{
+        //      result:true
+        //  },
+         //这段可要可不要不影响
+        //  methods:{
+        //      change:function(){
+        //          this.result=!this.result
+        //      }
+        //  }
+     })
+</script>
+</html>
\ No newline at end of file
diff --git "a/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-13 \345\261\200\351\203\250\347\273\204\344\273\266\345\225\206\345\223\201\351\201\215\345\216\206/demo.html" "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-13 \345\261\200\351\203\250\347\273\204\344\273\266\345\225\206\345\223\201\351\201\215\345\216\206/demo.html"
new file mode 100644
index 0000000000000000000000000000000000000000..79bef3e5ce1a7458fe5aa6bb3dfc68613d3fe282
--- /dev/null
+++ "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-13 \345\261\200\351\203\250\347\273\204\344\273\266\345\225\206\345\223\201\351\201\215\345\216\206/demo.html"	
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
+    <title>作业定义一个局部组件，实现商品遍历，数据在普通实例</title>
+</head>
+
+<body>
+    <div id="app">
+        <name></name>
+
+        <!-- </div> -->
+        <school title='测试标题' content='测试内容'></school>
+        <!---在app的作用域内都可以输出实例的属性和方法-->
+        <!-- <school title='{{schoolName}}'></school>直接赋值不行，需要绑定属性 -->
+        <!-- <school :title='schoolName'></school> -->
+        <college :obj='obj' :score='score'></college>
+        <!--组件中怎么便利数组与对象  子元素中遍历-->
+        <ul >
+           <li ></li> 
+        </ul>
+        <language v-for="(arr,index) in arrs" :arr="arr" :index="index=index+1"></language>
+    </div>
+
+</body>
+<script>
+    //全局组件定义
+    Vue.component('name', {//组件也是一个实例，默认只能调用自身的属性和方法
+        data: function () {//为什么是函数？如果说对象，变量的指向到对象时，存储的是对象的地址，对象只有一份
+            return {
+                result: true
+            };
+        },
+        methods: {
+            change: function () {
+                this.result = !this.result
+            }
+        },
+        template: '<div><button @click="change">点击</button><div v-if="result">内容</div></div>'
+
+    });//组件的定义？ 可复用的vue实例,实例都是隔离的
+
+    //定一个对象
+    let school = {
+        data: function () {
+            return {
+            }
+        },
+        props: ['title','content'],//数组，对外暴露一个变量名
+        template: '<div style="color:red">{{title}}{{content}}</div>',
+    }
+
+    //定一个对象
+    let college = {
+        data: function () {
+            return {
+               
+            }
+        },
+        props: ['obj', 'score'],//数组，对外暴露一个变量名,传入的类型可以有多种，而且可以传入多个值
+        template: '<div style="color:red">  {{obj.name}}-----------{{obj.classNum}}-----{{score}}</div>',
+    }
+
+    //定一个对象
+    let language = {
+        props: ['arr','index'],//数组，对外暴露一个变量名
+        template: '<div style="color:red">{{index}}  请问---{{arr.name}}您好贵庚--------------你说啥我今年{{arr.age}}</div>',
+    }
+
+    //不能使用普通实例中的变量
+    new Vue({
+        el: "#app",
+        data: {
+            result: true,
+            schoolName: '闽西职业技术学院',
+            obj: {
+                name: '软件学院',
+                classNum: 7
+            },
+            score: 90,
+            arrs: [//vue怎么遍历数组,对象 v-for
+                { 'name': 'php', age: 30 },
+                { name: 'js', age: 30 },
+                { name: 'java', age: 30 },
+                { name: 'python', age: 35 }
+            ]
+        },
+        components: {
+            // 指令，过滤器,定义一个局部的指令，无非就是 components 中定义key = value 格式 value 必须是json格式
+            // 而且外层用到的 特殊标签就是key值
+            //schools: school,//第一个是key值，第二个是外层的json对象 这种格式可以
+            school,//简写方式 school:school 的简写
+            college,
+            language
+        }
+    })
+</script>
+
+</html>
\ No newline at end of file
diff --git "a/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-13 \345\261\200\351\203\250\347\273\204\344\273\266\345\225\206\345\223\201\351\201\215\345\216\206/product.html" "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-13 \345\261\200\351\203\250\347\273\204\344\273\266\345\225\206\345\223\201\351\201\215\345\216\206/product.html"
new file mode 100644
index 0000000000000000000000000000000000000000..8eaa704adc9a17f861392e4bc373f977fae1c3b7
--- /dev/null
+++ "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-13 \345\261\200\351\203\250\347\273\204\344\273\266\345\225\206\345\223\201\351\201\215\345\216\206/product.html"	
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
+  <title>作业定义一个局部组件，实现商品遍历，数据在普通实例</title>
+</head>
+
+<body>
+  <div id="app">
+    <ol>
+      <todo-item v-for="item in arr" :todo="item"></todo-item>
+    </ol>
+  </div>
+
+  <script>
+    Vue.component('todo-item', {
+      props: ['todo'],
+      template: '<li>{{ todo.name }}---{{todo.price}}</li>'
+    })
+    new Vue({
+      el: '#app',
+      data: {
+        arr: [
+          { name: '面膜', price: 169 },
+          { name: 'hfp护肤水乳', price: 389 },
+          { name: '雅诗兰黛气垫', price: 399 }
+        ]
+      }
+    })        
+  </script>
+
+</html>
\ No newline at end of file
diff --git "a/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-14 \347\273\204\344\273\266\345\265\214\345\245\227\357\274\210\345\225\206\345\223\201\350\217\234\345\215\225\357\274\211/demo.html" "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-14 \347\273\204\344\273\266\345\265\214\345\245\227\357\274\210\345\225\206\345\223\201\350\217\234\345\215\225\357\274\211/demo.html"
new file mode 100644
index 0000000000000000000000000000000000000000..bbb44be4c5f7b39d3466fed5dc03e51f7f25e21e
--- /dev/null
+++ "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-14 \347\273\204\344\273\266\345\265\214\345\245\227\357\274\210\345\225\206\345\223\201\350\217\234\345\215\225\357\274\211/demo.html"	
@@ -0,0 +1,227 @@
+<!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;
+        }
+        /* body{
+            background-image: url("./img/1.jpg") no-repeat;
+            z-index: 2;
+            width: 1000px;
+        } */
+        .card {
+            width: 210px;
+            height: 300px;
+            border: 1px solid rgb(212, 221, 223);
+            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: 105px;
+            line-height: 105px;
+            text-align: justify;
+            text-align-last: justify;
+            background-color:rgb(201, 196, 191);
+            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'><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: 'sk-II神仙水',
+                                price: 2399.00,
+                                img: "./img/1.jpg"
+                            },
+                            {
+                                name: '雅诗兰黛眼霜  ',
+                                price: 699,
+                                img: "./img/2.jpg"
+                            },
+                            {
+                                name: '机源水乳套盒',
+                                price: 695.5,
+                                img: "./img/3.jpg"
+                            },
+                            {
+                                name: '水乳',
+                                price: 2999,
+                                img: "./img/4.jpg"
+                            },
+                            {
+                                name: '鱼子酱护肤套盒',
+                                price: 1999,
+                                img: "./img/5.jpg"
+                            },
+                            {
+                                name: '花西子礼盒',
+                                price: 1999,
+                                img: "./img/6.jpg"
+                            },
+                        ]
+                    },
+                    { //第二个模块
+                        showname: '品牌名鞋',
+                        goods: [
+                            {
+                                name: '斐乐',
+                                price: 579,
+                                img: "./img/7.jpg"
+                            },
+                            {
+                                name: '耐克男鞋',
+                                price: 899,
+                                img: "./img/8.jpg"
+                            },
+                            {
+                                name: '亚瑟士男女鞋',
+                                price: 529,
+                                img: "./img/9.jpg"
+                            },
+                            {
+                                name: '小皮鞋',
+                                price: 469,
+                                img: "./img/10.jpg"
+                            },
+                            {
+                                name: '英伦小皮鞋',
+                                price: 398,
+                                img: "./img/11.jpg"
+                            },
+                            {
+                                name: '匡威',
+                                price: 949,
+                                img: "./img/12.jpg"
+                            },
+                        ]
+                    },
+                    { //第三个模块
+                        showname: '服装穿搭',
+                        goods: [
+                            {
+                                name: '小香风套餐',
+                                price: 886,
+                                img: "./img/13.jpg"
+                            },
+                            {
+                                name: '仙女裙子',
+                                price: 249,
+                                img: "./img/14.jpg"
+                            },
+                            {
+                                name: '纯御风小裙子',
+                                price: 99,
+                                img: "./img/15.jpg"
+                            },
+                            {
+                                name: '甜系女孩',
+                                price: 110,
+                                img: "./img/16.jpg"
+                            },
+                            {
+                                name: '辣妹上衣',
+                                price: 119,
+                                img: "./img/18.jpg"
+                            },
+                            {
+                                name: '晚礼服裙子',
+                                price: 679,
+                                img: "./img/21.jpg"
+                            },
+                        ]
+                    },
+                ]
+            },
+            components: {
+                // 注册组件
+                mydata,
+
+            }
+        })
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-14 \347\273\204\344\273\266\345\265\214\345\245\227\357\274\210\345\225\206\345\223\201\350\217\234\345\215\225\357\274\211/img/1.jpg" "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-14 \347\273\204\344\273\266\345\265\214\345\245\227\357\274\210\345\225\206\345\223\201\350\217\234\345\215\225\357\274\211/img/1.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..5ab6df9c6ac9f7b9ce6314082fee5372b5bd4123
Binary files /dev/null and "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-14 \347\273\204\344\273\266\345\265\214\345\245\227\357\274\210\345\225\206\345\223\201\350\217\234\345\215\225\357\274\211/img/1.jpg" differ
diff --git "a/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-14 \347\273\204\344\273\266\345\265\214\345\245\227\357\274\210\345\225\206\345\223\201\350\217\234\345\215\225\357\274\211/img/10.jpg" "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-14 \347\273\204\344\273\266\345\265\214\345\245\227\357\274\210\345\225\206\345\223\201\350\217\234\345\215\225\357\274\211/img/10.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..ecdaad8c90c60e5191f049be9e4d5873c3bb7ca4
Binary files /dev/null and "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-14 \347\273\204\344\273\266\345\265\214\345\245\227\357\274\210\345\225\206\345\223\201\350\217\234\345\215\225\357\274\211/img/10.jpg" differ
diff --git "a/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-14 \347\273\204\344\273\266\345\265\214\345\245\227\357\274\210\345\225\206\345\223\201\350\217\234\345\215\225\357\274\211/img/11.jpg" "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-14 \347\273\204\344\273\266\345\265\214\345\245\227\357\274\210\345\225\206\345\223\201\350\217\234\345\215\225\357\274\211/img/11.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..e08db4a5546f882645f4bb77d81f2812579b67bd
Binary files /dev/null and "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-14 \347\273\204\344\273\266\345\265\214\345\245\227\357\274\210\345\225\206\345\223\201\350\217\234\345\215\225\357\274\211/img/11.jpg" differ
diff --git "a/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-14 \347\273\204\344\273\266\345\265\214\345\245\227\357\274\210\345\225\206\345\223\201\350\217\234\345\215\225\357\274\211/img/12.jpg" "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-14 \347\273\204\344\273\266\345\265\214\345\245\227\357\274\210\345\225\206\345\223\201\350\217\234\345\215\225\357\274\211/img/12.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..b62a884fd8c5030c80c97610cd8bafed7c611b27
Binary files /dev/null and "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-14 \347\273\204\344\273\266\345\265\214\345\245\227\357\274\210\345\225\206\345\223\201\350\217\234\345\215\225\357\274\211/img/12.jpg" differ
diff --git "a/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-14 \347\273\204\344\273\266\345\265\214\345\245\227\357\274\210\345\225\206\345\223\201\350\217\234\345\215\225\357\274\211/img/13.jpg" "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-14 \347\273\204\344\273\266\345\265\214\345\245\227\357\274\210\345\225\206\345\223\201\350\217\234\345\215\225\357\274\211/img/13.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..c7786b3a301e2a2ec2049314a6fbda2e2fcb83d2
Binary files /dev/null and "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-14 \347\273\204\344\273\266\345\265\214\345\245\227\357\274\210\345\225\206\345\223\201\350\217\234\345\215\225\357\274\211/img/13.jpg" differ
diff --git "a/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-14 \347\273\204\344\273\266\345\265\214\345\245\227\357\274\210\345\225\206\345\223\201\350\217\234\345\215\225\357\274\211/img/14.jpg" "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-14 \347\273\204\344\273\266\345\265\214\345\245\227\357\274\210\345\225\206\345\223\201\350\217\234\345\215\225\357\274\211/img/14.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..b83f6498adc48067fb35e156f8e41572574327f2
Binary files /dev/null and "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-14 \347\273\204\344\273\266\345\265\214\345\245\227\357\274\210\345\225\206\345\223\201\350\217\234\345\215\225\357\274\211/img/14.jpg" differ
diff --git "a/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-14 \347\273\204\344\273\266\345\265\214\345\245\227\357\274\210\345\225\206\345\223\201\350\217\234\345\215\225\357\274\211/img/15.jpg" "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-14 \347\273\204\344\273\266\345\265\214\345\245\227\357\274\210\345\225\206\345\223\201\350\217\234\345\215\225\357\274\211/img/15.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..e036e6ee81deb34021b3b74d756d5aa9c8f29390
Binary files /dev/null and "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-14 \347\273\204\344\273\266\345\265\214\345\245\227\357\274\210\345\225\206\345\223\201\350\217\234\345\215\225\357\274\211/img/15.jpg" differ
diff --git "a/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-14 \347\273\204\344\273\266\345\265\214\345\245\227\357\274\210\345\225\206\345\223\201\350\217\234\345\215\225\357\274\211/img/16.jpg" "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-14 \347\273\204\344\273\266\345\265\214\345\245\227\357\274\210\345\225\206\345\223\201\350\217\234\345\215\225\357\274\211/img/16.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..7a6f0d9bd2320ad412b641759f224209dcdd6868
Binary files /dev/null and "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-14 \347\273\204\344\273\266\345\265\214\345\245\227\357\274\210\345\225\206\345\223\201\350\217\234\345\215\225\357\274\211/img/16.jpg" differ
diff --git "a/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-14 \347\273\204\344\273\266\345\265\214\345\245\227\357\274\210\345\225\206\345\223\201\350\217\234\345\215\225\357\274\211/img/17.jpg" "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-14 \347\273\204\344\273\266\345\265\214\345\245\227\357\274\210\345\225\206\345\223\201\350\217\234\345\215\225\357\274\211/img/17.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..8cc096d3224a37cb668c6ecfc01625da71e56957
Binary files /dev/null and "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-14 \347\273\204\344\273\266\345\265\214\345\245\227\357\274\210\345\225\206\345\223\201\350\217\234\345\215\225\357\274\211/img/17.jpg" differ
diff --git "a/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-14 \347\273\204\344\273\266\345\265\214\345\245\227\357\274\210\345\225\206\345\223\201\350\217\234\345\215\225\357\274\211/img/18.jpg" "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-14 \347\273\204\344\273\266\345\265\214\345\245\227\357\274\210\345\225\206\345\223\201\350\217\234\345\215\225\357\274\211/img/18.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..4dd996af05e5c385b2b101851b1ef1bcb797b871
Binary files /dev/null and "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-14 \347\273\204\344\273\266\345\265\214\345\245\227\357\274\210\345\225\206\345\223\201\350\217\234\345\215\225\357\274\211/img/18.jpg" differ
diff --git "a/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-14 \347\273\204\344\273\266\345\265\214\345\245\227\357\274\210\345\225\206\345\223\201\350\217\234\345\215\225\357\274\211/img/19.jpg" "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-14 \347\273\204\344\273\266\345\265\214\345\245\227\357\274\210\345\225\206\345\223\201\350\217\234\345\215\225\357\274\211/img/19.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..35c3eeb8ad36fe466e77f0938647e953194db22b
Binary files /dev/null and "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-14 \347\273\204\344\273\266\345\265\214\345\245\227\357\274\210\345\225\206\345\223\201\350\217\234\345\215\225\357\274\211/img/19.jpg" differ
diff --git "a/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-14 \347\273\204\344\273\266\345\265\214\345\245\227\357\274\210\345\225\206\345\223\201\350\217\234\345\215\225\357\274\211/img/2.jpg" "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-14 \347\273\204\344\273\266\345\265\214\345\245\227\357\274\210\345\225\206\345\223\201\350\217\234\345\215\225\357\274\211/img/2.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..25b8238ab5c57429dd5722db69a4a20ac33c7671
Binary files /dev/null and "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-14 \347\273\204\344\273\266\345\265\214\345\245\227\357\274\210\345\225\206\345\223\201\350\217\234\345\215\225\357\274\211/img/2.jpg" differ
diff --git "a/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-14 \347\273\204\344\273\266\345\265\214\345\245\227\357\274\210\345\225\206\345\223\201\350\217\234\345\215\225\357\274\211/img/20.jpg" "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-14 \347\273\204\344\273\266\345\265\214\345\245\227\357\274\210\345\225\206\345\223\201\350\217\234\345\215\225\357\274\211/img/20.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..cc3fe632690bdc629f2b8fbbfb0577b08b8631fa
Binary files /dev/null and "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-14 \347\273\204\344\273\266\345\265\214\345\245\227\357\274\210\345\225\206\345\223\201\350\217\234\345\215\225\357\274\211/img/20.jpg" differ
diff --git "a/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-14 \347\273\204\344\273\266\345\265\214\345\245\227\357\274\210\345\225\206\345\223\201\350\217\234\345\215\225\357\274\211/img/21.jpg" "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-14 \347\273\204\344\273\266\345\265\214\345\245\227\357\274\210\345\225\206\345\223\201\350\217\234\345\215\225\357\274\211/img/21.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..5ab83f5c8984ac215d290ecd6c0f96f3ca31c217
Binary files /dev/null and "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-14 \347\273\204\344\273\266\345\265\214\345\245\227\357\274\210\345\225\206\345\223\201\350\217\234\345\215\225\357\274\211/img/21.jpg" differ
diff --git "a/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-14 \347\273\204\344\273\266\345\265\214\345\245\227\357\274\210\345\225\206\345\223\201\350\217\234\345\215\225\357\274\211/img/3.jpg" "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-14 \347\273\204\344\273\266\345\265\214\345\245\227\357\274\210\345\225\206\345\223\201\350\217\234\345\215\225\357\274\211/img/3.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..a4d83b0602cdc2565db31a3d3173179fa5f1ed3b
Binary files /dev/null and "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-14 \347\273\204\344\273\266\345\265\214\345\245\227\357\274\210\345\225\206\345\223\201\350\217\234\345\215\225\357\274\211/img/3.jpg" differ
diff --git "a/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-14 \347\273\204\344\273\266\345\265\214\345\245\227\357\274\210\345\225\206\345\223\201\350\217\234\345\215\225\357\274\211/img/4.jpg" "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-14 \347\273\204\344\273\266\345\265\214\345\245\227\357\274\210\345\225\206\345\223\201\350\217\234\345\215\225\357\274\211/img/4.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..8e68dc96d7691a07af15ffd4d7fbd9a4351ed115
Binary files /dev/null and "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-14 \347\273\204\344\273\266\345\265\214\345\245\227\357\274\210\345\225\206\345\223\201\350\217\234\345\215\225\357\274\211/img/4.jpg" differ
diff --git "a/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-14 \347\273\204\344\273\266\345\265\214\345\245\227\357\274\210\345\225\206\345\223\201\350\217\234\345\215\225\357\274\211/img/5.jpg" "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-14 \347\273\204\344\273\266\345\265\214\345\245\227\357\274\210\345\225\206\345\223\201\350\217\234\345\215\225\357\274\211/img/5.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..a16fd9a37e5771dcffdbc3e7860e9e9236510930
Binary files /dev/null and "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-14 \347\273\204\344\273\266\345\265\214\345\245\227\357\274\210\345\225\206\345\223\201\350\217\234\345\215\225\357\274\211/img/5.jpg" differ
diff --git "a/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-14 \347\273\204\344\273\266\345\265\214\345\245\227\357\274\210\345\225\206\345\223\201\350\217\234\345\215\225\357\274\211/img/6.jpg" "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-14 \347\273\204\344\273\266\345\265\214\345\245\227\357\274\210\345\225\206\345\223\201\350\217\234\345\215\225\357\274\211/img/6.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..f039eb846d648242084a9dc4f35cb1680b5e73c5
Binary files /dev/null and "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-14 \347\273\204\344\273\266\345\265\214\345\245\227\357\274\210\345\225\206\345\223\201\350\217\234\345\215\225\357\274\211/img/6.jpg" differ
diff --git "a/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-14 \347\273\204\344\273\266\345\265\214\345\245\227\357\274\210\345\225\206\345\223\201\350\217\234\345\215\225\357\274\211/img/7.jpg" "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-14 \347\273\204\344\273\266\345\265\214\345\245\227\357\274\210\345\225\206\345\223\201\350\217\234\345\215\225\357\274\211/img/7.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..85ab378895779d7c7bed4f230dc83982ae1678cf
Binary files /dev/null and "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-14 \347\273\204\344\273\266\345\265\214\345\245\227\357\274\210\345\225\206\345\223\201\350\217\234\345\215\225\357\274\211/img/7.jpg" differ
diff --git "a/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-14 \347\273\204\344\273\266\345\265\214\345\245\227\357\274\210\345\225\206\345\223\201\350\217\234\345\215\225\357\274\211/img/8.jpg" "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-14 \347\273\204\344\273\266\345\265\214\345\245\227\357\274\210\345\225\206\345\223\201\350\217\234\345\215\225\357\274\211/img/8.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..66e0029b1faf98ecb2f454dcb9046f9f2c62f0d9
Binary files /dev/null and "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-14 \347\273\204\344\273\266\345\265\214\345\245\227\357\274\210\345\225\206\345\223\201\350\217\234\345\215\225\357\274\211/img/8.jpg" differ
diff --git "a/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-14 \347\273\204\344\273\266\345\265\214\345\245\227\357\274\210\345\225\206\345\223\201\350\217\234\345\215\225\357\274\211/img/9.jpg" "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-14 \347\273\204\344\273\266\345\265\214\345\245\227\357\274\210\345\225\206\345\223\201\350\217\234\345\215\225\357\274\211/img/9.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..cabbb11491a0a3438126865045b8fe2f63d23952
Binary files /dev/null and "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-14 \347\273\204\344\273\266\345\265\214\345\245\227\357\274\210\345\225\206\345\223\201\350\217\234\345\215\225\357\274\211/img/9.jpg" differ
diff --git "a/\346\234\261\347\276\216\346\236\227/Vue.js/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\357\274\210\346\267\273\345\212\240\345\233\276\347\211\207)/demo.html" "b/\346\234\261\347\276\216\346\236\227/Vue.js/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\357\274\210\346\267\273\345\212\240\345\233\276\347\211\207)/demo.html"
new file mode 100644
index 0000000000000000000000000000000000000000..6e1f797d22061b7e3a4d6c1d0dafac816b44a571
--- /dev/null
+++ "b/\346\234\261\347\276\216\346\236\227/Vue.js/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\357\274\210\346\267\273\345\212\240\345\233\276\347\211\207)/demo.html"	
@@ -0,0 +1,223 @@
+<!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: 150px;
+            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>
+    <div id="app">
+        <mydata :shname="app[0]"><img style="height: 150px;width: 100%;" src="./img/1.jpg" alt=""></mydata>
+        <mydata :shname="app[1]"><img style="height: 150px;width: 100%;" src="./img/7.jpg" alt=""></mydata>
+       <mydata :shname="app[2]"><img style="height: 150px;width: 100%;" src="./img/10.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: 'sk-II神仙水',
+                                price: 2399.00,
+                                img: "./img/1.jpg"
+                            },
+                            {
+                                name: '雅诗兰黛眼霜  ',
+                                price: 699,
+                                img: "./img/2.jpg"
+                            },
+                            {
+                                name: '机源水乳套盒',
+                                price: 695.5,
+                                img: "./img/3.jpg"
+                            },
+                            {
+                                name: '水乳',
+                                price: 2999,
+                                img: "./img/4.jpg"
+                            },
+                            {
+                                name: '鱼子酱护肤套盒',
+                                price: 1999,
+                                img: "./img/5.jpg"
+                            },
+                            {
+                                name: '花西子礼盒',
+                                price: 1999,
+                                img: "./img/6.jpg"
+                            },
+                        ]
+                    },
+                    { //第二个模块
+                        showname: '品牌名鞋',
+                        goods: [
+                            {
+                                name: '斐乐',
+                                price: 579,
+                                img: "./img/7.jpg"
+                            },
+                            {
+                                name: '耐克男鞋',
+                                price: 899,
+                                img: "./img/8.jpg"
+                            },
+                            {
+                                name: '亚瑟士男女鞋',
+                                price: 529,
+                                img: "./img/9.jpg"
+                            },
+                            {
+                                name: '小皮鞋',
+                                price: 469,
+                                img: "./img/10.jpg"
+                            },
+                            {
+                                name: '英伦小皮鞋',
+                                price: 398,
+                                img: "./img/11.jpg"
+                            },
+                            {
+                                name: '匡威',
+                                price: 949,
+                                img: "./img/12.jpg"
+                            },
+                        ]
+                    },
+                    { //第三个模块
+                        showname: '服装穿搭',
+                        goods: [
+                            {
+                                name: '小香风套餐',
+                                price: 886,
+                                img: "./img/13.jpg"
+                            },
+                            {
+                                name: '仙女裙子',
+                                price: 249,
+                                img: "./img/14.jpg"
+                            },
+                            {
+                                name: '纯御风小裙子',
+                                price: 99,
+                                img: "./img/15.jpg"
+                            },
+                            {
+                                name: '甜系女孩',
+                                price: 110,
+                                img: "./img/16.jpg"
+                            },
+                            {
+                                name: '辣妹上衣',
+                                price: 119,
+                                img: "./img/18.jpg"
+                            },
+                            {
+                                name: '晚礼服裙子',
+                                price: 679,
+                                img: "./img/21.jpg"
+                            },
+                        ]
+                    },
+                ]
+            },
+            components: {
+                // 注册组件
+                mydata,
+
+            }
+        })
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\346\234\261\347\276\216\346\236\227/Vue.js/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\357\274\210\346\267\273\345\212\240\345\233\276\347\211\207)/img/1.jpg" "b/\346\234\261\347\276\216\346\236\227/Vue.js/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\357\274\210\346\267\273\345\212\240\345\233\276\347\211\207)/img/1.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..5ab6df9c6ac9f7b9ce6314082fee5372b5bd4123
Binary files /dev/null and "b/\346\234\261\347\276\216\346\236\227/Vue.js/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\357\274\210\346\267\273\345\212\240\345\233\276\347\211\207)/img/1.jpg" differ
diff --git "a/\346\234\261\347\276\216\346\236\227/Vue.js/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\357\274\210\346\267\273\345\212\240\345\233\276\347\211\207)/img/10.jpg" "b/\346\234\261\347\276\216\346\236\227/Vue.js/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\357\274\210\346\267\273\345\212\240\345\233\276\347\211\207)/img/10.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..ecdaad8c90c60e5191f049be9e4d5873c3bb7ca4
Binary files /dev/null and "b/\346\234\261\347\276\216\346\236\227/Vue.js/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\357\274\210\346\267\273\345\212\240\345\233\276\347\211\207)/img/10.jpg" differ
diff --git "a/\346\234\261\347\276\216\346\236\227/Vue.js/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\357\274\210\346\267\273\345\212\240\345\233\276\347\211\207)/img/11.jpg" "b/\346\234\261\347\276\216\346\236\227/Vue.js/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\357\274\210\346\267\273\345\212\240\345\233\276\347\211\207)/img/11.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..e08db4a5546f882645f4bb77d81f2812579b67bd
Binary files /dev/null and "b/\346\234\261\347\276\216\346\236\227/Vue.js/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\357\274\210\346\267\273\345\212\240\345\233\276\347\211\207)/img/11.jpg" differ
diff --git "a/\346\234\261\347\276\216\346\236\227/Vue.js/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\357\274\210\346\267\273\345\212\240\345\233\276\347\211\207)/img/12.jpg" "b/\346\234\261\347\276\216\346\236\227/Vue.js/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\357\274\210\346\267\273\345\212\240\345\233\276\347\211\207)/img/12.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..b62a884fd8c5030c80c97610cd8bafed7c611b27
Binary files /dev/null and "b/\346\234\261\347\276\216\346\236\227/Vue.js/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\357\274\210\346\267\273\345\212\240\345\233\276\347\211\207)/img/12.jpg" differ
diff --git "a/\346\234\261\347\276\216\346\236\227/Vue.js/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\357\274\210\346\267\273\345\212\240\345\233\276\347\211\207)/img/13.jpg" "b/\346\234\261\347\276\216\346\236\227/Vue.js/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\357\274\210\346\267\273\345\212\240\345\233\276\347\211\207)/img/13.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..c7786b3a301e2a2ec2049314a6fbda2e2fcb83d2
Binary files /dev/null and "b/\346\234\261\347\276\216\346\236\227/Vue.js/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\357\274\210\346\267\273\345\212\240\345\233\276\347\211\207)/img/13.jpg" differ
diff --git "a/\346\234\261\347\276\216\346\236\227/Vue.js/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\357\274\210\346\267\273\345\212\240\345\233\276\347\211\207)/img/14.jpg" "b/\346\234\261\347\276\216\346\236\227/Vue.js/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\357\274\210\346\267\273\345\212\240\345\233\276\347\211\207)/img/14.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..b83f6498adc48067fb35e156f8e41572574327f2
Binary files /dev/null and "b/\346\234\261\347\276\216\346\236\227/Vue.js/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\357\274\210\346\267\273\345\212\240\345\233\276\347\211\207)/img/14.jpg" differ
diff --git "a/\346\234\261\347\276\216\346\236\227/Vue.js/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\357\274\210\346\267\273\345\212\240\345\233\276\347\211\207)/img/15.jpg" "b/\346\234\261\347\276\216\346\236\227/Vue.js/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\357\274\210\346\267\273\345\212\240\345\233\276\347\211\207)/img/15.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..e036e6ee81deb34021b3b74d756d5aa9c8f29390
Binary files /dev/null and "b/\346\234\261\347\276\216\346\236\227/Vue.js/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\357\274\210\346\267\273\345\212\240\345\233\276\347\211\207)/img/15.jpg" differ
diff --git "a/\346\234\261\347\276\216\346\236\227/Vue.js/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\357\274\210\346\267\273\345\212\240\345\233\276\347\211\207)/img/16.jpg" "b/\346\234\261\347\276\216\346\236\227/Vue.js/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\357\274\210\346\267\273\345\212\240\345\233\276\347\211\207)/img/16.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..7a6f0d9bd2320ad412b641759f224209dcdd6868
Binary files /dev/null and "b/\346\234\261\347\276\216\346\236\227/Vue.js/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\357\274\210\346\267\273\345\212\240\345\233\276\347\211\207)/img/16.jpg" differ
diff --git "a/\346\234\261\347\276\216\346\236\227/Vue.js/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\357\274\210\346\267\273\345\212\240\345\233\276\347\211\207)/img/17.jpg" "b/\346\234\261\347\276\216\346\236\227/Vue.js/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\357\274\210\346\267\273\345\212\240\345\233\276\347\211\207)/img/17.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..8cc096d3224a37cb668c6ecfc01625da71e56957
Binary files /dev/null and "b/\346\234\261\347\276\216\346\236\227/Vue.js/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\357\274\210\346\267\273\345\212\240\345\233\276\347\211\207)/img/17.jpg" differ
diff --git "a/\346\234\261\347\276\216\346\236\227/Vue.js/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\357\274\210\346\267\273\345\212\240\345\233\276\347\211\207)/img/18.jpg" "b/\346\234\261\347\276\216\346\236\227/Vue.js/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\357\274\210\346\267\273\345\212\240\345\233\276\347\211\207)/img/18.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..4dd996af05e5c385b2b101851b1ef1bcb797b871
Binary files /dev/null and "b/\346\234\261\347\276\216\346\236\227/Vue.js/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\357\274\210\346\267\273\345\212\240\345\233\276\347\211\207)/img/18.jpg" differ
diff --git "a/\346\234\261\347\276\216\346\236\227/Vue.js/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\357\274\210\346\267\273\345\212\240\345\233\276\347\211\207)/img/19.jpg" "b/\346\234\261\347\276\216\346\236\227/Vue.js/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\357\274\210\346\267\273\345\212\240\345\233\276\347\211\207)/img/19.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..35c3eeb8ad36fe466e77f0938647e953194db22b
Binary files /dev/null and "b/\346\234\261\347\276\216\346\236\227/Vue.js/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\357\274\210\346\267\273\345\212\240\345\233\276\347\211\207)/img/19.jpg" differ
diff --git "a/\346\234\261\347\276\216\346\236\227/Vue.js/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\357\274\210\346\267\273\345\212\240\345\233\276\347\211\207)/img/2.jpg" "b/\346\234\261\347\276\216\346\236\227/Vue.js/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\357\274\210\346\267\273\345\212\240\345\233\276\347\211\207)/img/2.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..25b8238ab5c57429dd5722db69a4a20ac33c7671
Binary files /dev/null and "b/\346\234\261\347\276\216\346\236\227/Vue.js/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\357\274\210\346\267\273\345\212\240\345\233\276\347\211\207)/img/2.jpg" differ
diff --git "a/\346\234\261\347\276\216\346\236\227/Vue.js/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\357\274\210\346\267\273\345\212\240\345\233\276\347\211\207)/img/20.jpg" "b/\346\234\261\347\276\216\346\236\227/Vue.js/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\357\274\210\346\267\273\345\212\240\345\233\276\347\211\207)/img/20.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..cc3fe632690bdc629f2b8fbbfb0577b08b8631fa
Binary files /dev/null and "b/\346\234\261\347\276\216\346\236\227/Vue.js/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\357\274\210\346\267\273\345\212\240\345\233\276\347\211\207)/img/20.jpg" differ
diff --git "a/\346\234\261\347\276\216\346\236\227/Vue.js/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\357\274\210\346\267\273\345\212\240\345\233\276\347\211\207)/img/21.jpg" "b/\346\234\261\347\276\216\346\236\227/Vue.js/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\357\274\210\346\267\273\345\212\240\345\233\276\347\211\207)/img/21.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..5ab83f5c8984ac215d290ecd6c0f96f3ca31c217
Binary files /dev/null and "b/\346\234\261\347\276\216\346\236\227/Vue.js/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\357\274\210\346\267\273\345\212\240\345\233\276\347\211\207)/img/21.jpg" differ
diff --git "a/\346\234\261\347\276\216\346\236\227/Vue.js/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\357\274\210\346\267\273\345\212\240\345\233\276\347\211\207)/img/3.jpg" "b/\346\234\261\347\276\216\346\236\227/Vue.js/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\357\274\210\346\267\273\345\212\240\345\233\276\347\211\207)/img/3.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..a4d83b0602cdc2565db31a3d3173179fa5f1ed3b
Binary files /dev/null and "b/\346\234\261\347\276\216\346\236\227/Vue.js/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\357\274\210\346\267\273\345\212\240\345\233\276\347\211\207)/img/3.jpg" differ
diff --git "a/\346\234\261\347\276\216\346\236\227/Vue.js/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\357\274\210\346\267\273\345\212\240\345\233\276\347\211\207)/img/4.jpg" "b/\346\234\261\347\276\216\346\236\227/Vue.js/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\357\274\210\346\267\273\345\212\240\345\233\276\347\211\207)/img/4.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..8e68dc96d7691a07af15ffd4d7fbd9a4351ed115
Binary files /dev/null and "b/\346\234\261\347\276\216\346\236\227/Vue.js/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\357\274\210\346\267\273\345\212\240\345\233\276\347\211\207)/img/4.jpg" differ
diff --git "a/\346\234\261\347\276\216\346\236\227/Vue.js/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\357\274\210\346\267\273\345\212\240\345\233\276\347\211\207)/img/5.jpg" "b/\346\234\261\347\276\216\346\236\227/Vue.js/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\357\274\210\346\267\273\345\212\240\345\233\276\347\211\207)/img/5.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..a16fd9a37e5771dcffdbc3e7860e9e9236510930
Binary files /dev/null and "b/\346\234\261\347\276\216\346\236\227/Vue.js/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\357\274\210\346\267\273\345\212\240\345\233\276\347\211\207)/img/5.jpg" differ
diff --git "a/\346\234\261\347\276\216\346\236\227/Vue.js/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\357\274\210\346\267\273\345\212\240\345\233\276\347\211\207)/img/6.jpg" "b/\346\234\261\347\276\216\346\236\227/Vue.js/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\357\274\210\346\267\273\345\212\240\345\233\276\347\211\207)/img/6.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..f039eb846d648242084a9dc4f35cb1680b5e73c5
Binary files /dev/null and "b/\346\234\261\347\276\216\346\236\227/Vue.js/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\357\274\210\346\267\273\345\212\240\345\233\276\347\211\207)/img/6.jpg" differ
diff --git "a/\346\234\261\347\276\216\346\236\227/Vue.js/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\357\274\210\346\267\273\345\212\240\345\233\276\347\211\207)/img/7.jpg" "b/\346\234\261\347\276\216\346\236\227/Vue.js/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\357\274\210\346\267\273\345\212\240\345\233\276\347\211\207)/img/7.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..85ab378895779d7c7bed4f230dc83982ae1678cf
Binary files /dev/null and "b/\346\234\261\347\276\216\346\236\227/Vue.js/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\357\274\210\346\267\273\345\212\240\345\233\276\347\211\207)/img/7.jpg" differ
diff --git "a/\346\234\261\347\276\216\346\236\227/Vue.js/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\357\274\210\346\267\273\345\212\240\345\233\276\347\211\207)/img/8.jpg" "b/\346\234\261\347\276\216\346\236\227/Vue.js/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\357\274\210\346\267\273\345\212\240\345\233\276\347\211\207)/img/8.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..66e0029b1faf98ecb2f454dcb9046f9f2c62f0d9
Binary files /dev/null and "b/\346\234\261\347\276\216\346\236\227/Vue.js/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\357\274\210\346\267\273\345\212\240\345\233\276\347\211\207)/img/8.jpg" differ
diff --git "a/\346\234\261\347\276\216\346\236\227/Vue.js/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\357\274\210\346\267\273\345\212\240\345\233\276\347\211\207)/img/9.jpg" "b/\346\234\261\347\276\216\346\236\227/Vue.js/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\357\274\210\346\267\273\345\212\240\345\233\276\347\211\207)/img/9.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..cabbb11491a0a3438126865045b8fe2f63d23952
Binary files /dev/null and "b/\346\234\261\347\276\216\346\236\227/Vue.js/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\357\274\210\346\267\273\345\212\240\345\233\276\347\211\207)/img/9.jpg" differ
