首页 > web前端 > js教程 > 正文

在Vue2.0中http请求以及loading的展示

php中世界最好的语言
发布: 2018-03-28 11:11:24
原创
1751人浏览过

这次给大家带来在Vue2.0中http请求以及loading的展示,在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中写个函数获取数据

<template>
	<p id="focus">
		<ul >
			<li v-for="(item,index) in focusList">
				<p class="fportraits">
					@@##@@
				</p>
				<p class="details">
					<p class="ftitle"><strong> {{ item.name }} </strong></p>
					<p> {{ item.production }} </p>
				</p>
				<p class="isfocused">
					<p>取消关注</p>
				</p>
				<p class="clearfix"></p>
			</li>
		</ul>
	</p>
</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就有点复杂了,欲知后事如何,且听下回分解~

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

v-for索引index在html中的使用

立即学习前端免费学习笔记(深入)”;

vue+webpack打包路径有哪些问题

以上就是在Vue2.0中http请求以及loading的展示的详细内容,更多请关注php中文网其它相关文章!

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号