写给自己的话:静态的json文件要记得放在static文件夹下,想打自己

1.下载插件

npm install axios --save

2.在main.js下引用axios

import axios from 'axios'

Vue.prototype.$http=axios

3.在static文件夹下写静态文件 home.json

{
"name":"xuexue",
"age":20
}

4.在组件中请求数据

this.$http.get('../../static/home.json')
.then(function(res){
console.log(res)
}
.catch(err=>{console.log(err)})
)

vue之axios请求数据本地json的更多相关文章

  1. Vue使用axios请求数据,默认post请求传参是json格式,但后台需要formData格式???

    最简单的方式,post请求参数json转formData…代码如下: 使用node的 qs 模块(推荐使用) 就是这么简单,在结合element ui表单一键提交涉及到,希望遇到的同学少走弯路,加油~

  2. Vue之axios请求数据

    引入文件 <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"> ...

  3. vue中Axios请求豆瓣API数据并展示到Swipe中

    vue中Axios请求豆瓣API数据并展示到Swipe中 1.首先是安装Axios: 安装方法cnpm install axios --save 等待npm安装完毕: 2.在main.js中引入axi ...

  4. Vue之单文件组件的数据传递,axios请求数据及路由router

    1.传递数据 例如,我们希望把父组件的数据传递给子组件. 可以通过props属性来进行传递. 传递数据三个步骤: 步骤1:在父组件中,调用子组件的组名处,使用属性值的方式往下传递数据 <Menu ...

  5. vue 解决axios请求出现前端跨域问题

    vue 解决axios请求出现前端跨域问题 最近在写纯前端的vue项目的时候,碰到了axios请求本机的资源的时候,出现了访问报404的问题.这就让我很难受.查询了资料原来是跨域的问题. 在正常开发中 ...

  6. vue 使用 jsonp 请求数据

    vue 使用 jsonp 请求数据 vue请求数据的时候,会遇到跨域问题,服务器为了保证信息的安全,对跨域请求进行拦截,因此,为了解决vue跨域请求问题,需要使用jsonp. 安装jsonp npm ...

  7. Vue使用axios post方法发送json数据报415Unsupported Media Type

    1.Vue使用axios post方法发送json数据 <template> <el-aside> <el-form ref="form" :mode ...

  8. vue axios post不能本地json

    vue 脚本架里axios post是不能本地json,GET可以 解决这个问题需要自己在node里写脚本: 在build里新建立fakedata.js var express = require(' ...

  9. Vue框架Element UI教程-axios请求数据

    Element UI手册:https://cloud.tencent.com/developer/doc/1270 中文文档:http://element-cn.eleme.io/#/zh-CN gi ...

随机推荐

  1. 在eclipse中添加android ADT

    对于程序开发的学者来说,eclipse并不陌生,它为我们提供了一个非常广阔的平台来开发程序.同样我们也可以用它来开发android程序. 但是在eclipse中并不能直接开发android程序,需要我 ...

  2. thymeleaf模版的使用

    thymeleaf,我个人认为是个比较好的模板,性能也比一般的,比如freemaker的要高,而且把将美工和程序员能够结合起来,美工能够在浏览器中查看静态效果,程序员可以在应用服务器查看带数据的效果. ...

  3. nginx配置1:借助Nginx搭建反向代理服务器与缓存静态文件

    修改配置文件nginx.conf (1)进程数与每个进程的最大连接数: •nginx进程数,建议设置为等于CPU总核心数 •单个进程最大连接数,那么该服务器的最大连接数=连接数*进程数 (2)Ngin ...

  4. CountDownTimer

    package com.daoge.widget; import java.text.DecimalFormat; import android.os.CountDownTimer; import a ...

  5. EasyNVR+EasyDSS实现简单套路的RTMP、微信直播、录像、回放方案

    安防领域HLS直播问题探讨 近期外出交流比较多,在之前的一篇博客<一种流量成本节省60%以上的手机直播微信直播H5直播幼儿园直播方案>我们说到了一种模式,就是当我们在做最近火热的幼儿园直播 ...

  6. Grunt是什么,以及它的一些使用方法

    ♥什么是Grunt Grunt和 Grunt 插件是通过 npm 安装并管理的,npm是 Node.js 的包管理器.grunt是基于node 更多插件请访问:http://www.gruntjs.n ...

  7. python venv虚拟环境

    1 目的 给python应用一个独立的运行环境,独立于其它的python应用也独立于系统的python环境. 环境升级不影响其它应用. 避免包冲突. 2 创建方式 2.1 pycharm中创建 pro ...

  8. php验证身份证号码有效性

    <?php // 18位身份证校验码有效性检查 // idcard_checksum18('...'); function idcard_checksum18($idcard) { if (st ...

  9. 性能测试--Jmeter录制、回放

    Jmeter录制.回放 在jmeter2.1版本之前,jmeter应该是不支持录制和回放功能的,那时候如果需要录制jmeter的性能测试脚本的话,就需要使用第三方工具——badboy.现在jmeter ...

  10. 一个小公司的前端笔试HTML CSS JS

    网上有这套题的答案,版本也很多,我做了很多参考.本文就当个小笔记,可能有错误,还望指正~ 第1章  Html篇 1. 你做的网页在哪些浏览器测试过?这些浏览器的内核分别是什么? 浏览器类型 内核 Fi ...