一:

  在main.js里面处理http请求模块,因为没有这个模块,所以需要先安装这个模块:npm install vue-resource --save

  安装完毕之后,导入这个模块,并使用中间件将其使用

  

二:

  在需要请求数据的vue组件文件中处理http请求

  在methods属性的后面再次添加一个新的属性,来处理数据请求:created:function(){回调函数};

  

  这里是data数据部分users,将请求下来的数据赋值给这个部分即可。

三  

  对了,在此要说明一下,因为我自己没有数据,所以用的是网上提供的数据,搜索jsonplaceholder,

  在这个网址  http://jsonplaceholder.typicode.com/  内有一些数据能用到,如下图

  

  如这个里面的users,点击进去之后就是一些数据了,如下图

  

  然后再代码部分用到的请求地址就是这个地址 http://jsonplaceholder.typicode.com/users

  然后就能处理自己的东西啦~~~~~

(PS:新手学习,有不对的地方希望大佬们帮忙纠正,万分感谢!)

  

vue从入门到开发--4--处理http请求的更多相关文章

  1. vue从入门到开发--3-基础语法

    一:v-text指令 指令v-text:可通过该指令绑定动态数据(动态数据我觉得可以是从服务器请求下来的数据,保存在data里边,然后动态显示在文档中,因为是一个一个的组件,数据应该不会很多吧,就只有 ...

  2. vue从入门到开发--2-基本结构

    1.App.vue 是根文件,所有的其他组件的执行均需要在此文件内导入并调用才能实现. import (导入其他组件) Test (其他组件的名字) from ‘./components/test’( ...

  3. vue从入门到开发--1-安装脚手架

    一: 1.在文件目录下打开命令窗口(按住shift+右键[在此处打开命令窗口]或者直接ctrl+R打开命令窗口,利用cd选择到自己的文件目录) 2.$ npm install --global vue ...

  4. Spring Boot + Vue 前后端分离开发,前端网络请求封装与配置

    前端网络访问,主流方案就是 Ajax,Vue 也不例外,在 Vue2.0 之前,网络访问较多的采用 vue-resources,Vue2.0 之后,官方不再建议使用 vue-resources ,这个 ...

  5. spring boot + vue + element-ui全栈开发入门——开篇

    最近经常看到很多java程序员朋友还在使用Spring 3.x,Spring MVC(struts),JSP.jQuery等这样传统技术.其实,我并不认为这些传统技术不好,而我想表达的是,技术的新旧程 ...

  6. spring boot + vue + element-ui全栈开发入门——基于Electron桌面应用开发

     前言 Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库. Electron通过将Chromium和Node.js合并到同一个运行时环 ...

  7. spring boot + vue + element-ui全栈开发入门

    今天想弄弄element-ui  然后就在网上找了个例子 感觉还是可以用的  第一步是完成了  果断 拿过来  放到我这里这  下面直接是连接  点进去 就可以用啊 本想着不用vue   直接导入连接 ...

  8. Vue插件开发入门

    相对组件来说,Vue 的插件开发受到的关注要少一点.但是插件的功能是十分强大的,能够完成许多 Vue 框架本身不具备的功能. 大家一般习惯直接调用现成的插件,比如官方推荐的 vue-router.vu ...

  9. Vue.js 入门指南之“前传”(含sublime text 3 配置)

    题记:关注Vue.js 很久了,但就是没有动手写过一行代码,今天准备入手,却发现自己比菜鸟还菜,于是四方寻找大牛指点,才终于找到了入门的“入门”,就算是“入门指南”的“前传”吧.此文献给跟我一样“白痴 ...

随机推荐

  1. [HNOI 2010] 弹飞绵羊

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=2002 [算法] LCT动态维护森林连通性 时间复杂度 : O(NlogN ^ 2) ...

  2. 如何用Adb连接Android手机 & unable to connect to 192.168.1.100:5555的原因和解决方法

    利用adb来连接手机, 有两种方式: 1, wifi 2, usb. 1. 通过wifi, 利用adb来连接手机. 在pc的cmd中输入命令: adb connect 192.168.1.100 其中 ...

  3. ERROR (UnicodeEncodeError): 'ascii' codec can't encode characters in position 0-1: ordinal not in range(128

    ERROR (UnicodeEncodeError): 'ascii' codec can't encode characters in position 0-1: ordinal not in ra ...

  4. org.dom4j.DocumentException: null Nested exception: null解决方法

    由于最近在学习使用spring架构,经常会遇到与xml文档打交道,今天遇到了此问题,特来分享一下解决方案. 出错原因: 很明显是因为找不到文件路径.这个原因是因为我使用了*.clas.getResou ...

  5. CF-807C

    C. Success Rate time limit per test 2 seconds memory limit per test 256 megabytes input standard inp ...

  6. Laravel中使用模型对数据进行操作

    public function orm(){ //查询表的所有记录 //$user = Admin::all(); //dd($user); //查询某一条记录 //$user = Admin::fi ...

  7. VS中用C#开发应用程序的调试入门、技巧和实例(转载)

    入门篇 假设你是有着.Net平台的程序员,并且使用Visual Studio 做为开发工具. 断点:最简单的一种,设置一个断点,程序执行到那一句就自动中断进入调试状态.设置断点,在你觉得有问题的代码行 ...

  8. 658. Find K Closest Elements

    Given a sorted array, two integers k and x, find the k closest elements to x in the array. The resul ...

  9. 文档通信(跨域-不跨域)、时时通信(websocket)、离线存储(applicationCache)、开启多线程(web worker)

    一.文档间的通信 postMessage对象 //不跨域 1.iframe:obj.contentWindow [iframe中的window对象] iframe拿到父级页面的window: pare ...

  10. MongoDb Samus 驱动的改进

    一直使用 MongoDb 的 Samus C#驱动. 其有一个缺陷,就是无法支持struct的读写. 但是一般数据都用Class包装,所以也没有太在意. 随着这些天尝试写入 KLineData 时,遇 ...