2020 零基础 Vue快速入门 网络应用 axios+Vue【整理】

文章目录

        • 1、引言
        • 2、axios基本使用
        • 3、axios+Vue开发一个获取笑话实例
        • 点击进入Vue❤学习专栏~

1、引言

本篇博客简单讲解Vue网络应用方面,用一个随机获取笑话实例来介绍axios+Vue在网络的应用,同时简单介绍普通函数与箭头函数的应用
2020 零基础 Vue快速入门 网络应用 axios+Vue【整理】_第1张图片

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作用域的理解 【整理】


最后,看完本篇博客后,觉得挺有帮助的话,可以继续查看专栏其它内容嗷,一起来学习Vue吧~
在这里插入图片描述

点击进入Vue❤学习专栏~

学如逆水行舟,不进则退

你可能感兴趣的:(Vue全家桶系列)