axios的使用及element-ui

最新推荐文章于 2023-11-17 17:23:51 发布

xiaogang_987654

最新推荐文章于 2023-11-17 17:23:51 发布

阅读量633

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_45571513/article/details/119011457

版权

前端专栏收录该内容

11 篇文章 2 订阅

订阅专栏

axios是独立于vue的一个项目，基于promise用于浏览器和node.js的http客户端

在浏览器中可以帮助我们完成 ajax请求的发送
在node.js中可以向远程接口发送请求

<body>
    <div id="app">
       <div v-for="user in userList">
           {{user.name}} -- {{user.age}}
       </div>
    </div>
    <script src="vue.min.js"></script>
    <script src="axios.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            //固定的结构
            data: {  //在data定义变量和初始值
                userList: []//数组
            },
            created(){ //页面渲染之前执行
                //调用定义的方法
                this.getUserList()
            },
            methods:{ // 编写具体的方法
                //创建方法 查询所以用户数据
                getUserList() {
                    //使用axios发送ajax请求
                    //axios.提交方式("请求接口路径").then(箭头函数).catch(箭头函数)
                    axios.get("data.json")
                         .then(response =>{
                             //response就是请求之后返回数据
                             console.log(response)
                             this.userList = response.data.data.items
                         })
                         .catch(error =>{
                             //请求失败执行catch方法
                             console.log(error)
                         })
                }
            }
        })
    </script>
</body>

注意：测试时需要开启后端服务器，并且后端开启跨域访问权限

{
    "sucess":true,
    "code":200,
    "message":"成功",
    "data":{
        "items":[
            {"name":"lucy","age":20},
            {"name":"mary","age":30},
            {"name":"jack","age":40}
        ]
    }
}

element-ui 是饿了么前端出品的基于 Vue.js的后台组件库，方便程序员进行页面快速布局和构建

官网： http://element-cn.eleme.io/#/zh-CN

xiaogang_987654

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
axios的使用及element-ui

axios是独立于vue的一个项目，基于promise用于浏览器和node.js的http客户端在浏览器中可以帮助我们完成 ajax请求的发送在node.js中可以向远程接口发送请求<body> <div id="app"> <div v-for="user in userList"> {{user.name}} -- {{user.age}} </div> </div>
复制链接

扫一扫