Vue中axios的使用教程的代码实例_axios.min.js-优快云博客

本文链接：https://blog.youkuaiyun.com/lmd770013209/article/details/127970174

Vue中axios的使用教程的代码实例

准备：要先导入axios.js跟vue.js的包

1_axios基本语法

<!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>
    <input type="button" value="axios请求" onclick="test()"/>

    <!-- 1、引入axios库文件 -->
    <script src="lib/axios.min.js"></script>
    <script>
        function test(){
            // 2 设置axios基本参数
            var result = axios({
                // 设置请求模式(GET/POST)
                method:'GET',
                // 设置 url 请求地址
                url:'http://150.158.15.81:8080/search'
            })

            // 3 设置回调函数 
            // data网络服务器请求响应返回的内容 axios 包装6个模块
            // config   配置
            // data     数据(我们所需要真实的数据)
            // headers  请求头
            // request  请求
            // status   状态编码
            // statusText  状态描述
            result.then(function(data){
                console.log(data.data)
            })
        }
    </script>

</body>
</html>

2_axios参数传递

<!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>
    <input type="button" value="axios测试" onclick="test()"/>
    <script src="lib/axios.min.js"></script>
    <script>
        function test(){
            axios({
                method:'POST',
                url:'http://150.158.15.81:8080/search',
                // get请求
                // params:{ key:'周杰伦',pn:1 },

                // post请求
                data:{ key:'周杰伦',pn:1 }
            }).then(function(data){
                console.log(data);
            })
        }
    </script>
</body>
</html>

3_使用async和await调用axios

<!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>
    <input type="button" value="axios测试" onclick="test()"/>
    <script src="lib/axios.min.js"></script>
    <script>
        // 如果网络请求返回的是Promise示例,那么可以使用await语法修饰 
        // 如果某个函数被await语法修饰那么此方法必须是 async 方法
        async function test(){
            var result = await axios({
                method:'get',
                url:'http://150.158.15.81:8080/search'
            })
            console.log(result);
        }
    </script>
</body>
</html>

4_解构赋值

<!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>
    <input type="button" value="axios测试" onclick="test()"/>
    <script src="lib/axios.min.js"></script>
    <script>
        // 如果网络请求返回的是Promise示例,那么可以使用await语法修饰 
        // 如果某个函数被await语法修饰那么此方法必须是 async 方法
        async function test(){
            // {data} 使用解构赋值直接获取json格式数据中指定属性名称的数据
            // {data:res} 为解构赋值中属性data取别名叫res
            var {data:res} = await axios({
                method:'get',
                url:'http://150.158.15.81:8080/search'
            })
            console.log(res.data);
        }


        // jquery  $.ajax()  $.get()      $.post{}
        // axios   axios()   axios.get()  axios.post()
    </script>
</body>
</html>

5_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>
    <input type="button" value="GET请求" onclick="test1()"/>
    <input type="button" value="POST请求" onclick="test2()"/>

    <input type="text" id="key"/>
    <input type="button" value="GET请求URL拼接传参" onclick="test3()"/>

    <!-- 1、引入axios库文件 -->
    <script src="lib/axios.min.js"></script>
    <script>
        function test1(){
            // axios.get 方式请求
            // 注释事项: get方式传递参数必须表名params属性
            axios.get('http://150.158.15.81:8080/search',{
                params:{
                    key:'周杰伦',
                    pn:1
                }
            }).then(function(data){
                console.log(data)
            })
        }

        async function test2(){
            // axios.post 方式请求
            var {data:res} = await axios.post('http://150.158.15.81:8080/search',{ key:'陈奕迅',pn:1})
            console.log(res.data);
        }

        function test3(){
            //根据标签id获取文本框的value值
            var key = document.getElementById("key").value;
            // axios.get 方式请求
            axios.get('http://150.158.15.81:8080/search?key='+key+'&pn=1').then(function(data){
                console.log(data)
            })
        }

    </script>

