Vue2.0 http请求以及loading展示实例


Posted in Javascript onMarch 06, 2018

我们需要额外两个依赖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>

获取成功后展示效果如图:

Vue2.0 http请求以及loading展示实例

我的两个男神羡慕羡慕有没有很帅

到此请求数据就结束了,是不是很简单,然额接下来涉及到store就有点复杂了,欲知后事如何,且听下回分解~

Javascript 相关文章推荐
Javascript 遍历对象中的子对象
Jul 03 Javascript
JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
Apr 27 Javascript
js动态创建表格,删除行列的小例子
Jul 20 Javascript
Jquery ajaxStart()与ajaxStop()方法(实例讲解)
Dec 18 Javascript
jQuery自带的一些常用方法总结
Sep 03 Javascript
[js高手之路]寄生组合式继承的优势详解
Aug 28 Javascript
vue click.stop阻止点击事件继续传播的方法
Sep 04 Javascript
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
Sep 25 Javascript
vue 利用路由守卫判断是否登录的方法
Sep 29 Javascript
小程序采集录音并上传到后台
Nov 22 Javascript
js表达式与运算符简单操作示例
Feb 15 Javascript
vue样式穿透 ::v-deep的具体使用
Jun 04 Javascript
浅析Vue中method与computed的区别
Mar 06 #Javascript
浅谈Koa2框架利用CORS完成跨域ajax请求
Mar 06 #Javascript
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
Mar 05 #Javascript
JavaScript基础心法 数据类型
Mar 05 #Javascript
js获取html页面代码中图片地址的实现代码
Mar 05 #Javascript
vue axios 在页面切换时中断请求方法 ajax
Mar 05 #Javascript
node.js通过axios实现网络请求的方法
Mar 05 #Javascript
You might like
PHP生成HTML静态页面实例代码
2008/08/31 PHP
php实现MD5加密16位(不要默认的32位)
2013/08/12 PHP
PHP中$this和$that指针使用实例
2015/01/06 PHP
PHP 数组遍历foreach语法结构及实例
2016/06/13 PHP
php实现网页端验证码功能
2017/07/11 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
实用javaScript技术-屏蔽类
2006/08/15 Javascript
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
2011/02/26 Javascript
jQuery实现用方向键控制层的上下左右移动
2013/01/13 Javascript
jQuery中:selected选择器用法实例
2015/01/04 Javascript
js实现发送验证码后的倒计时功能
2015/05/28 Javascript
在DWR中实现直接获取一个JAVA类的返回值的两种方法
2016/12/25 Javascript
canvas实现刮刮卡效果
2017/03/14 Javascript
关于angular js_$watch监控属性和对象详解
2017/04/24 Javascript
vue cli 全面解析
2018/02/28 Javascript
vue-cli2.0转3.0之项目搭建的详细步骤
2018/12/11 Javascript
JavaScript中callee和caller的区别与用法实例分析
2019/06/28 Javascript
vue实现图片懒加载的方法分析
2020/02/05 Javascript
[02:15]2014DOTA2国际邀请赛 赛后退役选手回顾
2014/08/01 DOTA
[01:04:35]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第一场
2018/04/04 DOTA
[10:53]2018DOTA2国际邀请赛寻真——EG
2018/08/11 DOTA
python基础教程之基本内置数据类型介绍
2014/02/20 Python
简单谈谈Python中的几种常见的数据类型
2017/02/10 Python
Python3爬虫教程之利用Python实现发送天气预报邮件
2018/12/16 Python
Python开启线程,在函数中开线程的实例
2019/02/22 Python
Python configparser模块配置文件过程解析
2020/03/03 Python
python_matplotlib改变横坐标和纵坐标上的刻度(ticks)方式
2020/05/16 Python
如何用python处理excel表格
2020/06/09 Python
说出数据连接池的工作机制是什么?
2013/04/19 面试题
美术第二课堂活动总结
2014/07/08 职场文书
协商一致解除劳动合同协议书
2014/09/14 职场文书
毕业证明模板
2015/06/19 职场文书
童年读书笔记
2015/06/26 职场文书
浅谈Java实现分布式事务的三种方案
2021/06/11 Java/Android
Python开发简易五子棋小游戏
2022/05/02 Python