vue基础2

最新推荐文章于 2025-03-05 14:50:48 发布

原创最新推荐文章于 2025-03-05 14:50:48 发布 · 877 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #javascript

vue基础专栏收录该内容

6 篇文章

订阅专栏

本文深入讲解Vue.js的基础知识，包括三元运算符用于条件渲染，v-if与v-else-if、v-else语句的使用，以及在登录界面中的实践。此外，还介绍了v-show控制图片显示、事件绑定的v-on和各种修饰符，如.click.stop、.prevent、.self等，以及v-model实现双向数据绑定的应用。

上节复习

在这里插入图片描述

随着flag旗子true/false变颜色：

在这里插入图片描述

<!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.10/dist/vue.js"></script>
</head>
<body>
    <id id="app">
        <!-- 如果flag为false，显示蓝色，flag显示true，显示红色 -->
        <p style='color:aqua;'> 显示javascript表达式</p>

    </id>
    <script>
        var vm =new Vue({
            el:'#app',
            data:{
                flag:false
            },
            methods:{}
        })
    </script>
</body>
</html>

在这里插入图片描述

需求：随着旗子变颜色——三元运算符语法

三元运算符语法：属性值：条件？条件成立的值：条件不成立的值

在这里插入图片描述

条件成立true：

在这里插入图片描述

字符串拆分：split

<!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.10/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 如果flag为false，显示蓝色，flag显示true，显示红色 -->
        <!-- <p style='color:aqua;'> 显示javascript表达式</p> -->
        <!-- 三元运算符语法：条件？条件成立的值：条件不成立的值 -->
        <p v-bind:style="{color:flag?'red':'blue'}"> 显示javascript表达式</p>
        <!-- 文本中，用split -->
        <h1>{{userneme}}</h1>

    </div>
    <script>
        var vm =new Vue({
            el:'#app',
            data:{
                flag:true,
                userneme:"hello world"
            },
            methods:{}
        })
    </script>
</body>
</html>

在这里插入图片描述

拆分：

在这里插入图片描述

v-if语句

<!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.10/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 需求：weather sun：出去玩；weather rain 在家睡觉；weather other：上班 -->
        <p v-if="weather=='rain'">雨天</p>
        <p v-if="weather=='sun'">出去玩</p>
        <p v-if="weather=='other'">上班工作</p>

    </div>
    <script>
        var vm =new Vue({
            el:'#app',
            data:{
                weather:"rain"
                
            },
            methods:{}
        })
    </script>
    
</body>
</html>

在这里插入图片描述

v-if，v-else-if，v-else语句

<!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.10/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 需求：weather sun：出去玩；weather rain 在家睡觉；weather other：上班 -->
        <p v-if="weather=='rain'">雨天</p>
        <p v-else-if="weather=='sun'">出去玩</p>
        <p v-else>上班工作</p>

    </div>
    <script>
        var vm =new Vue({
            el:'#app',
            data:{
                weather:"other"
                
            },
            methods:{}
        })
    </script>
    
</body>
</html>

在这里插入图片描述

登录界面——input输入框

<!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.10/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 需求：
             邮箱：邮箱登陆界面
             qq：qq登陆界面
         -->
         <div>
             <input type="text" name="email" id="email">
         </div>



        
    </div>
    <script>
        var vm =new Vue({
            el:'#app',
            data:{
                weather:"sun"
                
            },
            methods:{}
        })
    </script>
    
</body>
</html>

在这里插入图片描述

增加p标签

在这里插入图片描述

换成label标签

在这里插入图片描述

两个结合使用

<!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.10/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 需求：
             邮箱：邮箱登陆界面
             qq：qq登陆界面
         -->
         <div>
             <label>邮箱登陆</label>
             <input type="text" name="email" id="email">
         </div>
         <div>
             <p>QQ:</p>
             <input type="text" name="email" id="email">
         </div>



        
    </div>
    <script>
        var vm =new Vue({
            el:'#app',
            data:{
                weather:"sun"
                
            },
            methods:{}
        })
    </script>
    
</body>
</html>

在这里插入图片描述

增加button切换登陆方式

在这里插入图片描述

切换才切换

