Vue.js2.0开发环境搭建(三)
转载自 Vue.js2.0从入门到放弃---入门实例(三)
今天就来简单说一下vue-resource,这是vue的一个与服务器端通信的HTTP插件,用来从服务器端请求数据。话不多说,直接上干货吧。
这里PS一下,有人反映之前的代码下载下来,运行会报错而且会有上百个之多,这是因为在我初始化项目的时候没有启用eslint,eslint是用来检测代码风格的,我是觉得格式要求严的有点过分,所以禁用了eslint。如果对eslint感兴趣的朋友,可以看 eslint的官网 了解一下格式的要求和一些相应的配置。
我们主要来了解一下以下内容:
- 模拟服务端返回数据
- 用vue-resource向服务器请求数据
模拟服务器返回数据
1、准备一个data.json文件
{"books": [{ "price": "111.00", "title": "语文", "img": "http://imgsrc.baidu.com/forum/w%3D580/sign=688d19b6422309f7e76fad1a420f0c39/0e143912b31bb051dfdebf0a327adab44bede0f9.jpg" },{ "price": "123.00", "title": "数学", "img": "http://shopimg.kongfz.com.cn/20130826/1746508/1746508YTGtm0_b.jpg"},{ "price": "113.00", "title": "英语", "img": "http://www.shiyi910.com/UploadFiles/2014-01/170/2014011322414554305.jpg"},{ "price": "112.00", "title": "物理", "img": "http://f.hiphotos.baidu.com/zhidao/wh%3D450%2C600/sign=b62ac53d4b36acaf59b59ef849e9a126/f603918fa0ec08fa2cf895a359ee3d6d55fbda3e.jpg"}]
}
2、“写接口”
修改dev-server.js文件,在大概第19行左右的 var app = express()之后,添加上如下内容
var appData = require('../data.json')
var books = appData.booksvar apiRoutes = express.Router()
apiRoutes.get('/books', function(req, res){res.json({data: books})
})app.use('/api', apiRoutes)
用vue-resource向服务器请求数据
1、安装vue-resource
2、在main.js里导入并使用vue-resource
// main.js// 导入Vue,这个是必需的,在使用Vue之前,必须先导入
import Vue from 'vue'// 导入 vue-router,并使用
import VueRouter from 'vue-router'
Vue.use(VueRouter)// 导入 vue-resource,并使用
import VueResource from 'vue-resource'
Vue.use(VueResource)// 导入 pages 下的 Home.vue
import Home from './pages/Home'
import Detail from './pages/Detail'// 定义路由配置
const routes = [{path: '/',component: Home},{path: '/detail',component: Detail}
]// 创建路由实例
const router = new VueRouter({routes
})// 创建 Vue 实例
new Vue({el: '#app',data(){return {transitionName: 'slide'}},router,watch: {// 监视路由,参数为要目标路由和当前页面的路由'$route' (to, from){const toDepth = to.path.substring(0, to.path.length-2).split('/').length// 官方给出的例子为 const toDepth = to.path.split('/').length 由于现在只有两个路由路径'/'和'/detail'// 按照官方给的例子,这两个路由路径深度都为 2 ,所以,这里稍作调整,不知道有什么不妥// 但目前在这个demo中能正常运行,如果知道更好的方法,欢迎留言赐教const fromDepth = from.path.substring(0, from.path.length-2).split('/').lengththis.transitionName = toDepth < fromDepth ? 'slide_back' : 'slide'// 根据路由深度,来判断是该从右侧进入还是该从左侧进入}}
})
3、修改Home.vue和List.vue来接收服务端返回的数据
<!-- Home.vue -->
<template><div class="container"><!-- 由于html不区分大小写,所以js中驼峰命名方式在html中要改成用短横线连接的形式 --><home-header></home-header><div class="content"><ul class="cont_ul"><listv-for="item in items":price="item.price":title="item.title":img="item.img"><!-- 通过v-bind(简写为“:”)绑定props来从父组件给子组件传值 --></list></ul></div></div>
</template>
<style>.container {max-width: 640px;margin: 0 auto;overflow-x: hidden;}.cont_ul {padding-top: 0.05rem;margin: 0 -0.12rem;}.cont_ul:after {content: "";display: block;width: 0;height: 0;clear: both;}
</style>
<script>// 导入要用到的子组件import HomeHeader from '../components/HomeHeader'import List from '../components/List'export default {data () {return {items: []}},// 在components字段中,包含导入的子组件components: {HomeHeader,List},// 在组件创建完成时,执行的钩子函数created (){// 在main.js里导入并使用vue-resource之后,就可以通过this.$http来使用vue-resource了,这里我们用到了get方法this.$http.get('/api/books').then((data) => {// 由于请求成功返回的是Promise对象,我们要从data.body.data拿到books数组this.items = data.body.data;})}}
</script>
<!-- List.vue -->
<template><li class="sec_li"><router-link to="/detail" class="lp_li_a"><div class="lp_li_imgWrap"><img :src="img" alt=""></div><p class="lp_li_name">{{ title }}</p><p class="lp_li_price">¥{{ price }}元</p></router-link></li>
</template><style scoped>.sec_li {float: left;width: 50%;margin-bottom: 0.1rem;}.lp_li_a {display: block;padding: 0.3rem 0;margin: 0 0.05rem;text-align: center;background: #fff;}.lp_li_imgWrap {padding: 0.24rem 0;}.lp_li_imgWrap > img {width: auto;height: 2.3rem;}.lp_li_name {height: 0.5rem;line-height: 0.5rem;font-size: 16px;color: #333;}.lp_li_price {height: 0.5rem;line-height: 0.5rem;font-size: 16px;color: #fb3b3b;}
</style><script>export default {// 接收父组件传过来的以下几个属性props: ['price', 'title', 'img'],}
</script>
Vue.js2.0开发环境搭建(三)相关推荐
- Vue.js2.0开发环境搭建(一)
转载自 Vue.js2.0从入门到放弃---入门实例(一) 最近,vue.js越来越火.在这样的大浪潮下,我也开始进入vue的学习行列中,在网上也搜了很多教程,按着教程来做,也总会出现这样那样的问题 ...
- Vue.js2.0开发环境搭建(二)
转载自 Vue.js 2.0从入门到放弃---入门实例(二) 前面一篇博客介绍了从零开始准备Vue.js所需的一些环境和工具.这片博客就来跟大家探讨一下Vue.js 2.0中的一些特性,以及一个小实 ...
- Vue.js2.0开发环境搭建(四)
转载自 vuejs2.0从入门到放弃--入门实例(四) 最近,很多小伙伴有疑惑,想学vuejs必须先了解复杂的构建工具和命令行操作吗!!答案是否定的! 对于很多做前端的同学,涉及到命令行和构建工具 ...
- NXP JN5189 ZigBee 3.0开发环境搭建(续)
NXP JN5189 ZigBee 3.0开发环境搭建(续) 一.设置 SDK 安装位置 二.导入 DK6 的 SDK 三.安装 NXP Zigbee Configuration Editor 1.插 ...
- NXP JN5189 ZigBee 3.0开发环境搭建
NXP JN5189 ZigBee 3.0开发环境搭建 一.下载相关软件 1.IDE 2.SDK 3.MCUXpresso Config Tools 4.GCC Arm Embedded tool c ...
- udig-1.4.0 开发环境搭建
udig-1.4.0开发环境搭建 下载需要的文件 dropins-3.7.2.zip: http://udig.refractions.net/files/downloads/extras/ ...
- 音视频开发-SRS 4.0开发环境搭建丨webrtc丨FFmpeg丨SRS流媒体服务器开发
SRS 4.0开发环境搭建 视频讲解如下,点击观看: 音视频开发-SRS 4.0开发环境搭建丨webrtc丨FFmpeg丨SRS流媒体服务器开发 音视频高级开发学习学习资料链接:FFmpeg/WebR ...
- Cocos2d-x.3.0开发环境搭建
配置:win7 + VS2012 + Cocos2d-x.3.0 + Cocos Studio v1.4.0.1 前言:本文介绍在上述配置下进行游戏开发的环境搭建.开发语言为C++.如果读者不需要查看 ...
- Ubuntu11 10 64Bit版上的Android 4 0 开发环境搭建
据说Android以后新版本只支持64bit版本开发,所以搭建一个64bit系统的Android开发环境为将来的Android4.0 及更高版本 开发打好基础. 一.准备工作 1.1 硬件 PC 一台 ...
最新文章
- OpenDigg前端开源项目月报201704
- 王恩东院士:AI计算是未来的核心生产力
- ASP.NET Core MVC – Caching Tag Helpers
- Linux上安装Nginx
- 外卖匹配系统_“外卖智能算法”和大学生有啥关系?来自工科生的专业分析
- React开发(201):react代码分割之打包导出
- 10行代码实现小程序支付功能!丨实战
- jquery获取select中的option的text值
- Hadoop1——创建虚拟机
- C语言计算总成绩和平均成绩
- 从零实现深度学习框架——理解正则化(二)
- Sql Server数据库查询去重数据,并保留最新的数据,以及删除重复数据
- Java基础每日一练—第6天:逻辑判断
- 看完东野小说 乱写写(含微量剧透)
- Aras Innovator-学-习-之-旅-
- java 获取ipv4的地址_java 获取ip地址和网络接口
- Python函数命名-PEP8编码规范的说明及IDE提示的忽略
- 姿态估计目标检测论文整理(1)
- screen的使用方法
- js实现html代码高亮,使用highlight.js高亮代码
热门文章
- qt 实现html 编辑器,基于QT的HTML编辑器的设计与实现.doc
- Java实现Huffman哈夫曼树(数组实现)
- LeetCode 501二叉搜索树中的众数-简单
- 海外服务器维护,海外服务器运行不正常的原因是什么?
- mysql 5.74安装教程_MySQL安装、基本账户安全(5.0以后版本)
- cma检测_CMA检测方法
- TCP协议——粘包与拆包
- C	简单瞎搞题(牛客练习赛22)(bitset优化dp)
- HDU - 7054 Yiwen with Formula 分治拆位FFT + dp + 费马小定理降幂
- P6348 [PA2011]Journeys 线段树优化建图 区间连区间