锐客网

  1. 首页 > it技术 > >

vue|vue初学（axios获取api的数据）

vue前端axios

1、前置知识：promise、ajax 2、axios （1）安装：axios、vue-axios

npm -install --save axios vue-axios

axios是一个库，并不是vue中的第三方插件，使用时不能通过Vue.use()安装插件。
有两种解决方法：1、结合vue-axios使用；2、将axios 改写为 Vue 的原型属性（这里用的是第一种方法）
（2）在main.js中配置
import axios from 'axios' import vueAxios from 'vue-axios'Vue.use(vueAxios, axios)

（3）在Login.vue中使用
（这个是你自定义的页面），比如我这里是一个登录界面
1、功能描述：点击按钮，在下方空白，显示从api获取到的数据
（注意观察：请求方式、返回数据的格式）
2、这里用的开源api中的获取时间：https://api.apiopen.top/api.html#a34dfb33c9a64129a1797d7c1994f863
vue|vue初学（axios获取api的数据）
文章图片

这个是我的界面部分代码：
vue|vue初学（axios获取api的数据）
文章图片

绑定数据、点击事件：
vue|vue初学（axios获取api的数据）
文章图片

分析：
使用get方式从api获取数据，返回的内容保存在response.data中
vue|vue初学（axios获取api的数据）
文章图片

这个是返回数据的格式，我们要获取的是result对象中的weekday、dateTime属性
（4）展示效果
【vue|vue初学（axios获取api的数据）】vue|vue初学（axios获取api的数据）
文章图片

点击按钮后，
vue|vue初学（axios获取api的数据）
文章图片

    推荐阅读


    上一篇：VUE|基于Vant组件的Vue移动端黑马头条项目Day01 处理rem适配 字体图标 封装axios

    下一篇：Vue|Vue实现页面的局部刷新