<!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.10/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 需求：
             邮箱：邮箱登陆界面
             qq：qq登陆界面
         -->
         <div v-if="loginType=='email'">
             <label>邮箱登陆</label>
             <input type="text" name="email" id="email">
         </div>
         <div v-if="loginType=='QQ'">
             <p>QQ:</p>
             <input type="text" name="QQ" id="QQ">
         </div>
         <button>切换登录方式</button>




        
    </div>
    <script>
        var vm =new Vue({
            el:'#app',
            data:{
                loginType:"email"
                
            },
            methods:{}
        })
    </script>
    
</body>
</html>

在这里插入图片描述

用this.loginType="QQ"方式只能切换一次

在这里插入图片描述

用if语句"？"可以重复转换

在这里插入图片描述

增加提示信息——placeholder

<div v-if="loginType=='email'">
             <label>邮箱登陆</label>
             <input type="text" name="email" id="email" placeholder ="163邮箱">
         </div>
         <div v-if="loginType=='QQ'">
             <p>QQ:</p>
             <input type="text" name="QQ" id="QQ" id="email" placeholder ="QQ">
         </div>
         <!-- 通过按钮切换登陆方式 -->
         <button @click="ChangeLoginType">切换登录方式</button>
         
 </div>

在这里插入图片描述

新问题：切换时没有清空内容

在这里插入图片描述

清空——key

 <div id="app">
        <!-- 需求：
             邮箱：邮箱登陆界面
             qq：qq登陆界面
         -->
         <div v-if="loginType=='email'">
             <label>邮箱登陆</label>
             <input type="text" name="email" id="email" placeholder ="163邮箱" key="email">
         </div>
         <div v-if="loginType=='QQ'">
             <p>QQ:</p>
             <input type="text" name="QQ" id="QQ" id="email" placeholder ="QQ" key ="QQ">
         </div>
         <!-- 通过按钮切换登陆方式 -->
         <button @click="ChangeLoginType">切换登录方式</button>
        
    </div>

在这里插入图片描述

img图片显示：

<!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.10/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 需求：
             图片
         -->
         <img src="1987676707.jpg" alt="">
         <div v-if="loginType=='email'">
             <label>邮箱登陆</label>
             <input type="text" name="email" id="email" placeholder ="163邮箱" key="email">
         </div>
         <div v-if="loginType=='QQ'">
             <p>QQ:</p>
             <input type="text" name="QQ" id="QQ" id="email" placeholder ="QQ" key ="QQ">
         </div>
         <!-- 通过按钮切换登陆方式 -->
         <button @click="ChangeLoginType">切换登录方式</button>
    </div>
    <script>
        var vm =new Vue({
            el:'#app',
            data:{
                loginType:"email"
                
            },
            methods:{
                ChangeLoginType:function(){
                    // this.loginType="QQ"
                    // 解释：当oginType=="email"，改成QQ，当不是，改为email
                    this.loginType =this.loginType=="email"?"QQ":"email"
                
                }
            }
        })
    </script>
    
</body>
</html>

在这里插入图片描述

需求：设定一个值true则显示图片false不显示——v-show

<!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.10/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 需求：初始化一个值，当这个为true时显示图片，false则不显示
             图片
         -->
         <img src="1987676707.jpg" alt="" v-show="isShow">



        
    </div>
    <script>
        var vm =new Vue({
            el:'#app',
            data:{
                isShow:false
            },
            methods:{}
            
        })
    </script>
    
</body>
</html>

在这里插入图片描述

需求：按按钮来控制图片显示&隐藏

解释：v-show"isShow"里面data值为false，方法中设定this.isShow为非它，则为真，因此可来回切换

在这里插入图片描述

v-if和v-show的区别

在这里插入图片描述

v-on为元素绑定事件

单击——v-on：click

<!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.10/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 需求：v-on为元素绑定事件
         -->
         
         <button v-on:click="singleClick">单击</button>

        
    </div>
    <script>
        var vm =new Vue({
            el:'#app',
            data:{
                
            },
            methods:{
                singleClick(){
                    // 在console中打印值
                    console.log("单击")
                }
                
            }
            
        })
    </script>
    
</body>
</html>

在这里插入图片描述

双击

v-on:dblclick

