Vue2.0 http request and loading display instance, vue2.0loading

Vue2.0 http request and loading display instance, vue2.0loading

We need to add two additional dependency vuex and axios :( or write the MyFirstProject of the previous project)

npm i vuex axios -D 

First, briefly describe the http request

1. Introduce axios in main. js

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

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

<Template> <div id = "focus"> <ul> <li v-for = "(item, index) in focusList "> <div class =" fportraits ">  </div> <div class =" details "> <div class =" ftitle "> <strong >{{ item. name }}</strong> </div> <p >{{ item. production }}</p> </div> <div class = "isfocused"> <p> remove attention </p> </div> <div class = "clearfix"> </div> </li> </ul> </div> </template> <script> export default {data () {return {focusList: [] // store 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. 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>

Display Results After successful retrieval

My two male Gods envy and envy whether they are handsome or not

At this point, the request data is over. Isn't it very simple? However, the next step involving store is a bit complicated. If you want to know what to do later, let's listen to the next decomposition ~