Shulou(Shulou.com)06/03 Report--

This article mainly shows you the "sample analysis of http request and loading display in Vue2.0", which is easy to understand and well-organized. I hope it can help you solve your doubts. Let the editor lead you to study and study the "sample analysis of http request and loading display in Vue2.0".

We need two additional dependencies on vuex and axios: (or continue with the previous project MyFirstProject)

Npm i vuex axios-D

First of all, a brief description of the http request

1. Introduce axios into main.js

Import axios from 'axios' Vue.prototype.$http = axios

2. Write a function in focus.vue to get the data

{{item.name}}

{{item.production}}

Cancel the attention

Export default {data () {return {focusList: [] / Storage the data returned by the request}}, mounted () {this.getFocusList ()} Methods: {getFocusList () {/ / http get request data.json data var vm = this This.$http.get ('src/assets/data/data.json') .then (function (res) {vm.focusList = res.data) ) .catch (function (err) {console.log (err)})} }} # 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 2 remand;} # 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;} .isometric {float:right Font-size:0.8rem;height:0.8rem;line-height:0.8rem;margin:0;} .clearfix {clear:both;}

After success, the display effect is as shown in the figure:

The above is all the content of the article "http request in Vue2.0 and sample Analysis of loading presentation". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.