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