Axios是一个基于promise的HTTP库，可以用在浏览器和node.js中。
安装方式：
1.使用cdn
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
2.使用npm安装
npm/cnpm install axios
在main.js中import axios并将其挂载到Vue实例上
import Axios from ‘axios‘
Vue.prototype.$axios = Axios //调用时使用this. $axios()
3.点击随机切换笑话的小例子
<template>
<div id="app">
<input type="button" name id value="获取笑话" @click="getJoke" />
<p>{{joke}}</p>
</div>
</template>
<script>
export default {
name: "App",
data: () => {
return {
joke: "很好笑的笑话"
};
},
methods: {
getJoke: function() {
// axios回调函数中的this已经改变，无法访问到data中数据
// 可以var that = this； 回调函数中用that访问data中数据
var that=this;
this.$axios({
url: "https://autumnfish.cn/api/joke",
methods: "get"
}).then(
function(response) {
console.log(response.data);
that.joke=response.data
},
function(err) {}
);
}
},
created: function() {}
};
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
ul,
li {
list-style: none;
}
</style>