http 요청 사용 및 Vue2.0 로딩 화면에 대한 자세한 설명

이번에는 Vue2.0의 http 요청 및 로딩 화면 사용에 대한 자세한 설명을 가져왔습니다. Vue2.0의 http 요청 및 로딩 화면 사용 시 주의사항은 무엇인가요?

vuex와 axios라는 두 가지 추가 종속성이 필요합니다. (이전 프로젝트 MyFirstProject 이후에도 작성됨)

npm i vuex axios -D

먼저 http 요청에 대해 간단히 설명하겠습니다

1. main.js에 axios를 도입하세요

import axios from 'axios' 
Vue.prototype.$http = axios;

2.focus.vue에 함수를 작성해서 데이터를 가져오세요

<template>
	<p id="focus">
		<ul >
			<li v-for="(item,index) in focusList">
				<p class="fportraits">
					<img :src="&#39;./src/&#39;+item.portrait" :alt="item.name">
				</p>
				<p class="details">
					<p class="ftitle"><strong> {{ item.name }} </strong></p>
					<p> {{ item.production }} </p>
				</p>
				<p class="isfocused">
					<p>取消关注</p>
				</p>
				<p class="clearfix"></p>
			</li>
		</ul>
	</p>
</template>
<script>
	export default{
		data(){
			return {
				focusList:[] //存储请求返回的数据
			}
		},
		mounted(){
			this.getFocusList()
		},
		methods:{
			getFocusList(){   //http get请求data.json 的数据
				var vm = this;
				this.$http.get('src/assets/data/data.json')
					.then(function(res){
						vm.focusList = res.data;
					})
					.catch(function(err){
						console.log(err)
					})
			}
		}
	}
</script>
<style scoped>
#focus{text-align:left;}
#focus ul{margin:0 auto;width:50rem;border-bottom:none;}
#focus p{margin:0;}
#focus li{width:46rem;display:block;border-bottom:1px solid #ddd;padding:0.5rem 2rem;cursor:default;}
#focus img{height:4rem;margin-left:-1rem;}
.fportraits{float:left;width:4rem;height:4rem;border-radius:50%;overflow:hidden;}
.details{float:left;margin-left:1rem;}
.isfocused{float:right;font-size:0.8rem;height:0.8rem;line-height:0.8rem;margin:0;}
.clearfix{clear:both;}
</style>

저의 남자 아이돌 둘이 부럽고 잘생겼나요

이것으로 자료요청은 끝입니다. 아주 간단하죠? 그런데 매장에 관해서는 좀 복잡하네요. 다음에 무슨 일이 일어날지 궁금하다면, 다음번에 내역을 들어보시죠~

I 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목해 보세요!

추천 도서:

jQuery+JSONP 도메인 간 요청 사용법에 대한 자세한 설명

노드 프로세스 및 child_process 모듈 사용에 대한 자세한 설명

위 내용은 http 요청 사용 및 Vue2.0 로딩 화면에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!