diff --git "a/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0406-\345\225\206\345\223\201\350\257\246\346\203\205\346\212\242\350\264\255\345\200\222\350\256\241\346\227\266/img/erh1.webp" "b/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0406-\345\225\206\345\223\201\350\257\246\346\203\205\346\212\242\350\264\255\345\200\222\350\256\241\346\227\266/img/erh1.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..53d3b627385dd4b2246fa8c15c2494d8cf0ec3f0
Binary files /dev/null and "b/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0406-\345\225\206\345\223\201\350\257\246\346\203\205\346\212\242\350\264\255\345\200\222\350\256\241\346\227\266/img/erh1.webp" differ
diff --git "a/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0406-\345\225\206\345\223\201\350\257\246\346\203\205\346\212\242\350\264\255\345\200\222\350\256\241\346\227\266/img/erh3.webp" "b/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0406-\345\225\206\345\223\201\350\257\246\346\203\205\346\212\242\350\264\255\345\200\222\350\256\241\346\227\266/img/erh3.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..14f1b9a05469ef597c240da75d6560b4f37a7bec
Binary files /dev/null and "b/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0406-\345\225\206\345\223\201\350\257\246\346\203\205\346\212\242\350\264\255\345\200\222\350\256\241\346\227\266/img/erh3.webp" differ
diff --git "a/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0406-\345\225\206\345\223\201\350\257\246\346\203\205\346\212\242\350\264\255\345\200\222\350\256\241\346\227\266/img/fc1.webp" "b/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0406-\345\225\206\345\223\201\350\257\246\346\203\205\346\212\242\350\264\255\345\200\222\350\256\241\346\227\266/img/fc1.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..8f08d796fc7e6326d213053cb48c25d5b6db5107
Binary files /dev/null and "b/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0406-\345\225\206\345\223\201\350\257\246\346\203\205\346\212\242\350\264\255\345\200\222\350\256\241\346\227\266/img/fc1.webp" differ
diff --git "a/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0406-\345\225\206\345\223\201\350\257\246\346\203\205\346\212\242\350\264\255\345\200\222\350\256\241\346\227\266/img/fc2.webp" "b/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0406-\345\225\206\345\223\201\350\257\246\346\203\205\346\212\242\350\264\255\345\200\222\350\256\241\346\227\266/img/fc2.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..ba477b0d0ea6cc8300a96b7e07ef0fc6c3e0c560
Binary files /dev/null and "b/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0406-\345\225\206\345\223\201\350\257\246\346\203\205\346\212\242\350\264\255\345\200\222\350\256\241\346\227\266/img/fc2.webp" differ
diff --git "a/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0406-\345\225\206\345\223\201\350\257\246\346\203\205\346\212\242\350\264\255\345\200\222\350\256\241\346\227\266/img/fc3.webp" "b/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0406-\345\225\206\345\223\201\350\257\246\346\203\205\346\212\242\350\264\255\345\200\222\350\256\241\346\227\266/img/fc3.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..43499ae9fdba7e81a2fc9485d4ec7e00cebe1a9c
Binary files /dev/null and "b/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0406-\345\225\206\345\223\201\350\257\246\346\203\205\346\212\242\350\264\255\345\200\222\350\256\241\346\227\266/img/fc3.webp" differ
diff --git "a/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0406-\345\225\206\345\223\201\350\257\246\346\203\205\346\212\242\350\264\255\345\200\222\350\256\241\346\227\266/img/fc4.webp" "b/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0406-\345\225\206\345\223\201\350\257\246\346\203\205\346\212\242\350\264\255\345\200\222\350\256\241\346\227\266/img/fc4.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..3f25d0d2a9b4507d2ed58d3778d0f95d1738419f
Binary files /dev/null and "b/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0406-\345\225\206\345\223\201\350\257\246\346\203\205\346\212\242\350\264\255\345\200\222\350\256\241\346\227\266/img/fc4.webp" differ
diff --git "a/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0406-\345\225\206\345\223\201\350\257\246\346\203\205\346\212\242\350\264\255\345\200\222\350\256\241\346\227\266/img/xl2.webp" "b/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0406-\345\225\206\345\223\201\350\257\246\346\203\205\346\212\242\350\264\255\345\200\222\350\256\241\346\227\266/img/xl2.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..649f7f3c212228c5b454dc6db17c3357392b3fe6
Binary files /dev/null and "b/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0406-\345\225\206\345\223\201\350\257\246\346\203\205\346\212\242\350\264\255\345\200\222\350\256\241\346\227\266/img/xl2.webp" differ
diff --git "a/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0406-\345\225\206\345\223\201\350\257\246\346\203\205\346\212\242\350\264\255\345\200\222\350\256\241\346\227\266/img/xl3.webp" "b/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0406-\345\225\206\345\223\201\350\257\246\346\203\205\346\212\242\350\264\255\345\200\222\350\256\241\346\227\266/img/xl3.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..7f73166c0207bd700e4546e0eb73ee9a232dd84c
Binary files /dev/null and "b/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0406-\345\225\206\345\223\201\350\257\246\346\203\205\346\212\242\350\264\255\345\200\222\350\256\241\346\227\266/img/xl3.webp" differ
diff --git "a/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0406-\345\225\206\345\223\201\350\257\246\346\203\205\346\212\242\350\264\255\345\200\222\350\256\241\346\227\266/index.html" "b/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0406-\345\225\206\345\223\201\350\257\246\346\203\205\346\212\242\350\264\255\345\200\222\350\256\241\346\227\266/index.html"
new file mode 100644
index 0000000000000000000000000000000000000000..3aa493bf28eb94449b0b3d44dd933d89f498046f
--- /dev/null
+++ "b/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0406-\345\225\206\345\223\201\350\257\246\346\203\205\346\212\242\350\264\255\345\200\222\350\256\241\346\227\266/index.html"
@@ -0,0 +1,211 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>piu亮美眉的小铺</title>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
+</head>
+
+<style>
+    body {
+        background: linear-gradient(to right, rgb(223, 241, 255), rgb(220, 230, 255));
+    }
+
+    h1 {
+        width: 600px;
+        margin: auto;
+        margin-top: 35px;
+        margin-bottom: 40px;
+        font-size: 40px;
+        color: cornflowerblue;
+    }
+
+    .first {
+        width: 90%;
+        margin: auto;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        justify-content: space-between;
+    }
+
+    .first>div {
+        margin-bottom: 20px;
+        border: 10px solid rgba(100, 148, 237, 0.5);
+        background-color: white;
+        position: relative;
+        /*文字浮动在图片上，设置相对定位*/
+    }
+
+    img {
+        width: 300px;
+        margin: 1px 1px 0 1px;
+    }
+
+    .show {
+        /* display: none; */
+        width: 250px;
+        border: 1px solid black;
+        border-radius: 10px;
+        position: absolute;
+        /*文字浮动在图片上，设置觉绝对定位*/
+        top: 150px;
+        left: 80px;
+        font-size: 20px;
+        background-color: rgba(255, 255, 255, 0.3);
+    }
+
+    p {
+        text-align: center;
+        color: rgba(100, 148, 237, 0.8);
+    }
+
+    .title {
+        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;
+    }
+
+    .img {
+        position: relative;
+    }
+
+    .btn {
+        position: absolute;
+        top: 320px;
+        left: 250px;
+        border-radius: 5px;
+        background-color: #c00;
+        color: white;
+    }
+</style>
+
+<body>
+    <h1>piu亮美眉们都会喜欢的商品噢！</h1>
+    <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 class="first">
+        <div v-for='(images,index) in list' class="img">
+            <img :src="images.img" @mouseover="ok(index)" @mouseout="no(index)">
+            <span class="show" v-show='shows===index'>{{images.details}}</span>
+            <p>{{images.name}}</p>
+            <button class="btn">抢购</button>
+        </div>
+    </div>
+
+</body>
+
+
+<script>
+
+
+    let vue = new Vue({
+
+        el: '.first',
+        data: {
+            shows: -1,
+            list: [{ img: './img/fc1.webp', name: '翡翠手镯', price: '399', details: '冰种飘花翡翠手镯。千里江山，万里雪飘。' },
+            { img: './img/erh1.webp', name: '耳环', details: '黑金立体方块耳坠。干练、优雅、性感。' },
+            { img: './img/xl2.webp', name: '项链', details: '立体长方形锁骨链。纯欲、知性。' },
+            { img: './img/fc3.webp', name: '翡翠手镯', details: '冰种白月光翡翠手镯。月是故乡明，露从今夜白。' },
+            { img: './img/fc4.webp', name: '和田玉叮当镯', details: '晴水底和田玉叮当镯。一步一响，一步一想~' },
+            { img: './img/erh3.webp', name: '耳环', details: '字母A长条回形针耳环。复古、优雅。' },
+            { img: './img/xl3.webp', name: '项链', details: '字母T长条项链毛衣链。温柔、百搭。' },
+            { img: './img/fc2.webp', name: '翡翠手镯', details: '冰种蓝水满绿翡翠手镯。盈盈一水间，脉脉不得语。' },
+            ],
+        },
+        methods: {
+            ok: function (index) {
+                if (this.shows == -1) {
+                    this.shows = index;
+                }
+
+            },
+            no: function (index) {
+                this.shows = -1;
+            }
+        }
+    });
+    let time = new Vue({
+        el: '#aa',
+        data: {
+                day: 0,
+                hour: 0,
+                min: 0,
+                sec: 0,
+                zhe:6,
+                price:500,
+                btn:null,
+                cost:300
+        },
+        
+        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()
+                }, 1000);
+            }
+        },
+        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/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0407-\350\241\250\345\215\225\350\276\223\345\205\245\347\273\221\345\256\232/demo.html" "b/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0407-\350\241\250\345\215\225\350\276\223\345\205\245\347\273\221\345\256\232/demo.html"
new file mode 100644
index 0000000000000000000000000000000000000000..9f229309b5c13e7686d4afc4a48a99de4e496591
--- /dev/null
+++ "b/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0407-\350\241\250\345\215\225\350\276\223\345\205\245\347\273\221\345\256\232/demo.html"
@@ -0,0 +1,308 @@
+<!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>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
+</head>
+<style>
+    * {
+        margin: 0;
+        padding: 0;
+    }
+
+    i {
+        font-style: normal;
+    }
+
+    a {
+        text-decoration: none;
+    }
+
+    input {
+        outline: none;
+        border: none;
+    }
+
+    html,
+    body {
+        width: 100%;
+        font-size: 14px;
+    }
+
+    .container {
+        width: 1210px;
+        margin: 0 auto;
+
+    }
+
+    .header {
+        width: 100%;
+        height: 110px;
+        box-shadow: 10px 10px 10px rgba(111, 111, 111, .5);
+        position: relative;
+
+    }
+    .header .desc {
+        font-size: 18px;
+        line-height: 34px;
+        border-left: 1px solid #ccc;
+        position: absolute;
+        left: 200px;
+        top: 28px;
+        padding-left: 20px;
+        font-weight: bold;
+    }
+
+    .register {
+        width: 400px;
+        margin: 0 auto;
+        padding-top: 40px;
+        position: relative;
+    }
+
+    .register-box {
+        width: 100%;
+        height: 50px;
+        padding-bottom: 40px;
+    }
+
+    .register-box .box {
+        line-height: 50px;
+        padding-left: 10px;
+        border: 1px solid #ccc;
+        position: relative;
+    }
+
+    .register-box .box.error {
+        border: 1px solid red;
+    }
+
+    .register-box .box input {
+        width: 200px;
+        font-size: 16px;
+        padding-left: 20px;
+    }
+    .tip {
+        width: 100%;
+        line-height: 30px;
+        font-size: 12px;
+        height: 60px;
+        color: red;
+    }
+
+    .register-box.xieyi {
+        width: 100%;
+        height: 20px;
+        padding-bottom: 30px;
+        /*	background-color: #ccc;*/
+    }
+
+    .register-box.xieyi .box {
+        line-height: normal;
+        padding: 0;
+        border: none;
+    }
+
+    .register-box.xieyi .box.error {
+        line-height: normal;
+        padding: 0;
+        border: 1px solid red;
+    }
+
+    .register-box.xieyi .box input {
+        width: auto;
+    }
+
+    .register button {
+        width: 100%;
+        height: 40px;
+        font: bold 18px/40px;
+        color: white;
+        background-color: darkred;
+        outline-color: white;
+    }
+
+    .register button:hover {
+        background-color: red;
+    }
+
+    .form-item::after {
+        content: attr(data-msg);
+        color: red;
+        font-size: 14px;
+        display: none;
+
+    }
+
+    .form-item.err::after {
+        display: block;
+    }
+
+    .form-item {
+        outline: none;
+        width: 100%;
+        height: 100%;
+        font-size: 14px;
+    }
+
+    .form-item.err input{
+        border-color: red;
+    }
+</style>
+
+<body>
+    <div class="header">
+        <a class="logo" href="##"></a>
+        <div class="desc">欢迎注册</div>
+    </div>
+    <!--版心-->
+    <div class="container">
+        <!--京东注册模块-->
+        <div class="register">
+            <!--用户名-->
+            <div class="register-box">
+                <!--表单项-->
+                <div class="box default" :class="['form-item', {'err':err}]" data-msg="请输入中文!!!">
+                    <label for="userName">用&nbsp;户&nbsp;名</label>
+                    <input type="text" id="userName" placeholder="您的账户名和登录名" v-model='userName' />
+                </div>
+                <!--提示信息-->
+                <div class="tip">
+                    <i></i>
+                    <span>{{usernamenull}}</span>
+                </div>
+            </div>
+            <!--设置密码-->
+            <div class="register-box">
+                <!--表单项-->
+                <div class="box default" :class="['form-item', {'err':err1}]" data-msg="请输入字母数字的6~16位密码">
+                    <label for="pwd">设 置 密 码</label>
+                    <input type="password" id="pwd" placeholder="建议至少两种字符组合" v-model="password" />
+                </div>
+                <!--提示信息-->
+                <div class="tip">
+                    <i></i>
+                    <span>{{passwordnull}}</span>
+                </div>
+            </div>
+            <!--确认密码-->
+            <div class="register-box">
+                <!--表单项-->
+                <div class="box default" :class="['form-item', {'err':err2}]" data-msg="密码输入不一致">
+                    <label for="pwd2">确 认 密 码</label>
+                    <input type="password" id="pwd2" placeholder="请再次输入密码" v-model='repassword'/>
+                </div>
+                <!--提示信息-->
+                <div class="tip">
+                    <i></i>
+                    <span>{{repasswordnull}}</span>
+                </div>
+            </div>
+            <!--设置邮箱-->
+            <div class="register-box">
+                <!--表单项-->
+                <div class="box default" :class="['form-item', {'err':err3}]" data-msg="邮箱格式错误">
+                    <label for="email">邮 箱 验 证</label>
+                    <input type="text" id="email" placeholder="请输入邮箱" v-model='email'/>
+                </div>
+                <!--提示信息-->
+                <div class="tip">
+                    <i></i>
+                    <span>{{emailnull}}</span>
+                </div>
+            </div>
+            <!--手机验证-->
+            <div class="register-box">
+                <!--表单项-->
+                <div class="box default" :class="['form-item', {'err':err4}]" data-msg="手机号格式错误">
+                    <label for="mobile">手 机 验 证</label>
+                    <input type="text" id="mobile" placeholder="请输入手机号" v-model="phone" />
+                </div>
+                <!--提示信息-->
+                <div class="tip">
+                    <i></i>
+                    <span>{{phonenull}}</span>
+                </div>
+            </div>
+            <!--注册协议-->
+            <div class="register-box xieyi">
+                <!--表单项-->
+                <div class="box default">
+                    <input type="checkbox" id="ck" />
+                    <span>我已阅读并同意<a href="##">《用户注册协议》</a></span>
+                </div>
+                <!--提示信息-->
+                <div class="tip">
+                    <i></i>
+                    <span></span>
+                </div>
+            </div>
+            <!--注册-->
+            <button type="submit"  @click="btn">注册</button>
+        </div>
+    </div>
+</body>
+<script>
+    new Vue({
+        el: '.container',
+        data: {
+            userName: '',
+            err: '',
+            password:'',
+            err1:'',
+            repassword:'',
+            err2:'',
+            email:'',
+            err3:'',
+            phone:'',
+            err4:'',
+            usernamenull:'',
+            passwordnull:'',
+            repasswordnull:'',
+            emailnull:'',
+            phonenull:'',
+        },
+        watch: {
+            userName(val) {
+                this.err = !/[\u4e00-\u9fa5]/.test(val);
+            },
+            password(val){
+                this.err1 = !/^[a-zA-Z0-9]{6,16}/.test(val);
+            },
+            repassword(val){
+                this.err2 = this.password != val
+            },
+            email(val){
+                this.err3 = !/^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/.test(val)
+            },
+            phone(val){
+                this.err4 = !/^1[3-9][0-9]\d{8}$/.test(val)
+            }
+        },
+        methods:{
+            btn:function(){
+                if(this.userName ==''){
+                    this.usernamenull ='用户名不为空';
+                }
+                if(this.password ==''){
+                    this.passwordnull ='密码不为空';
+                }
+                if(this.repassword ==''){
+                    this.repasswordnull ='确认密码不为空';
+                }
+                if(this.email ==''){
+                    this.emailnull ='邮箱不为空';
+                }
+                if(this.phone ==''){
+                    this.phonenull ='手机号不为空';
+                }
+            }
+        }
+    })
+</script>
+
+</html>
\ No newline at end of file
diff --git "a/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0408-\344\277\256\351\245\260\347\254\246/demo.html" "b/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0408-\344\277\256\351\245\260\347\254\246/demo.html"
new file mode 100644
index 0000000000000000000000000000000000000000..6d4584c7a927140559ae1d67dc8804cf97c604cc
--- /dev/null
+++ "b/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0408-\344\277\256\351\245\260\347\254\246/demo.html"
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</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/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0408-\344\277\256\351\245\260\347\254\246/demo01.html" "b/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0408-\344\277\256\351\245\260\347\254\246/demo01.html"
new file mode 100644
index 0000000000000000000000000000000000000000..f9b9e4621ade4236aee7400d1ca2c676b82d4871
--- /dev/null
+++ "b/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0408-\344\277\256\351\245\260\347\254\246/demo01.html"
@@ -0,0 +1,61 @@
+<!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>
+    <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>
+</body>
\ No newline at end of file