1:进入项目,npm安装

   npm install axios --save

2.在main.js下引用axios

  import axios from 'axios'

3:准备json数据
自己写了一个json数据,放在服务器上,现在要通过vue项目调用数据
http://www.intmote.com/test.json

4:跨域问题,设置代理,利用proxyTable属性实现跨域请求
在config/index.js 里面找到proxyTable :{} ,然后在里面加入以下代码

5:打开一个界面User.vue,开始写请求数据的方法

User.vue参考代码:

6:再次运行
npm run dev

这个时候,我们可以看见,请求的数据

原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1

Vue框架Element UI教程-axios请求数据的更多相关文章

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

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

  2. 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题

        方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加 ...

  3. vue之axios请求数据本地json

    写给自己的话:静态的json文件要记得放在static文件夹下,想打自己 1.下载插件 npm install axios --save 2.在main.js下引用axios import axios ...

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

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

  5. VUE -- 对 Element UI table中数据进行二次处理

    时间——日期 后台经常给我们返回的是 时间戳 (例如:1535620671) 这时候我们页面展现的时候需要将时间戳转换为我们要的格式 例如 (YYYY-MM-DD HH:mm:ss) 如果是在Elem ...

  6. Vue框架Element的事件传递broadcast和dispatch方法分析

    前言 最近在学习饿了么的Vue前端框架Element,发现其源码中大量使用了$broadcast和$dispatch方法,而Element使用的是Vue2.0版本,众所周知在Vue 1.0升级到2.0 ...

  7. vue与element ui的el-checkbox的坑

    一,场景 通过使用checkbox,实现如图的场景, 点击某个tag,实现选中和非选中状态. 二, 官网的例子 通过切换checked值为true或者false来实现,一个checkbox的状态切换 ...

  8. vue.js+element ui Table+spring boot增删改查

    小白初学,不懂的还是太多了,找了好多资料才做出来的先记录一下 1.先用Spring boot创建一个包含了增删改查的项目 2.创建vue.js项目 3.安装Element UI (1)进入项目文件夹下 ...

  9. axios请求数据完整

    <template> <!-- 所有的内容要被根节点包含起来 --> <div id="home"> 首页组件 <button @clic ...

随机推荐

  1. python第一周:python初识、流程控制

    编译性语言:在将源代码编译完毕生成一个可执行文件后才能运行 解释性语言:在代码的运行期间进行编译 动态类型语言:在运行期间才去做数据检查的语言,也就是说在使用动态类型语言时不用指定数据类型 静态类型语 ...

  2. android onConfigurationChanged的那点事

    Android学习笔记——关于onConfigurationChanged   从事Android开发,免不了会在应用里嵌入一些广告SDK,在嵌入了众多SDK后,发现几乎每个要求在AndroidMan ...

  3. 实战:一、使用mongo做一个注册的小demo

    思路:1.使用mongoose 进行 数据库的链接 2.使用Schema来进行传输字段的定义 3.安装koa-router进行数据处理4.安装koa-bodyparser 进行post数据交互5.解决 ...

  4. TCP协议和UDP协议

    一:TCP(Transmission Control Protocol)  传输控制协议 TCP是主机对主机层的传输控制协议,提供可靠的连接服务,采用三次握手确认建立一个连接: 第一次握手:主机A发送 ...

  5. BA-防冻开关的安装

    防冻开关学名:防冻恒温保护器,在通风空调系统中监测加热盘管空气侧温度来防止盘管冻坏.具有较小的转换差和良好的重复性.可自动复位.当在30cm长的毛细管上温度低于选择的设定值时会产生一个闭合信号给DDC ...

  6. HDU 4352

    #include <iostream> #include <cstdio> #include <cmath> #include <string.h> # ...

  7. 【LeetCode-面试算法经典-Java实现】【056-Merge Intervals(区间合并)】

    [056-Merge Intervals(区间合并)] [LeetCode-面试算法经典-Java实现][全部题目文件夹索引] 原题 Given a collection of intervals, ...

  8. 【jQuery】对于复选框操作的attr与prop

    这个是在jQuery1.6版本号之后出现的鬼东西.受影响的主要有下拉列表select与复选框checkbox.众所周知.在jQuery中能够用attr()取出节点的属性,然而对于checkbox却不是 ...

  9. RDIFramework.NET V2.9版本号 WinFom部分新增与修正的功能

    RDIFramework.NET  V2.9版本号 WinFom部分新增与修正的功能 转眼间RDIFramework.NET框架走了快6个年头了,随着一个版本号一个版本号的升级改造,如今已经越来越完美 ...

  10. Cocos2d-x 2.2.3 使用NDK配置安卓编译环境问题之 Cannot find module with tag &#39;CocosDenshion/android&#39; in import path

    1.当做安卓移植的时候遇到例如以下问题: Android NDK: jni/Android.mk: Cannot find module with tag 'CocosDenshion/android ...