</body>
</html>

6_vue过滤器基本语法

<!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>
    <div id="app">
        <!-- vue过滤器 | 管道符 format 只是一个函数名称  -->
        <h1>{{ username | format }}</h1>
    </div>
    <script src="lib/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                username:'admIN'
            },
            // vue的过滤器 必须要写入filters节点之下
            filters: {
                // 过滤器本质上就是一个带有返回值的函数
                // val 参数表示需要文本格式化的内容
                format(val){
                    //return val.toUpperCase();
                    return val.substr(0,1).toUpperCase()+val.substr(1).toLowerCase();
                }
            }
        })
    </script>
</body>
</html>

7_vue全局过滤器

<!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>
    <div id="app">
        <!-- vue过滤器 | 管道符 format 只是一个函数名称  -->
        <h1>{{ phone | numFormat }}</h1>
    </div>
    <div id="app2">
        <!-- vue过滤器 | 管道符 format 只是一个函数名称  -->
        <h1>{{ tel | numFormat }}</h1>
    </div>
    <script src="lib/vue.min.js"></script>
    <script>
        // 私有的过滤器只能适用于指定某一个el区域 ,全局过滤器可以适用所有定义el区域
        // 定义全局过滤器  Vue.filter(参数一,参数二)
        // 参数一 过滤器名称(函数名称)
        // 参数二 过滤器具体实现(方法实现/格式化要渲染文本)
        Vue.filter("numFormat",function(val){
            return val.substr(0,3)+"****"+val.substr(7);
        })

        var vm = new Vue({
            el:'#app',
            data:{
                phone:'13574838886'
            },
            // 如果私有和全局同时存在 私有的优先级高于全局过滤器
            filters: {
                numFormat(val){
                    return 'aaa';
                }
            }
        })
        var vm2 = new Vue({
            el:'#app2',
            data:{
                tel:'13555555555'
            }
        })
    </script>
</body>
</html>

8_使用vue过滤器实现日期格式化

<!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>
    <!-- div标签用于视图渲染,为渲染视图设置id属性 -->
    <div id="app">
        <h1>用户管理模块</h1>
        <input type="text" v-model="newuser" placeholder="在此输入用户名"/>
        <input type="button" value="新增" @click="add"/>
        <table border="1" width="60%">
            <tr>
                <th>编号</th>
                <th>用户名</th>
                <th>状态</th>
                <th>创建时间</th>
                <th>操作</th>
            </tr>
            <tr align="center" v-for="item in list" :key="item.id">
                <td>{{item.id}}</td>
                <td>{{item.user}}</td>
                <td>
                    <input type="checkbox" v-model="item.type" :id="'cb'+item.id"/>
                    <label :for="'cb'+item.id" v-if="item.type">启用</label>
                    <label :for="'cb'+item.id" v-else>禁用</label>
                </td>
                <td>{{item.time | dateFormat}}</td>
                <td>
                    <a href="http://www.baidu.com" @click.prevent="deleteById(item.id)">删除</a>
                </td>
            </tr>
        </table>
    </div>
    <!-- 引入vue核心框架 -->
    <script src="lib/vue.min.js"></script>
    <script src="lib/daijs.min.js"></script>
    <script>

        // 全局日期格式化过滤器
        Vue.filter("dateFormat",function(val){
            return dayjs(val).format('YYYY-MM-DD HH:mm:ss');
        })

        // 实例化ViewModel VUE对象
        var vm = new Vue({
            // el 固定写法，表示你动态渲染得网页元素,网页渲染在指定的模块中
            el:'#app',
            // data 数据模型 以键值对形式存储数据
            data:{
                //双向绑定新增用户
                newuser:'',
                // 自增ID
                num:4,
                //数据集合
                list:[ 
                    {id:1,user:'zhangsan',type:true,time:new Date()},
                    {id:2,user:'lisi',type:false,time:new Date()},
                    {id:3,user:'wangwu',type:true,time:new Date()}
                ]
            },
            methods: {
                //根据id删除数据方法
                deleteById(id){
                    //循环遍历数组
                    for(var i=0;i<this.list.length;i++){
                        if(id==this.list[i].id){
                            //删除索引
                            this.list.splice(i,1);
                            break;
                        }
                    }
                },
                add(){
                    //判断用户不能为null
                    if(this.newuser==''){
                        alert("用户名不能为空");
                        return;
                    }
                    //创建新用户对象
                    var obj = {
                        id:this.num,
                        user:this.newuser,
                        type:true,
                        time:new Date()
                    }
                    //添加数组
                    this.list.push(obj);
                    //id自动增长
                    this.num++;
                    //重置文本框
                    this.newuser='';
                }
            }
        })
    </script>
