阅读此文前,请了解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 输出后台数据的更多相关文章

  1. vue cli 中关于vue.config.js中chainWebpack的配置

    Vue CLI  的官方文档上写:调整webpack配置最简单的方式就是在vue.config.js中的configureWebpack选项提供一个对象. Vue CLI 内部的 webpack 配置 ...

  2. vue项目中使用mockjs+axios模拟后台数据返回

    自己写练手项目的时候常常会遇到一个问题,没有后台接口,获取数据总是很麻烦,于是在网上找了下,发现一个挺好用的模拟后台接口数据的工具:mockjs.现在把自己在项目中使用的方法贴出来   先看下项目的目 ...

  3. 基于Vue开发的门户网站展示和后台数据管理系统

    基于Vue的前端框架有很多,这几年随着前端技术的官方应用,总有是学不完的前端知识在等着我们,一个人的精力也是有限,不可能一一掌握,不过我们学习很大程度都会靠兴趣驱动,或者目标导向,最终是可以以点破面, ...

  4. Vue+Typescript中在Vue上挂载axios使用时报错

    Vue+Typescript中在Vue上挂载axios使用时报错 在vue项目开发过程中,为了方便在各个组件中调用axios,我们通常会在入口文件将axios挂载到vue原型身上,如下: main.t ...

  5. Vue Cli 中使用 Karma / Chrome 执行样式相关单元测试

    在 GearCase 开源项目 中,我使用了 Vue Cli 的默认测试框架.因此和样式相关的东西,都无法进行测试.因为它并不类似于无头浏览器,而是存在于虚拟内存之中. 现状 在如下 button.s ...

  6. vue cli中的env详解

    前言 相信使用过 vueCli 开发项目的小伙伴有点郁闷,正常开发时会有三个接口环境(开发,测试,正式),但是 vueCli 只提供了两种 development,production(不包含 tes ...

  7. [转]Vue CLI 3搭建vue+vuex 最全分析

    原文地址:https://my.oschina.net/wangnian/blog/2051369 一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@ ...

  8. Vue CLI 3搭建vue+vuex 最全分析

    一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vue ...

  9. Vue Cli 3:vue.config.js配置文件

    Vue Cli 3生成的项目结构,没有build.config目录,而是使用vue.config.js来进行配置. vue.config.js 是一个可选的配置文件,如果项目的 (和 package. ...

随机推荐

  1. 【转】iOS开发UI篇—程序启动原理和UIApplication

    原文 http://www.cnblogs.com/wendingding/p/3766347.html   一.UIApplication 1.简单介绍 (1)UIApplication对象是应用程 ...

  2. jQuery 删除元素

    通过 jQuery,可以很容易地删除已有的 HTML 元素. 删除元素/内容 如需删除元素和内容,一般可使用以下两个 jQuery 方法: remove() - 删除被选元素(及其子元素) empty ...

  3. 微信小程序,大多数人误解的8个问题

    作者:王安,数字天堂DCloud公司创始人兼CEO 注:本文内容包含技术.商业,不懂技术的读者可以只看商业相关的内容.本文仅代表作者一家之言,如有不同意见,欢迎留言讨论~ 8个误解 坊间所传的信息很多 ...

  4. Bootstrap 和 LESS

    Bootstrap 简介 什么是 Bootstrap? Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的 ...

  5. asp.net mvc 强类型视图中传入List 数据到控制器

    问题来源: 在和一位技术老师聊天时,老师问我一个mvc 表单提交的问题,问道:怎样在表单提交的时候,将 带有 List 属性的对象传入控制器? 这时,我有点呆了,以前一直都好像是 单一属性的表单提交, ...

  6. CentOS 6.3 配置FTP

    一.FTP的安装 .检测是否安装了FTP:[root@localhost ~]# rpm -q vsftpd 如果安装了会显示版本信息: [root@localhost ~]# vsftpd-2.0. ...

  7. 为什么要用专业的ETL

    这两天一直在思考一个问题,为什么要用专业的etl工具进行数据清洗,原因如下: ETL负责将分布的.异构数据源中的数据如关系数据.平面数据文件等抽取到临时中间层后进行清洗.转换.集成,最后加载到数据仓库 ...

  8. 弄懂css中单位px和em,rem的区别

              国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢?         PX特点 1. IE无法调整那些使用px作为单位的字体大小 ...

  9. Unity3D RPC调用顺序问题

    使用Unity自带的Network实现多人协同任务时,因为使用RPC传递消息.RPC即远程过程调用,对于它的使用,第一反应的问题就是如果连续两次调用RPC,RPC的函数会顺序执行吗?还是只要RPC的消 ...

  10. CMD模块定义规范

    CMD 模块定义规范 在 Sea.js 中,所有 JavaScript 模块都遵循 CMD(Common Module Definition) 模块定义规范.该规范明确了模块的基本书写格式和基本交互规 ...