Detaillierte Erläuterung der Verwendung der HTTP-Anfrage und der Ladeanzeige von Vue2.0

Dieses Mal werde ich Ihnen die Verwendung der http-Anfrage und der Ladeanzeige von Vue2.0 ausführlich erläutern Im Folgenden finden Sie einen praktischen Fall. Werfen wir einen Blick darauf. Wir benötigen zwei zusätzliche Abhängigkeiten: vuex und axios: (immer noch nach dem vorherigen Projekt MyFirstProject geschrieben)

npm i vuex axios -D

Erklären Sie zunächst kurz die http-Anfrage

1. Axios in main.js einführen

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

2. Schreiben Sie eine Funktion in focus.vue, um die Daten zu erhalten

Meine beiden männlichen Idole beneiden und beneiden, ob sie gutaussehend sind

<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>

Das ist das Ende der Datenanforderung. Wenn es jedoch um das Geschäft geht, ist es etwas kompliziert. Wenn Sie wissen möchten, was als nächstes passiert, hören wir uns die Aufschlüsselung an

Ich glaube, Sie haben den Fall in diesem Artikel bereits gelesen. Nachdem Sie die Methode gemeistert haben, lesen Sie bitte andere verwandte Artikel auf der chinesischen PHP-Website, um weitere spannende Inhalte zu erhalten!

Empfohlene Lektüre:

Detaillierte Schritte zur Verwendung domänenübergreifender jQuery+JSONP-Anfragen

Knotenprozess- und child_process-Module im Detail Erklärung der Verwendung

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung der HTTP-Anfrage und der Ladeanzeige von Vue2.0. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!