<!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.10/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 需求：v-on为元素绑定事件
         -->
         <!-- 单击按钮 -->
         <button v-on:click="singleClick">单击</button>
         <!-- 双击 -->
         <button v-on:dblclick="doubleClick">双击</button>

        
    </div>
    <script>
        var vm =new Vue({
            el:'#app',
            data:{
                
            },
            methods:{
                singleClick(){
                    // 在console中打印值
                    console.log("单击")
                },
                doubleClick(){
                    alert("双击")
                }

                
            }
            
        })
    </script>
    
</body>
</html>

在这里插入图片描述

鼠标悬停：

在这里插入图片描述

v-on修饰符：

在这里插入图片描述

冒泡事件——往父类找，父类有（divHandler）就也触发

<!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.10/dist/vue.js"></script>
    <style>
        .inner{
            height: 150px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <div id="box">
        <!-- 冒泡事件 不停往父类元素反馈-->
        <div class="inner" @click ="divHandler">
            <input type="button" value="点他" @click="btndivHandler">

        </div>          
    </div>
    <script>
        var vm =new Vue({
            el:'#box',
            data:{
                
            },
            methods:{
                btndivHandler:function(){
                    console.log("这是触发了button div的事件")
                },
                divHandler:function(){
                    console.log("这是触发了inner div的事件")
                }
                
                }
                                        
        })
    </script>
    
</body>
</html>

在这里插入图片描述

1.阻止冒泡事件——click.stop

在这里插入图片描述

2.阻止冒泡事件方法2——父类click.self

.self——.self只有点击当前元素才会触发事件处理函数

在这里插入图片描述

阻止链接自动跳转——.prevent 阻止默认跳转

在这里插入图片描述

.prevent.once只阻止一次默认跳转

在这里插入图片描述

.self和.stop的区别

.stop——有效阻止冒泡

**<!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.10/dist/vue.js"></script>
    <style>
        .inner{
            height: 150px;
            background-color: aquamarine;
        }
        .outer{
            height: 100px;
            background-color: brown;
        }
    </style>
</head>
<body>
    <div id="box">
        <!-- 冒泡事件 不停往父类元素反馈-->
        <div class="inner" @click ="divHandler">
            <!-- 阻止冒泡事件 当点击button只触发btndivHandler -->
            <!-- 使用.stop阻止当前元素冒泡 -->
            <input type="button" value="点他" @click.stop="btndivHandler">

        </div>
        <!-- .self只有点击当前元素才会触发事件处理函数 -->
        <div class="inner" @click.self ="divHandler">
            
            <input type="button" value="点他" @click="btndivHandler">

        </div>
        <!-- .prevent阻止默认跳转 -->
        <!-- <a href="https://www.baidu.com/" @click.prevent="linClick">百度一下</a>  -->
        <!-- 使用.prevent.once只阻止一次默认跳转 -->
        <a href="https://www.baidu.com/" @click.prevent.once="linClick">百度一下</a>             
    </div>          
    </div>
    <!-- .stop和.self的区别 -->
    <div class="outer" @click.self ="divHandler">
            
        <input type="button" value="点他" @click.stop="btndivHandler">
    <script>
        var vm =new Vue({
            el:'#box',
            data:{
                
            },
            methods:{
                btndivHandler:function(){
                    console.log("这是触发了button div的事件")
                },
                divHandler:function(){
                    console.log("这是触发了inner div的事件")
                },
                linClick:function(){
                    console.log("阻止默认跳转")
                }

                
                }                
                        
        })
    </script>
    
</body>
</html>**

在这里插入图片描述

.self——不能有效阻止冒泡事件

在这里插入图片描述

按钮加减数字

<!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.10/dist/vue.js"></script>
</head>
<body>
    <div id="box">
        <button>-</button>
        <span>1</span>
        <button>+</button>

    </div>
    <script>
        new Vue({
            el:"#box",
            data:{

            },
            methods:{

            }
        })
    </script>
    
</body>
</html>

在这里插入图片描述

购物车减数量

在这里插入图片描述

需求：不能到负数

在这里插入图片描述

需求：到10限购

在这里插入图片描述

v-model 双向绑定

<!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.10/dist/vue.js"></script>
</head>
<body>
    <div id="box">
        <!-- v-model 双向绑定 -->
        <input type="text" v-model:value="msg">
        

        
    </div>
    <script>
        var vm =new Vue({
            el:'#box',
            data:{
            
                msg:"文本内容"
                
            },
            methods:{
                
                
            }
        })
    </script>
    
</html>