vue-cli 中 使用vue-resource 输出后台数据
阅读此文前,请了解vue-cli 组件如何使用 http://www.cnblogs.com/pearl07/p/6252116.html
1,mock(模拟)后台数据(新建data.Json文件)。

2,在build文件夹下的dev-server.js中,导入数据。

3,在main.js文件中引用vue-resource。
----在此之前,需要使用 npm install vue-resource 安装 vue-resource 依赖。

4,在app.vue中,在钩子函数内,利用vue-resource发送异步请求,成功后执行。
----在template中使用的<headcomp></headcomp>组件中,绑定(v-bind)获取的数据。
----v-bind:home=“home” 可以简写为 --- :home=“home”。

5,headcomp组件,在export default中,使用props接收绑定传过来的数据。
----于是便可以{{home.title}}进行调用,并渲染出。

6,最终效果

vue-cli 中 使用vue-resource 输出后台数据的更多相关文章
- vue cli 中关于vue.config.js中chainWebpack的配置
Vue CLI 的官方文档上写:调整webpack配置最简单的方式就是在vue.config.js中的configureWebpack选项提供一个对象. Vue CLI 内部的 webpack 配置 ...
- vue项目中使用mockjs+axios模拟后台数据返回
自己写练手项目的时候常常会遇到一个问题,没有后台接口,获取数据总是很麻烦,于是在网上找了下,发现一个挺好用的模拟后台接口数据的工具:mockjs.现在把自己在项目中使用的方法贴出来 先看下项目的目 ...
- 基于Vue开发的门户网站展示和后台数据管理系统
基于Vue的前端框架有很多,这几年随着前端技术的官方应用,总有是学不完的前端知识在等着我们,一个人的精力也是有限,不可能一一掌握,不过我们学习很大程度都会靠兴趣驱动,或者目标导向,最终是可以以点破面, ...
- Vue+Typescript中在Vue上挂载axios使用时报错
Vue+Typescript中在Vue上挂载axios使用时报错 在vue项目开发过程中,为了方便在各个组件中调用axios,我们通常会在入口文件将axios挂载到vue原型身上,如下: main.t ...
- Vue Cli 中使用 Karma / Chrome 执行样式相关单元测试
在 GearCase 开源项目 中,我使用了 Vue Cli 的默认测试框架.因此和样式相关的东西,都无法进行测试.因为它并不类似于无头浏览器,而是存在于虚拟内存之中. 现状 在如下 button.s ...
- vue cli中的env详解
前言 相信使用过 vueCli 开发项目的小伙伴有点郁闷,正常开发时会有三个接口环境(开发,测试,正式),但是 vueCli 只提供了两种 development,production(不包含 tes ...
- [转]Vue CLI 3搭建vue+vuex 最全分析
原文地址:https://my.oschina.net/wangnian/blog/2051369 一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@ ...
- Vue CLI 3搭建vue+vuex 最全分析
一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vue ...
- Vue Cli 3:vue.config.js配置文件
Vue Cli 3生成的项目结构,没有build.config目录,而是使用vue.config.js来进行配置. vue.config.js 是一个可选的配置文件,如果项目的 (和 package. ...
随机推荐
- linux常用命令(查看某些软件是否已安装)
查看imap是否已安装 rpm -qa | grep imap 以下为未安装的情形: 检查是否已安装sendmail: rpm -qa | grep sendmail 以下为已安装的返回:
- 『重构--改善既有代码的设计』读书笔记----Introduce Local Extension
同Introduce Foreign Method一样,很多时候你不能修改编辑原始类,你需要为这些服务类增加一些额外的函数,但你没有这个权限或者入口.如果你只需要一个或者两个外加函数那么你可以放心的使 ...
- yzoi1109&&viojs1042最小步数的一点看法——回文数
Description - 问题描述 有一天,雄霸传授本人风神腿法第一式:捕风捉影..............的步法(弟子一:堂主,你大喘气呀.风:你给我闭嘴.)捕风捉影的关键是换气(换不好就会大喘气 ...
- (转载)无缝滚动图片的js和jquery两种写法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- TatukGIS - GisDefs - DateTimeToXMLString 函数
函数名称 DateTimeToXMLString 所在单元 GisDefs 函数原型 function DateTimeToXMLString(_dtm: TDateTime; ...
- Bow模型(解释的很好)
Bag-of-words model (BoW model) 最早出现在NLP和IR领域. 该模型忽略掉文本的语法和语序, 用一组无序的单词(words)来表达一段文字或一个文档. 近年来, BoW模 ...
- PM加油站
老郭讲述深航CSM 1.需求有遗漏,人员水平不足:加班导致人员流失:但是这样,客户后来还是好评,并且项目被评为深航的标杆项目:老郭也是被指定为未来项目的项目经理:--!我想起了古时候的一句话:功夫在诗 ...
- 实现一个简单的sniffer
#include<stdio.h> #include<pcap.h> #include<unistd.h> #include<stdlib.h> //# ...
- 转:fork的解释
原文来自于:http://baike.baidu.com/view/1952900.htm?fr=aladdin fork编辑 叉子\分岔\岔口\复刻,西方人吃饭用的东西,经常用作刀和叉. 计算机程序 ...
- Node.js npm
Node程序包管理器(NPM)提供了以下两个主要功能: 在线存储库的Node.js包/模块,可搜索 search.nodejs.org 命令行实用程序来安装Node.js的包,做版本管理和Node.j ...