Vue基础入门2-CSDN博客

本文链接：https://blog.csdn.net/weixin_53669566/article/details/128406095

本文通过实例演示了Vue.js中的watch侦听器用于实时验证用户名、计算属性实现颜色调色板功能，以及如何使用axios发起GET和POST请求。在注册场景中，利用watch监听username变化，即时检查用户名是否已被占用；展示了计算属性在处理RGB颜色转换中的应用；最后讲解了axios的基本用法，包括GET和POST请求的发送。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、watch侦听器

利用侦听器判断实时用户名是否存在（适合注册）看另外的文章

2.axios直接发起GET何POST请求

一、watch侦听器

<!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>
</head>
<body>
    
    <!-- 希望Vue能够控制下面这个div，帮我们在把数据填充到div内部 -->
    <div id="app">
        <input type="text" v-model="info.username">
        <input type="text" v-model="info.address.city">
    </div>

    <!-- 导入Vue的库文件 ，在window全局就有了Vue这个构造函数-->
    <script src="./lib/vue-2.6.12.js"></script>
    <script src="./lib/jquery-3.6.3.js"></script>

    <!-- 创建Vue的实例对象 -->
    <script>
        // 创建Vue的实例对象
        const vm = new Vue({
            // el(element)属性是固定的写法，表示当前vm实例要控制界面上的哪个区域，接收的值是一个选择器
            el:'#app',
            // data对象就是要渲染到页面上的数据
            data:{
                info:{
                    username:'admind',
                    address:{
                        city:"北京"
                    }
                }
            },
            // 所有的侦听器，都应该被定义到watch节点下
            watch:{
                // 侦听器本质上是一个函数，要监视哪个数据的变化，就把数据名作为方法名即可
                // 新值在前，旧值在后
                // 缺点：一开始不能自动触发
                // username(newVal,oldVal){
                //     if(newVal==='') return
                //     console.log("监听到了username 值的变化",newVal,oldVal)
                //     // 1.调用jQuery中的Ajax发起请求，判断newVal是否被占用！！
                //     $.get('https://www.escook.cn/api/finduser/'+newVal,function(result){
                        
                //         console.log(result)
                //     })
                // }

                
                // 使用immediate
                // username: {
                //     // 侦听器的处理函数
                //     handler(newVal,oldVal){
                //         console.log(newVal,oldVal)
                //     },
                //     // immediate 选项的默认值是false
                //     // immediate 的作用是：控制侦听器是否自动触发一次
                //     immediate:true
                // }

                // info:{
                //     handler(newVal){
                //         console.log(newVal)

                //     },
                //     // 开启深度监听，只要对象中任何一个属性变化了，都会触发对象侦听器
                //     deep:true
                // }
                // 如果侦听的是对象的子属性的变化，则必须包裹一层单引号
                'info.username'(newVal){
                    console.log(newVal)

                }

            }
        
        })
    </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="./lib/vue-2.6.12.js"></script>
    <style>
        .box{
            width: 200px;
            height: 200px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
     <div id="app">
        <div>
            <span>R: </span>
            <input type="text" v-model.number="r">
        </div>
        <div>
            <span>G: </span>
            <input type="text" v-model.number="g">
        </div>
        <div>
            <span>B: </span>
            <input type="text" v-model.number="b">
        </div>
        <hr>

        <!-- 专门用户呈现颜色的div盒子 -->
        <!-- 在属性身上，：代表v-bind：属性绑定 -->
        <!-- ：style代表动态绑定一个样式对象，它的值是一个{}样式对象 -->
        <!-- 当前的样式对象中，只包含backgroundColor背景颜色 -->
        <!-- <div class="box" :style="{backgroundColor: `rgb(${r},${g},${b}`}"> -->
        <div class="box" :style="{backgroundColor: rgb} ">
            <!-- {{`rgb(${r},${g},${b})`}} -->
            {{rgb}}
        </div>
        <button @click="show">按钮</button>
     </div>
 
     <script>
        // 创建Vue实例，得到viewmodel
        var vm = new Vue({
            el:'#app',
            data:{
                // 红色
                r:0,
                // 绿色
                g:0,
                // 蓝色
                b:0
            },
            methods: {
                // 点击按钮，在终端显示最新的颜色
                show(){
                    console.log(this.rgb)
                },
              
            },
              // 所有的计算属性，都要定义到computed节点之下
                // 计算属性在定义的时候,要定义成"方法格式"
                computed:{
                    // rgb作为一个计算属性,被定义成了方法格式,
                    // 最终在这个方法中,返回一个生成号的rgb(x,x,x)的字符串
                    rgb(){
                        return `rgb(${this.r},${this.g},${this.b})`
                    }
                }
        })
     </script>


</body>
</html>

三、axios

1.发起GET请求

2.axios直接发起GET何POST请求

<!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>
</head>
<body>
    <button id="btnGET">GET</button>
    <button id="btnPOST">POST</button>
    <script src="./lib/axios.js"></script>
    <script>
        document.querySelector('#btnGET').addEventListener('click',async function(){
        //     axios.get('url地址',{
        //         // GET参数
        //         params:{}
        //     })
        const {data:res} = await axios.get('http://www.liulongbin.top:3006/api/getbooks',{
            params:{id:1}
        }) 
        console.log(res)
        })

        document.querySelector('#btnPOST').addEventListener('click',async function(){
            // axios.post('url',{/*POST请求体数据*/})
        const{data:res} = await axios.post('http://www.liulongbin.top:3006/api/post',{name:'zs',gender:'女'})
        // const{data:res} = await axios.post('http://localhost:8082/books/save',{type:'测试数据123',name:'测试数据2333',description:'测试数据3333333'})
        console.log(res.body)
        })
      
    </script>
</body>
</html>

若出现跨域问题，看其他栏