From ea30f02d86631601743c2a24bc4c709d635361f4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E7=BE=8E=E9=9B=AA?= <3140918699@qq.com>
Date: Mon, 11 Apr 2022 14:55:03 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../vue-04-06/demo01.html"                    | 298 +++++++++++++++++
 .../vue-04-07/demo.html"                      | 307 ++++++++++++++++++
 .../vue-04-08/demo01.html"                    |  54 +++
 .../vue-04-08/demo02.html"                    |  66 ++++
 4 files changed, 725 insertions(+)
 create mode 100644 "\346\235\250\347\276\216\351\233\252/vue-04-06/demo01.html"
 create mode 100644 "\346\235\250\347\276\216\351\233\252/vue-04-07/demo.html"
 create mode 100644 "\346\235\250\347\276\216\351\233\252/vue-04-08/demo01.html"
 create mode 100644 "\346\235\250\347\276\216\351\233\252/vue-04-08/demo02.html"
diff --git "a/\346\235\250\347\276\216\351\233\252/vue-04-06/demo01.html" "b/\346\235\250\347\276\216\351\233\252/vue-04-06/demo01.html"
new file mode 100644
index 0000000..91c47f4
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue-04-06/demo01.html"
@@ -0,0 +1,298 @@
+<!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: 1300px;
+            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">
+                <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://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.beihuo.net%2Ftupian%2FChEdGAZVcEEMGQVLCAQcDDsASxcNCEYBQUBtVlFNUFVfX0BAEF8mOlJUDiYBFzwkVDMQJlouEQw7KCkrQ0RbUEFWbV5TQ1dLAxgS.jpg&refer=http%3A%2F%2Fwww.beihuo.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652250179&t=b57d8db664bca0899a8ed6ebd151ae54',
+            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];
+            }
+        }
+
+    });
+
+    // this 倒是表示什么？ Vue 函数 函数可以多次调用吗？this 可以理解为在一次调用
+    //
+    // function demo(){
+    //     this
+    //     let i=10
+    //     i--;
+    //     console.log(i)
+    // }
+    // demo()
+    // demo()
+    vue.init();
+    vue.countdown();
+
+
+</script>
+
+</html>
\ No newline at end of file
diff --git "a/\346\235\250\347\276\216\351\233\252/vue-04-07/demo.html" "b/\346\235\250\347\276\216\351\233\252/vue-04-07/demo.html"
new file mode 100644
index 0000000..a0c9e19
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue-04-07/demo.html"
@@ -0,0 +1,307 @@
+<!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>
+    * {
+        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/\346\235\250\347\276\216\351\233\252/vue-04-08/demo01.html" "b/\346\235\250\347\276\216\351\233\252/vue-04-08/demo01.html"
new file mode 100644
index 0000000..4abea36
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue-04-08/demo01.html"
@@ -0,0 +1,54 @@
+<!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/dist/vue.js"></script>
+</head>
+<style>
+    div{
+        font-size: 20px;
+        border: 1px solid black;
+        width: 200px;
+        height: 200px;
+    }
+</style>
+<body>
+  <div>
+    <div v-changecolor="color" id="app">
+      <div @click="click">点击我随机变色</div>
+    </div>
+    <script>
+      Vue.directive('changecolor', {
+        inserted: function (el, binding) {
+          el.style.color = binding.value
+
+        },
+        update(el, binding) {
+          console.log("update 触发了");
+          el.style.color = binding.value;
+        },
+        componentUpdated(el, binding) {
+          console.log("更新完成时 触发了");
+        }
+      })
+      new Vue({
+        el: '#app',
+        data: {
+          color: 'pink'
+        },
+        methods: {
+          click: function () {
+            console.log("------------");
+            let color = Math.floor(Math.random() * 1000000);
+            this.color = '#' + color;
+            
+          }
+        }
+      })
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\346\235\250\347\276\216\351\233\252/vue-04-08/demo02.html" "b/\346\235\250\347\276\216\351\233\252/vue-04-08/demo02.html"
new file mode 100644
index 0000000..caee52a
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue-04-08/demo02.html"
@@ -0,0 +1,66 @@
+<!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>
+    <style>
+        #app {
+            width: 500px;
+            height:500px;
+            border: 1px solid black;
+            margin: 0%  30%;
+        }
+        #one{
+           margin: 0% 30%;
+        }
+    </style>
+</head>
+<body>
+    <h3 id="one">请输入16进制颜色</h3></br>
+    <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
-- 
Gitee

