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 相关文章推荐
本地对象Array的原型扩展实现代码
Dec 04 Javascript
网页源代码保护(禁止右键、复制、另存为、查看源文件)
May 23 Javascript
动态标签 悬停效果 延迟加载示例代码
Nov 21 Javascript
jquery ajax请求方式与提示用户正在处理请稍等
Sep 01 Javascript
JQuery动态添加和删除表格行的方法
Mar 09 Javascript
javascript跨域的方法汇总
Oct 23 Javascript
javascript判断firebug是否开启的方法
Nov 23 Javascript
BootStrap实现文件上传并带有进度条效果
Sep 11 Javascript
webpack 样式加载的实现原理
Jun 12 Javascript
浅析微信小程序modal弹窗关闭默认会执行cancel问题
Oct 14 Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
Sep 02 Javascript
vue 使用lodash实现对象数组深拷贝操作
Sep 10 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
Session服务器配置指南与使用经验的深入解析
2013/06/17 PHP
解析PHP实现多进程并行执行脚本
2013/06/18 PHP
php 使用GD库为页面增加水印示例代码
2014/03/24 PHP
PHP连接MSSQL时nvarchar字段长度被截断为255的解决方法
2014/12/25 PHP
PHP连接sftp并下载文件的方法教程
2018/08/26 PHP
PHP token验证生成原理实例分析
2019/06/05 PHP
js bind 函数 使用闭包保存执行上下文
2011/12/26 Javascript
jQuery-Easyui 1.2 实现多层菜单效果的代码
2012/01/13 Javascript
基于jQuery的简单九宫格实现代码
2012/08/09 Javascript
js关于精确计算和数值格式化以及直接引js文件
2014/01/28 Javascript
JQuery与JS里submit()的区别示例介绍
2014/02/17 Javascript
JavaScript添加随滚动条滚动窗体的方法
2016/02/23 Javascript
JavaScript实现Base64编码转换
2016/04/23 Javascript
Bootstrap CSS组件之下拉菜单(dropdown)
2016/12/17 Javascript
jQuery插件zTree实现删除树节点的方法示例
2017/03/08 Javascript
node.js操作mongodb简单示例分享
2017/05/25 Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
2018/02/21 Javascript
详解搭建es6+devServer简单开发环境
2018/09/25 Javascript
详解微信UnionID作用
2019/05/15 Javascript
js函数柯里化的方法和作用实例分析
2020/04/11 Javascript
[02:08]DOTA2英雄基础教程 马格纳斯
2014/01/17 DOTA
[02:05:03]完美世界DOTA2联赛循环赛 LBZS VS Matador BO2 10.28
2020/10/28 DOTA
python 测试实现方法
2008/12/24 Python
Python 递归函数详解及实例
2016/12/27 Python
利用Python将每日一句定时推送至微信的实现方法
2018/08/13 Python
Python 获取指定文件夹下的目录和文件的实现
2019/08/30 Python
Pytorch 的损失函数Loss function使用详解
2020/01/02 Python
CSS3 画基本图形,圆形、椭圆形、三角形等
2016/09/20 HTML / CSS
Turnbull & Asser官网:英国皇室御用的顶级定制衬衫
2019/01/31 全球购物
橄榄树药房:OLIVEDA
2019/09/01 全球购物
土木工程专业自荐信
2013/10/04 职场文书
药学专业个人自我评价
2013/11/11 职场文书
医院工作检讨书范文
2014/02/10 职场文书
班主任师德师风自我剖析材料
2014/10/02 职场文书
励志语录:时光飞逝,请学会珍惜所有的人和事
2020/01/16 职场文书
python如何获取网络数据
2021/04/11 Python