Vue2.0 http请求以及loading展示
来源:互联网 发布:菜鸟网络是什么 编辑:程序博客网 时间:2024/06/05 19:22
我们需要额外两个依赖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就有点复杂了,欲知后事如何,且听下回分解~
阅读全文
5 0
- Vue2.0 http请求以及loading展示
- Vue2.0 http请求以及loading展示(续)
- vue2整个项目中,数据请求显示loading图
- vue2整个项目中,数据请求显示loading图
- HTTP请求以及HTTP响应
- HTTP请求以及HTTP响应
- vue2中使用axios http请求出现的问题解决
- vue2.0数据请求之axios
- 使用$http发送请求的时候显示loading
- HTTP请求流程以及请求信息分析
- vue2.0 生命周期图以及栗子
- HTTP协议以及HTTP请求中8种请求方法
- vue2.0中.vue文件的post请求
- vue2.0,jsonp仿百度搜索页面,请求百度数据
- http请求与squid以及apache联系
- python http请求以及Cookie的模拟
- http以及https请求的连接过程
- HttpClient发送http请求以及上传文件
- 阿里云
- mysql数据库的常用命令
- UNIX命令行快速入门1
- 行为型模式之观察者模式(Observer)
- Vue <一> 自定义组件 ,外部传入值
- Vue2.0 http请求以及loading展示
- Unity UGUI坐标转为3D世界坐标 世界左边转为UGUI坐标
- oracle数据库触发器
- NLP计算文档相似度之doc2vec
- error LNK2019: 无法解析的外部符号 / fatal error LNK1120: 2 个无法解析的外部命令
- mysql笔记一
- python 帮助文档下载地址
- focus-within
- Mongodb数据库必要的维护,如备份、恢复、导入、导出