阅读此文前,请了解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. 十二、C# 委托与Lambda表达式(匿名方法的另一种写法)

    委托与Lambda表达式   1.委托概述 2.匿名方法 3.语句Lambda 4.表达式Lambda 5.表达式树   一.委托概述 相当于C++当中的方法指针,在C#中使用delegate 委托来 ...

  2. 安装SQLServer2008后Windows防火墙上的端口开放

    1.打开SQL Server 配置管理器-->SQL Server 网络配置-->XXX的协议,启用TCP/IP协议2.打开TCP/IP协议的属性,切至“IP地址”标签,拉至最下端的IPA ...

  3. ajax使用中发现的问题与深入扩展(for循环中嵌套ajax)

    在学习ajax的过程中,我曾经遇到过这样的一个问题,为了得到一个详情列表,我要先向服务器去请求得到索引表,简单描述就是ajax中的success中的for循环中再次嵌套了ajax,结果第二层succe ...

  4. Elasticsearch学习1--head插件安装

    1.简要介绍 elasticsearch-head是一个elasticsearch的集群管理工具,它是完全由html5编写的独立网页程序. 2.最近尝试学习elasticsearch,查了一些资料,但 ...

  5. 完美让IE兼容input placeholder属性的jquery实现

    调用时直接引用jquery与下面的js就行了,相对网上的大多数例子来说,这个是比较完美的方案. /* * 球到西山沟 * http://www.cnzj5u.com * 2014/11/26 12:1 ...

  6. SGU 159.Self-Replicating Numbers

    时间限制:0.5s 空间限制:6M 题意:         在b(2<b<36)进制中,找到所有长度为n(0<n<2000)的自守数k,满足k^2%b^n=k,字典序输出.   ...

  7. 获取Enum的扩张方法。

    public static class EnumExtention { /// <summary> /// 获取枚举的描述信息 /// </summary> /// <t ...

  8. Unity3D动态加载外部资源

    最近一直在和这些内容纠缠,把心得和大家共享一下: Unity里有两种动态加载机制:一是Resources.Load,一是通过AssetBundle,其实两者本质上我理解没有什么区别.Resources ...

  9. HTML5有语义的内联元素详解

    HTML5有语义的内联元素详解 time标签 time 元素表示一个时间值,比如 5:35 P.M., EST, April 23, 2007.例如: Example Source Code:< ...

  10. PHP图片操作

    <?php $filename="http://pic.nipic.com/2007-12-06/2007126102233577_2.jpg";//图片地址//获取图片信息 ...