Home > Web Front-end > JS Tutorial > body text

Detailed explanation of the use of http request and loading display of Vue2.0

php中世界最好的语言
Release: 2018-04-12 10:32:16
Original
1910 people have browsed it

This time I will bring you a detailed explanation of the use of Vue2.0's http request and loading display. What are the precautions when using Vue2.0's http request and loading display? The following is a practical case. , let’s take a look.

We need two additional dependencies: vuex and axios: (still written after the previous project MyFirstProject)

npm i vuex axios -D
Copy after login

First briefly explain the http request

1. Introduce axios into main.js

import axios from 'axios' 
Vue.prototype.$http = axios;
Copy after login

2. Write a function in focus.vue to obtain data

<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>
Copy after login

My two male gods are envious and envious, are they handsome?

This is the end of requesting data. Isn’t it very simple? However, when it comes to the store, it is a bit complicated. If you want to know what happens next, let’s listen to the next chapter.

I believe you have already read the case in this article. After mastering the method, please pay attention to other related articles on the php Chinese website for more exciting content!

Recommended reading:

Detailed steps for using jQuery JSONP cross-domain requests

Node’s process and child_process module Detailed explanation of usage

The above is the detailed content of Detailed explanation of the use of http request and loading display of Vue2.0. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!