From db95f3e18bcd4d132f0728fdc00b92cff42d2ee5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=84=E6=B6=A6=E5=B1=B1?= <1968965292@qq.com>
Date: Tue, 5 Apr 2022 13:02:21 +0800
Subject: [PATCH] =?UTF-8?q?vue=E4=BD=9C=E4=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../2022-3-29vue/index.html"                  |  55 ++++++++
 .../2022-3-30vue/index.html"                  |  69 ++++++++++
 .../2022-3-31vue/css/index.css"               |  40 ++++++
 .../2022-3-31vue/registration.html"           |  60 +++++++++
 .../demo01.html"                              |  52 ++++++++
 .../demo02.html"                              |  43 +++++++
 .../2022-4-01vue/demo01.html"                 | 119 ++++++++++++++++++
 7 files changed, 438 insertions(+)
 create mode 100644 "\351\273\204\346\266\246\345\261\261/2022-3-29vue/index.html"
 create mode 100644 "\351\273\204\346\266\246\345\261\261/2022-3-30vue/index.html"
 create mode 100644 "\351\273\204\346\266\246\345\261\261/2022-3-31vue/css/index.css"
 create mode 100644 "\351\273\204\346\266\246\345\261\261/2022-3-31vue/registration.html"
 create mode 100644 "\351\273\204\346\266\246\345\261\261/2022-3-31vue/\350\257\276\345\240\202\347\254\224\350\256\260/demo01.html"
 create mode 100644 "\351\273\204\346\266\246\345\261\261/2022-3-31vue/\350\257\276\345\240\202\347\254\224\350\256\260/demo02.html"
 create mode 100644 "\351\273\204\346\266\246\345\261\261/2022-4-01vue/demo01.html"
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-3-29vue/index.html" "b/\351\273\204\346\266\246\345\261\261/2022-3-29vue/index.html"
new file mode 100644
index 0000000..4c65186
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-3-29vue/index.html"
@@ -0,0 +1,55 @@
+<!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>vue练习el与data</title>
+</head>
+<body>
+    <!-- 写一个vue的页面，把 el，与data的元素都写写，有兴趣的可以看看源码 -->
+    <div id="lai">
+        {{message}}<br>
+        {{hong}}
+    </div>
+    <p>
+        {{hong}}
+    </p>
+
+    <div id="lai2">
+        {{message}}
+    </div>
+</body>
+<script>
+    let vm = new Vue({
+        el:"#lai",
+        data:{
+            message:'hello vue',
+            hong:'虹霖'
+        }
+    });
+    let vc = new Vue({
+        el:"p",
+        data:{
+            hong:'p标签的虹'
+        }
+    })
+    let vm2 = new Vue({
+        el:'#lai2',
+        data:{
+            message:"honglin123"
+        }
+
+    })
+    console.log(vm.$el);
+
+    console.log(vm.message);
+    console.log(vm.hong);
+    console.log(vc.hong);
+    console.log(vc.$data.hong);
+    // $watch方法，Chorem控制台输入 vm.message = '修改后message的值';
+    vm.$watch('message',function(newValue,oldValue){
+        console.log(newValue,oldValue)
+    });
+</script>
+</html>
\ No newline at end of file
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-3-30vue/index.html" "b/\351\273\204\346\266\246\345\261\261/2022-3-30vue/index.html"
new file mode 100644
index 0000000..fda361b
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-3-30vue/index.html"
@@ -0,0 +1,69 @@
+<!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="vue.js"></script> -->
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
+</head>
+<body>
+    <div id="app">
+        <div>{{text}}+第一段文字</div>
+        <div v-text="text">+使用v-text,显示不了<li>这是li,也显示不了</li></div>
+        
+        <div>{{html}}</div>
+        <div v-html="html">使用v-html</div>
+        <!-- v-bind:绑定属性 -->
+        <div id="demo"></div>
+        <div v-bind:id="'1_'+id+'_5'">控制台查看v-bind:id</div>
+        <!-- 自定义属性 -->
+        <div v-bind:attr_id="attrid"></div>
+        <div v-bind:class="class1">class</div>
+        
+        <button v-bind:disabled="isButtonDisabled">false状态的按钮</button>
+        <button v-bind:disabled="isButtonDisabled2">ture状态的按钮</button>
+        <div>{{num+'+num后续的输出'}}</div>
+        <div>{{ok?'输出ok':'输出不ok'}}</div>
+        <div>{{val.trim()}}</div>
+        <div>{{echo(val)}}</div>
+        <div v-if="result">if显示?????</div>
+        <div v-else="result">else显示!!!</div>
+        <div v-show="result">show的显示???</div>
+        <div v-on:click="click">点击</div>
+        <div v-on:click="click2()">点击2</div>
+    </div>
+    
+</body>
+<script>
+    let data = {
+        text:'使用外部data写入的一段文本',
+        html:'<span style="color:red">我是html元素</span>',
+        id:'demo2',
+        attrid:100,
+        class1:'cl1',
+        isButtonDisabled:false,
+        isButtonDisabled2:true,
+        num:1000,
+        ok:false,
+        val:'  前面有空格，后面也有空格     ',
+        result:false,
+        click2:function(){
+            alert('虹霖')
+        }
+    }
+    let vue = new Vue({
+        el:"#app",
+        data:data,
+        methods:{
+            echo:function(a){
+                let b = '虹色'+a+'零零零';
+                return b;
+            },
+            click:function(){
+                alert('click')
+            }
+        }
+    })
+</script>
+</html>
\ No newline at end of file
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-3-31vue/css/index.css" "b/\351\273\204\346\266\246\345\261\261/2022-3-31vue/css/index.css"
new file mode 100644
index 0000000..8875393
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-3-31vue/css/index.css"
@@ -0,0 +1,40 @@
+* {
+    margin: 0 auto;
+    padding: 0;
+    background-color: seashell;
+
+}
+
+form {
+    margin-top: 200px;
+}
+.middle {
+    display: grid;
+    grid-template-columns:90px 300px;
+    grid-template-rows: repeat(4,80px);
+    justify-content: center;
+    align-items: center;
+}
+input {
+	width: 300px;
+	height: 40px;
+    padding-left: 12px;
+    /* -webkit-appearance:none;去除阴影边框 */
+    border: solid 1px chocolate;
+    border-radius: 10px;
+
+}
+.middle span {
+	justify-self: flex-end;
+	padding-right: 15px;
+
+}
+.middle .butt {
+    display: inline-grid;
+	width: 60px;
+    height: 40px;
+    border: solid 1px chocolate;
+    border-radius: 20px;
+    background-color: chocolate;
+    margin-left: 220px;
+}
\ No newline at end of file
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-3-31vue/registration.html" "b/\351\273\204\346\266\246\345\261\261/2022-3-31vue/registration.html"
new file mode 100644
index 0000000..0e67774
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-3-31vue/registration.html"
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>注册页面</title>
+    <link rel="stylesheet" href="./css/index.css">
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
+</head>
+
+<body>
+    <form action="" class="middle">
+        <span>手机号:</span><input type="text" name="username"  placeholder="请输入手机号" required id="phone" @change="phone">
+        <span>密码:</span><input type="password" name="password" placeholder="请输入密码" required id="password" @change="password">
+        <span>确认密码:</span><input type="password" name="password" placeholder="确认密码" required id="confirm" @change="confirm">
+        <span></span> <button class="butt">注册</button>
+    </form>
+</body>
+<script>
+    let data = {
+
+
+    }
+    let vue = new Vue({
+        el: '.middle',
+        data: data,
+        name: "search",
+
+        methods: {
+            phone:function(){
+                let phone = document.getElementById('phone').value;
+                let reg = /^1[3-9][0-9]{9}$/;
+                if(!(reg.test(phone))){
+                    alert('请输入正确的手机号')
+                }
+
+            },
+            password:function(){
+                let password = document.getElementById('password').value;
+                let reg = /^[a-zA-Z0-9]{6,}$/;
+                if(!(reg.test(password))){
+                    alert('请输入6位以上的密码')
+                    
+                }
+            },
+            confirm:function(){
+                let password = document.getElementById('password').value;
+                let confirm = document.getElementById('confirm').value;
+                if(password != confirm){
+                    alert('两次密码输入不一致')
+                }
+
+            }
+        }
+    })
+    
+</script>
+
+</html>
\ No newline at end of file
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-3-31vue/\350\257\276\345\240\202\347\254\224\350\256\260/demo01.html" "b/\351\273\204\346\266\246\345\261\261/2022-3-31vue/\350\257\276\345\240\202\347\254\224\350\256\260/demo01.html"
new file mode 100644
index 0000000..d122787
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-3-31vue/\350\257\276\345\240\202\347\254\224\350\256\260/demo01.html"
@@ -0,0 +1,52 @@
+<!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>vue事件</title>
+</head>
+<body>
+    <div id="main" v-on:click="">
+        <form action="" method="get" v-on:submit.prevent="submit2">
+            <input type="text" name="name">
+            <input type="submit" value="提交">
+        </form>
+        <div class="bigger" v-on:click="bigger"style="margin: 10% 0; width:300px;height:200px;background-color:green;">
+            <div class="small" v-on:click.stop="small" style="width:100px; height:100px;background: red;">小区域</div>
+        </div>
+        <div v-bind:class="classname"></div>
+        <div v-bind:[nm]="classname"></div>
+        <div v-on:[method]='click'>动态方法绑定</div>
+    </div>
+</body>
+<script>
+    let vue = new Vue({
+        el:'#main',
+        data:{
+            classname:'class123', 
+            nm:'id',
+            method:'click'
+        },
+        methods:{
+            click:function(){
+                console.log("点击了");
+            },
+            submit:function(even){
+                even.preventDefault();//传递事件的方案去阻止默认行为
+                console.log("你真的有点提交");
+            },
+            submit2:function(){
+                console.log("你点击了提交按钮");
+            },
+            bigger:function(){
+                console.log("大区域被点击了");
+            },
+            small:function(){
+                //even.stopPropagation();
+                console.log("小区域被点击了");
+            }
+        }
+    })
+</script>
+</html>
\ No newline at end of file
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-3-31vue/\350\257\276\345\240\202\347\254\224\350\256\260/demo02.html" "b/\351\273\204\346\266\246\345\261\261/2022-3-31vue/\350\257\276\345\240\202\347\254\224\350\256\260/demo02.html"
new file mode 100644
index 0000000..617dc78
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-3-31vue/\350\257\276\345\240\202\347\254\224\350\256\260/demo02.html"
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
+</head>
+
+<body>
+    <div id="main">
+        <div>
+            {{msg}}
+        </div>
+    </div>
+    <!-- <div id="main2"></div> -->
+</body>
+<script>
+   let vue = new Vue({
+    //    el:"#main",
+       data:{
+           msg:'我是消息'
+       },
+       beforeCreate:function(){//初始化之前，原本访问属性 vue.msg,能不能去访问data的数据
+          console.log(this.msg);//如果解析data 成功了，可以通过 this.msg 访问,this 就是表示构建的这个对象
+       },
+       created:function(){//data已经初始化完成
+            console.log(this.msg);
+           
+       },
+       beforeMount:function(){//在moun之前，vue 会把el对于的dom元素选取，data数据解析，但是还没显示在页面中，它存在内存中
+        console.log(this.msg);//怎么去看元素又没被渲染成功?
+        console.log(this);//这时候都生成了渲染后的html
+       },
+       mount:function(){//替换掉了 el元素，已经挂在到了html页面中
+
+       }
+   });
+   vue.$mount("#main");
+   // obj.show() ,obj.handle()//就是具体的构建过程
+</script>    
+</html>
\ No newline at end of file
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-4-01vue/demo01.html" "b/\351\273\204\346\266\246\345\261\261/2022-4-01vue/demo01.html"
new file mode 100644
index 0000000..de909bb
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-4-01vue/demo01.html"
@@ -0,0 +1,119 @@
+<!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>
+
+<style>
+    :root {
+        --width: 100%;
+    }
+
+    * {
+        margin: 0;
+        padding: 0;
+        background-color: gainsboro;
+    }
+
+    ul {
+        column-width: 180px;
+        column-gap: 100px;
+        margin: 0 5% 0 5%;
+        list-style-type: none;
+    }
+
+    li {
+        width: 150px;
+        height: 250px;
+        text-align: center;
+        cursor: pointer;
+    }
+
+    img {
+
+        width: 150px;
+        display: inline-flex;
+        margin-top: 50px;
+    }
+
+    span {
+        color: deeppink;
+    }
+</style>
+
+<body>
+    <div id="main">
+        <ul>
+            <li v-for="(i,key) in goods" @click="click(key)">
+                <img v-bind:src="i.img" :alt="i.alt">
+                <span>{{i.name}}</span>
+            </li>
+
+        </ul>
+    </div>
+
+</body>
+<script>
+    let vue = new Vue({
+        el: "#main",
+
+        data: {
+            goods: [
+                {
+                    img: 'https://img13.360buyimg.com/jdcms/s150x150_jfs/t1/148049/19/26938/79650/623933a7E81bf506e/a3a062dd54f4ba5a.jpg.webp',
+                    name: '水杯',
+                    alt: '水杯',
+                },
+                {
+                    img: 'https://img10.360buyimg.com/jdcms/s150x150_jfs/t1/95654/2/63/178279/5da6bc30E9d74e5f4/173751d8100a0384.jpg.webp',
+                    name: '纯牛奶',
+                    alt: '纯牛奶',
+                },
+                {
+                    img: 'https://img20.360buyimg.com/jdcms/s150x150_jfs/t1/179603/34/22315/131853/62451a92E96fe9f51/3b5f90655bc29ada.jpg.webp',
+                    name: '空调',
+                    alt: '空调',
+                },
+                {
+                    img: 'https://img10.360buyimg.com/jdcms/s150x150_jfs/t1/181006/2/21848/209997/62456ed9Eb611003b/e755a4417e01cc29.jpg.webp',
+                    name: '双人沙发',
+                    alt: '双人沙发',
+                    click: 'click4'
+                },
+                {
+                    img: 'https://img30.360buyimg.com/jdcms/s150x150_jfs/t1/223510/18/8067/238763/623ad2f2E761374d6/5bd46ef2c687fb39.jpg.webp',
+                    name: '办公桌',
+                    alt: '办公桌',
+                },
+                {
+                    img: 'https://img14.360buyimg.com/jdcms/s150x150_jfs/t1/97735/23/26077/231812/6245e837Ec7ae4723/785c9b31e60b5943.jpg.webp',
+                    name: '安慕希',
+                    alt: '安慕希',
+                },
+            ],
+            lai:
+                [
+                    '这是一个水杯，不瞎应该看得出来',
+                    '这是一个纯牛奶，不瞎应该看得出来',
+                    '这是一个空调，不瞎应该看得出来',
+                    '这是一个双人沙发，不瞎应该看得出来',
+                    '这是一个办公桌，不瞎应该看得出来',
+                    '这是一个安慕希，不瞎应该看得出来',
+                ]
+        },
+        methods: {
+
+            click: function (key) {
+                console.log('第' + parseInt(key + 1) + '个')
+                alert(vue.lai[key]);
+            },
+
+        },
+    })
+</script>
+
+</html>
\ No newline at end of file
-- 
Gitee

