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

文章图片

这个是我的界面部分代码：

文章图片

绑定数据、点击事件：

文章图片

分析：
使用get方式从api获取数据，返回的内容保存在response.data中

文章图片

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

文章图片

点击按钮后，

文章图片

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