Vue组件--利用axios和组件

最新推荐文章于 2025-05-21 17:35:09 发布

原创最新推荐文章于 2025-05-21 17:35:09 发布 · 475 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Vue #Vue组件 #axios #ajax #父子组件

Vue 同时被 3 个专栏收录

50 篇文章

订阅专栏

Vue组件

11 篇文章

订阅专栏

Vue应用

5 篇文章

订阅专栏

本文介绍如何在Vue组件中使用axios进行Ajax请求，实现数据的获取与展示。通过实例讲解，包括父组件如何传递数据到子组件，以及axios在Vue应用中的应用，确保正确导入vue.js、axios和bootstrap.css。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

注意：要导入vue.js、axios.is和bootsteap.css包

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js" ></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>		
		<link rel="stylesheet" href="css/bootstrap.css" />
		<style>
			.desc_title{
				display: inline-block;
				height: 20px;
				overflow: hidden;
				text-overflow:ellipsis;
				white-space:nowrap;
				width: 100%;
			}
			.price{
				font-size: 20px;
				font-weight: bold;
				color: crimson;
			}
			.discount{
				text-decoration: line-through;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div class="row">
				<shopitem v-for="item in shopList" :key="item.goodsId" :item="item"></shopitem>
			</div>
		</div>
		<script>
//			子组件
			Vue.component("shopitem",{			
				props:["item"],
				template:`
					<div class="col-md-3">
					<div class="imgs">
						<img :src="item.goodsImg" class="img-thumbnail"/>
					</div>
					<div class="desc">
						<span class="desc_title">
							{{item.desc}}
						</span>
						
					</div>
					<div class="money">
						<span class="price">
							{{item.price}}
						</span>
						<span class="discount">
							{{item.discount}}
						</span>
					</div>
				</div>
				`
			})
			new Vue({
				el:"#app",
				data:{
					shopList:[]
				},
				created:function(){
					axios.get("mock/data.json")
					     .then((res)=>{
					     	var data = res.data
					     	
							if(data.code==200){
								this.shopList = data.goodslist
								console.log(this.shopList)
							}
					     })
				}
			})
		</script>
	</body>
</html>

data：

{
    "code": 200,
    "msg": "",
    "goodslist": [
        {
            "goodsId": 0,
            "goodsImg": "//h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/607153/2018/0528/120/5ed543e8-b6dc-4fe3-bcf1-e393816b8d4b_5t.jpg",
            "desc": "熙世界V领撞色花边针织女款短袖连衣裙",
            "price": 99,
            "discount": 809
        },
        {
            "goodsId": 1,
            "goodsImg": "//h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/2018/07/17/113/e4c755e3-1663-437e-9dde-a4979363a469_5t.jpg",
            "desc": "娜尔思 | NAERSI/娜尔思秋季新品连衣裙",
            "price": 929,
            "discount": 939
        },
        {
            "goodsId": 2,
            "goodsImg": "//h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvop/00603727/10000646/2094163692-438051563145240605-438051563145240902-5.jpg",
            "desc": "欧时力 | ochirly欧时力新女装拼接荷叶边刺绣网纱无袖连衣裙1JH2084210",
            "price": 1119,
            "discount": 8199
        },
        {
            "goodsId": 3,
            "goodsImg": "//h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/2018/07/17/113/e4c755e3-1663-437e-9dde-a4979363a469_5t.jpg",
            "desc": "娜尔思 | NAERSI/娜尔思秋季新品连衣裙",
            "price": 929,
            "discount": 499
        },
        {
            "goodsId": 4,
            "goodsImg": "//h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/2018/08/02/34/b2d13309-0796-4408-beff-ce01f6295388_5t.jpg",
            "desc": "哥弟 | 气质时尚短袖连衣裙",
            "price": 929,
            "discount": 8189
        },
        {
            "goodsId": 5,
            "goodsImg": "//h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/2018/06/07/147/fd624450-a586-4b7f-99aa-dbb8e272c26d_5t.jpg",
            "desc": "裂帛 | 立领刺绣七分袖雪纺连衣裙女",
            "price": 329,
            "discount": 2399
        }
    ]
}

效果：