下面小编就为大家分享一篇Vue2.0 http请求以及loading展示实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
我们需要额外两个依赖vuex 和 axios：（还是接着上一个项目MyFirstProject写）
npm i vuex axios -D
首先简单的阐述下http请求
1、main.js 中引入axios
import axios from 'axios' Vue.prototype.$http = axios;
2、focus.vue中写个函数获取数据
<div id="focus"> <ul> <li> <div class="fportraits"> </div><div class="details"> <div class="ftitle"><strong> {{ item.name }} </strong></div><p> {{ item.production }} </p></div><div class="isfocused"> <p>取消关注</p></div></li></ul></div> #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;} .isfocuse<div style="color:transparent">本文来源gaodai.ma#com搞#代!码(网</div>d{float:right;font-size:0.8rem;height:0.8rem;line-height:0.8rem;margin:0;} .clearfix{clear:both;}
获取成功后展示效果如图：
我的两个男神羡慕羡慕有没有很帅
到此请求数据就结束了，是不是很简单，然额接下来涉及到store就有点复杂了,欲知后事如何，且听下回分解~
以上就是Vue2.0 http请求以及loading展示实例的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：Vue2.0 http请求以及loading展示实例
转载请注明原文链接：Vue2.0 http请求以及loading展示实例
