vue基础3

关注

原创最新推荐文章于 2026-03-13 15:38:35 发布 158 阅读 AI 写同款· GEO 优化 ›

Vue3 0基础入门，三分钟掌握vue3核心知识通过这个指南，你已经能开始用Vue3制作简单的网页了！就像学会了积木的基本拼接方法，接下来可以通过实践搭建更复杂的作品。想象你有一堆积木，每块积木可以拼成不同的形状。Vue3就像一套智能积木工具，帮你快速搭建网页界面。点击按钮时，年龄显示会自动+1，无需手动刷新页面。// 对象类型用reactive。// 修改会自动更新到页面。// 基础类型用ref。// 旧写法（选项式）// 新写法（组合式）阅读详情

复习

在这里插入图片描述

计算属性和监听器——使v1 v2打数字时，结果自动显示（同步更新）——computed

<!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"></script>
</head>
<body>
    <div id="box">
        <!-- 
            1.输入v1 v2 option 结果result
            2.点击等号按钮运算
         -->
        <input type="text" v-model:value='v1'>
        <!-- +-*/下拉框 -->
        <select name="" id="" v-model:value='opt'>
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" v-model:value='v2'>
        <input type="button" value='=' >
        <input type="text" v-model:value='calcu'>
    </div>
    <script>
        new Vue({
            el:'#box',
            data:{
                v1:0,
                v2:0,
                opt:'+',
                result:0
            },
            // 计算属性
            computed:{
                calcu:function(){
                    var codeStr =parseInt(this.v1) +this.opt +parseInt(this.v2)
                    this.result = eval(codeStr)
                    return this.result
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

计算属性get

<!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"></script>
</head>
<body>
    <div id="box">
        <!-- 需求：实现对应的省份 城市 区域 拼接详细地址 -->
        <span>省：</span>
        <input type="text">
        <span>市：</span>
        <input type="text">
        <span>区：</span>
        <input type="text">
        <span>详细地址：</span>
        <input type="text">
    </div>
    <script>
        new Vue({
            el:'#box',
            data:{
                
            },
            // 计算属性
            computed:{
                calcu:function(){
                    
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

set方法

<!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"></script>
</head>
<body>
    <div id="box">
        <!-- 需求：实现对应的省份 城市 区域 拼接详细地址 -->
        <!--  第二需求：详细地址：湖南省长沙市岳麓区 自动填为湖南 长沙 岳麓 -->
        <span>省：</span>
        <input type="text" v-model:value="province">
        <span>市：</span>
        <input type="text" v-model:value="city">
        <span>区：</span>
        <input type="text" v-model:value="district">
        <span>详细地址：</span>
        <input type="text" v-model:value="address">
    </div>
    <script>
        new Vue({
            el:'#box',
            data:{
                province:'',
                city:'',
                district:''
            },
            // 计算属性
            computed:{
                // address对象
                address:{
                    // get方法 获取值
                  get:function(){
                    //   当我在输入框输入省份，控制台会自动打印
                    //   console.log(this.province)
                    var result =""
                    if (this.province){
                        result +=this.province +"省"
                        // console.log(result)
                    }
                    if (this.city){
                        result +=this.city +"市"
                        // console.log(result)
                    }
                    if (this.district){
                        result +=this.district +"区"
                        // console.log(result)
                    }
                    return result                       

                },
                // set方法 设置值
                set:function(value){
                    console.log(value)
                }

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

在这里插入图片描述

用正则拆分

在这里插入图片描述

监听属性——旧值新值得赋值

<!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"></script>
</head>
<body>
    <div id="box">
        <!-- 联想功能——百度搜索下面有联想功能 -->
        <span>搜索：</span>
        <input type="" v-model:value="keyword">
    </div>
    <script>
        new Vue({
            el:'#box',
            data:{
                // 初始化
              keyword:'' ,
            },
            // 监听属性watch
            watch:{
                // 监听keyword 当该值发生变化时则监听
                // 需要两个参数：newvalue，oldvalue
                keyword:function(newvalue,oldvalue){
                    console.log(newvalue)
                    console.log(oldvalue)
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

出现对应输入框

在这里插入图片描述

延迟呈现匿名函数（） =>{}

在这里插入图片描述

表单输入绑定

<!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"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model:value='msg'>
        <p>{{msg}}</p>

    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                // 初始化
              msg:""
            },
            
        })
    </script>
</body>
</html>

在这里插入图片描述

textarea——大的文本框

在这里插入图片描述

多选框——input checkbok

在这里插入图片描述

绑定的不是value是checked

在这里插入图片描述

单选框——目前可以多选

在这里插入图片描述

单选框加了name：

在这里插入图片描述

或者单选框也绑定checked属性

在这里插入图片描述

下拉框：select 的option

在这里插入图片描述

修饰符.lazy——鼠标碰到外面（失焦）数据才改变

<!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"></script>
</head>
<body>
    <div id="app">
        <!-- 需求：等到鼠标失焦，数据才变化(不同步)点击外面，才更新 -->
       <input type="text" name="" id="" v-model:value.lazy='msg'>
       <p>{{msg}}</p>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                // 初始化
                msg:'',
              
            },
            
        })
    </script>
</body>
</html>