23、Vue-axios基本使用

行走的皮卡丘

已于 2022-05-30 10:07:44 修改

阅读量376

点赞数 16

分类专栏： Vue学习基础文章标签： vue javascript html js nodejs

于 2020-08-08 08:37:27 首次发布

本文链接：https://blog.csdn.net/weixin_44908159/article/details/107831991

版权

Vue学习基础专栏收录该内容

27 篇文章 11 订阅

订阅专栏

在这里插入图片描述

23 Vue-axios基本使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>行找的皮卡丘</title>
	</head>
	<body>
		<div id="app"></div>
	</body>
	<script type="text/javascript" src="js/vue.js"></script>
	<!--导包-->
	<script type="text/javascript" src="./node_modules/axios/dist/axios.js"></script>
	<script type="text/javascript">
		// Vue.use(axios)   // 挂载到全局
		Vue.prototype.$axios = axios;
		
		var App={
			template:`
				<div>
					<button @click='senAjax'>发起请求</button>
				</div>
			`,
			methods:{
				// 基本使用
				senAjax(){
					this.$axios.get('http://127.0.0.1:8888/')
					// 请求成功后的响应数据
					.then(res=>{
						console.log(res);
					})
					// 报错响应数据
					.catch(err=>{
						console.log(err)
					})
				}
			}
		};
		
		new Vue({
			el:'#app',
			data(){
				return {
					
				}
			},
			template:`<App/>`,
			components:{
				App
			}
		});
	</script>
</html>