Affichage de la requête http et chargement dans Vue2.0

Cette fois, je vais vous apporter une démonstration de la requête http et du chargement dans Vue2.0. Quelles sont les précautions pour l'affichage de la requête http et du chargement dans Vue2.0. Jetons un coup d'oeil.

Nous avons besoin de deux dépendances supplémentaires : vuex et axios : (toujours écrites après le projet précédent MyFirstProject)

npm i vuex axios -D

Tout d'abord, expliquez brièvement la requête http

1. Introduisez axios dans main.js

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

2. Écrivez une fonction dans focus.vue. obtenir des données

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

L'effet d'affichage après une acquisition réussie est le suivant :

Mon deux dieux masculins sont envieux Envy n'est-il pas très beau ?

C'est la fin de la demande de données N'est-ce pas très simple Par contre, quand il s'agit du magasin, c'est un peu compliqué si vous. Si vous voulez savoir ce qui se passe ensuite, écoutons le chapitre suivant ~

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le php. Site chinois !

Lecture recommandée :

L'utilisation de l'index v-for en html

Quels sont les problèmes avec le chemin d'empaquetage vue+webpack

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!