vue2.0:(七)、vue-resource
本篇文章开始前,先介绍下什么是vue-resource,并且现在还有一个axios。
Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没有必要引入jQuery。vue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应。也就是说,$.ajax能做的事情,vue-resource插件一样也能做到,而且vue-resource的API更为简洁。
至于axios,vue更新到2.0之后,作者就宣告不再对vue-resource更新,而是推荐的axios,所以现在越来越多的人用axios。本文先用vue-resource做。运行成功后,会尝试使用axios。下面切入正题:
第一步:main.js :第一步两个点,一个导入一个使用。
代码:
import Vue from 'vue';
import App from './App';
import router from './router';
import VueResource from 'vue-resource'; <!----------
import 'common/style/total.less'; Vue.use(VueResource); /*eslint-disable no-new*/
new Vue({
router,
el:'#app',
render: h => h(App)
})
第二步:App.vue,我们现在先要取到我们所需要的数据。
代码:
<template>
<div id="aaa">
<v-header :seller="seller"></v-header> <!--------------------------------这里的部分是要绑定seller的数据。用 ‘ :’进行绑定。
<div class="tab border-1px">
<div class="tab-item">
<router-link to="/goods">商品</router-link>
</div>
<div class="tab-item">
<router-link to="/ratings">评论</router-link>
</div>
<div class="tab-item">
<router-link to="/seller">商家</router-link>
</div>
</div>
<router-view></router-view>
<div class="footer">
im footer
</div>
</div>
</template> <script>
import header from './components/header/header.vue';
const ERR_OK = 0;
export default{
data() { <!--------------------------------这里的部分是要把数据绑定头部的header,因为header组件对应的数据是seller。这样可以把seller输出,
return {
seller: {}
}
},
created() {
// ajax请求
this.$http.get('/api/seller').then((response) => {
response = response.body; // 返回json对象
if (response.errno === ERR_OK) {
this.seller = response.data;
console.log(this.seller);
}
});
},
components:{
'v-header':header
}
}
</script> <style lang="less">
@import 'common/style/mixin';
#aaa
.tab{
display:flex;
width:100%;
height:40px;
line-height:40px;
.border-1px(rgba(7,17,27,0.1));
.tab-item{
flex:1;
text-align: center;
a{
display:block;
font-size:14px;
color:#ccc;
&.active {
color:rgb(240,20,20);
}
}
}
}
</style>
在这里,我们使用: this.$http.get('/api/seller').then() 从接口中取出数据并用console.log打印出来。
当然,有export就要有import。接收的话就在header组件里面写上import。如下图:
利用props去接收。这样在标签里面就能取到seller里面的东西了。
这就是最简单的v-resource的用法。
vue2.0:(七)、vue-resource的更多相关文章
- Vue2.0学习--Vue数据通信详解
一.前言 组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.组件间如何传递数据就显得至关重要.本文尽可能罗列出一些常见的数据传递方式,如p ...
- vue2.0 vs vue
vue2.0相比vue1.0 有哪些改变,今天总结了一下 vue2.0组件中 template 不在支持代码片段 //vue1.0组件中template写法 <template> < ...
- Vue2.0总结———vue使用过程常见的一些问题
Vue目前的的开发模式主要有两种:1.直接页面级的开发,script直接引入Vue2.工程性开发,webpack+loader或者直接使用脚手架工具Vue-cli,里面的文件都配置好了 webpack ...
- vue2.0 关于Vue实例的生命周期
什么是生命周期 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁的过 ...
- Vue2.0 搭建Vue脚手架(vue-cli)
介绍 Vue.js是一套构建用户界面的渐进式框架.Vue 只关注视图层,采用自底向上增量开发的设计.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 阅读之前需要了解的知 ...
- vue2.0之Vue Baidu Map 局部注册使用
文档地址:https://dafrok.github.io/vue-baidu-map/#/zh/start/usage 局部注册 <template> <baidu-map id= ...
- vue2.0搭建vue手脚架(vue-cli)
1.安装node.js 从node官网下载并安装node,安装步骤很简单,只要一路“next”就可以了.安装完成后,打开命令行工具输入命令node -v,如下图,如果出现对应版本号,就说明安装成功了. ...
- VUE2.0学习总结
摘要: 年后公司项目开始上vue2.0,自己对学习进行了总结,希望对大家有帮助! VUE2.0学习 vue介绍 vue是什么? https://vuefe.cn/guide vue也是一个数据驱动框架 ...
- 【重点突破】—— Vue1.0到Vue2.0的变化
前言: 本文参考作者:_So_ 和 我是某慧 的博文,重点梳理Vue1.0升级到Vue2.0后在开发中要注意的不同,以做学习. 组件模板不再支持片段代码,必须有一个顶级元素包裹,例如: ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十六 ║Vue基础:ES6初体验 & 模块化编程
缘起 昨天说到了<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十五 ║ Vue前篇:JS对象&字面量&this>,通过总体来看,好像大家对这一块不是很 ...
随机推荐
- 2012年浙大:Head of a Gang
题目描述: One way that the police finds the head of a gang is to check people's phone calls. If there is ...
- Silverlight 5 系列学习之二
昨天学习了一下Silverlight基础感觉也没有什么特别之处,不过圈里朋友劝我不要深入学习了,因为ms已不再爱他的这个孩子了,好吧那就把上些简单的东西稍微过一下吧,要不然公司有什么需求要改的小弟不会 ...
- TripAdvisor architecture 2011/06
http://highscalability.com/blog/2011/6/27/tripadvisor-architecture-40m-visitors-200m-dynamic-page-vi ...
- VMware10中安装centos7没有可用的网络设备
1.问题描述 centos7安装到虚拟机无法上网 2.安装环境 win7 x64 WM 10.01 iso CentOS-7-x86_64-DVD-1503-01.iso {4.01G} ...
- (二)搭建SSH环境
一.struts 1.添加jar包: commons-fileupload-1.3.1.jar,[文件上传相关包] commons-io-2.2.jar, commons-lang-2.4.jar , ...
- day1 java基础回顾-集合
1.集合 1.1 集合的类型与各自的特性 ---|Collection: 单列集合 ---|List: 有存储顺序, 可重复 ---|ArrayList: 数组实现, 查找快, 增删慢 由于是数组实现 ...
- [转]C/C++获取当前系统时间
原文转自:http://www.cnblogs.com/mfryf/archive/2012/02/13/2349360.html 个人觉得第二种还是比较实用的,而且也是最常用的~ 不过当计算算法耗时 ...
- 2-1 本章作业&2-2 开发系统与工具选择
2-1 2-2 推荐使用Android Studio开发Flutter
- 938. Range Sum of BST
Given the root node of a binary search tree, return the sum of values of all nodes with value betwee ...
- 洛谷P1976 鸡蛋饼(Catalan数)
P1976 鸡蛋饼 题目背景 Czyzoiers 都想知道小 x 为什么对鸡蛋饼情有独钟.经过一番逼问,小 x 道出 了实情:因为他喜欢圆. 题目描述 最近小 x 又发现了一个关于圆的有趣的问题:在圆 ...