Vue2.0 http请求以及loading展示实例
2018-03-06 08:38
681 查看
我们需要额外两个依赖vuex 和 axios:(还是接着上一个项目MyFirstProject写)
npm i vuex axios -D
首先简单的阐述下http请求
1、main.js 中引入axios
import axios from 'axios' Vue.prototype.$http = axios;
2、focus.vue中写个函数获取数据
<template> <div id="focus"> <ul > <li v-for="(item,index) in focusList"> <div class="fportraits"> <img :src="'./src/'+item.portrait" :alt="item.name"> </div> <div class="details"> <div class="ftitle"><strong> {{ item.name }} </strong></div> <p> {{ item.production }} </p> </div> <div class="isfocused"> <p>取消关注</p> </div> <div class="clearfix"></div> </li> </ul> </div> </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>
获取成功后展示效果如图:
我的两个男神羡慕羡慕有没有很帅
到此请求数据就结束了,是不是很简单,然额接下来涉及到store就有点复杂了,欲知后事如何,且听下回分解~
您可能感兴趣的文章:
相关文章推荐
- Vue2.0 http请求以及loading展示
- Vue2.0 axios请求以及loading展示
- Vue2.0 http请求以及loading展示(续)
- vue2.0父子组件以及非父子组件之间通信
- 7、vue2.0用Vue.extend构建消息提示组件的方法实例实现alert模态框组件(2)
- Vuex 模块化与项目实例 (2.0)
- vue中手机号,邮箱正则验证以及60s发送验证码的实例
- Vue2.0基础学习(3)--- 一个简单的实例学习
- Objective-C 2.0 with Cocoa Foundation---对象的初始化以及实例变量的作用域(1)
- vue2.0+基础知识连载(01)--- Vue实例简介
- 基于dwr2.0的Push推送技术详细解析以及实例
- vue2.0组件通信各种情况总结与实例分析
- VUE2.0父子组件以及非父子组件通信传参详解
- vue2.0 关于Vue实例的生命周期
- vue2.0之Vuex使用实例
- vue2.0 根据状态值进行样式的改变展示
- Vue 2.0 起步 (3) 数据流 vuex 和 LocalStorage 实例 - 微信公众号 RSS
- Vuex 模块化与项目实例 (2.0)
- vue2.0之Vuex使用实例
- Vue 2.0 起步(2) 组件及 vue-router实例 - 微信公众号RSS