Vue基础第八讲笔记：axios+vue

最新推荐文章于 2023-01-27 11:53:07 发布

TraceurZzl

最新推荐文章于 2023-01-27 11:53:07 发布

阅读量88

点赞数

分类专栏： (HM)Vue 文章标签： javascript vue.js

本文链接：https://blog.csdn.net/qq_49956121/article/details/120608424

版权

(HM)Vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一、axios+vue

实例：
注意：
1、axios回调函数中的this已经改变，无法访问到data中数据。
2、把this保存起来，回调函数中直接使用保存的this即可。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<input type="button" value="获取笑话" @click="getJoke"/>
			<p>{{ joke }}</p>
		</div>
		<!-- 官网提供的 axios 在线地址 -->
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<!-- 导入开发版本的Vue -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script>
			/**
			 * 接口1：随机笑话
			 * 请求地址：https://autumnfish.cn/api/joke
			 * 请求方式：get
			 * 请求参数：num（笑话条数，数字）
			 * 响应内容：随机笑话
			 */
			var app = new Vue({
				el:"#app",
				data:{
					joke:""
				},
				methods:{
					getJoke:function(){
						//axios回调函数中的this会变，先用that存起来
						var that = this;
						axios.get("https://autumnfish.cn/api/joke").then
						(function(response){
							that.joke = response.data;
						},function(err){
							console.log(err);
						})
					}
				}
			})
		
		</script>
	</body>
</html>

结果：
点击获取笑话：
在这里插入图片描述 点击获取笑话：

TraceurZzl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue基础第八讲笔记：axios+vue

一、axios+vue实例：注意：1、axios回调函数中的this已经改变，无法访问到data中数据。2、把this保存起来，回调函数中直接使用保存的this即可。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> &lt
复制链接

扫一扫