1、引言
本篇博客简单讲解Vue网络应用方面，用一个随机获取笑话实例来介绍axios+Vue在网络的应用，同时简单介绍普通函数与箭头函数的应用
2、axios基本使用
功能强大的网络请求库
- ① axios必须先导入才可以使用
- ② 使用get或post方法即可发送对应的请求
- ③ then方法中的回调函数会在请求成功或失败时触发
3、axios+Vue开发一个获取笑话实例
使用接口：
接口：随机获取一条笑话
请求地址：https://autumnfish.cn/api/joke
请求方法：get方法
请求参数：无
响应内容:随机一条笑话
源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个Vue程序</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 开发环境版本，包含了有帮助的命令行警告-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="查看一个笑话" @click="getJoke" />
<p>{{joke}}</p>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data:{
joke: "笑话"
},
methods:{
getJoke:function(){
var that=this;
axios.get("https://autumnfish.cn/api/joke").then(function(response){
console.log(response.data);
that.joke=response.data;
},function(err){
console.log(err)
})
}
}
});
</script>
</body>
</html>
PS:关于文中this作用域问题，推荐阅读这篇博客：
点击跳转——2020 零基础 Vue快速入门 Vue2.0使用ES6语法的箭头函数=> 对this作用域的理解 【整理】
学如逆水行舟，不进则退