</body>
</html>

9_多过滤器链

<!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>
    <div id="app">
        <h1>{{str | filterA | filterB | filterC}}</h1>
    </div>
    <script src="lib/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                str:'hello world!'
            },
            filters: {
                filterA(val){
                    return val.substr(1)
                },
                filterB(val){
                    return val.substr(1)
                },
                filterC(val){
                    return val.substr(1)
                }   
            }
        })
    </script>
</body>
</html>

10_过滤器参数

<!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>
    <div id="app">
        <h1>{{str | filterA(3, 4)}}</h1>
    </div>
    <script src="lib/vue.min.js"></script>
    <script>
        Vue.filter("filterA",function(val,index,length){
            return val.substr(index,length);
        })
        var vm = new Vue({
            el:'#app',
            data:{
                str:'hello world!'
            }
        })
    </script>
</body>
</html>

11_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>
    <div id="app">
        <input type="text" v-model="username"/>
    </div>
    <script src="lib/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                username:''
            },
            // VUE侦听器必须写在watch节点下
            // VUE侦听器本质上就是一个带有参数的函数
            
            watch: {
                // newVal,oldVal 两个参数是可选的,按照顺序第一个参数时新值
                // newVal 修改之后的值
                // oldVal 修改之前的值
                username(newVal,oldVal){
                    console.log(newVal,oldVal);
                }
            }

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

12_使用侦听器实现用户验证

<!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>
    <div id="app">
        <input type="text" v-model="username"/>
    </div>
    <script src="lib/vue.min.js"></script>
    <script src="lib/axios.min.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                username:''
            },
            watch: {
                async username(newVal){
                    var result = await axios.get('http://127.0.0.1:8080/check?username='+this.username)
                    console.log(result.data)
                }
            }
        })
    </script>
</body>
</html>

13_对象格式侦听器

<!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>
    <div id="app">
        <input type="text" v-model="username"/>
    </div>
    <script src="lib/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                username:''
            },
            watch: {
                // 方法格式侦听器 (缺点:1、页面初始化时无法自动执行调用,2、无法侦听到对象中的属性变化)
                // username(newVal,oldVal){
                //     console.log(newVal,oldVal);
                // }

                // 对象格式侦听器 (通过设置immediate参数实现页面初始化时自动执行)
                username:{
                    // handler 侦听数据变化时执行函数
                    handler(newVal,oldVal){
                        console.log('侦听器被执行了');
                    },
                    // immediate 页面初始化时是否执行侦听函数(默认false不执行/true时则自动执行)
                    immediate:true
                }
            }
        })
    </script>
</body>
</html>

14_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>
    <div id="app">
        <input type="text" v-model="info.username"/>
    </div>
    <script src="lib/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                info:{
                    username:'admin',
                    password:'123456'
                }
            },
            watch: {
                info:{
                    handler(newVal){
                        console.log(newVal);
                    },
                    // 开启深度监听
                    deep:true
                }

                // 'info.username'(newVal){
                //     console.log(newVal);
                // }

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