vue的请求数据方式
一,vue-resource请求数据
介绍:vue-resource请求数据方式是官方提供的一个插件
步骤:
1,npm安装
npm install vue-resource --save
或者使用cnpm淘宝镜像安装,会快很多。cnpm install vue-resource --save
加--save是为了在package.json中引用,表示在生产环境中使用。因为我们在日常开发中,如果我们要打包代码给其他人或者上传到github,又或者要发布代码时,package.json就是安装所需要的包。如果只在开发环境中使用,则只需要--save-dev,有一些只在开发环境中用,有一些要在生产环境中用。
2,在main.js入口文件中引入vue-resource
引入之后要使用这个插件
如果不使用此插件的话,会报如下错误:
3,在项目中用this.$http.get()等等使用,详情看 vue-resource github
实例:
注意:this.$http.get()等等的各种http请求都是继承promise的。promise是异步的请求;其次,.then箭头函数里的this代表的是上下文。根据箭头函数this的定义,只在函数定义时就已经赋值可知,this,指代的是定义函数的对象,在vue中对象就是methods当前页面。所以this指导的是data里面的数据。如果想要获取包裹函数外函数的数据,即闭包的概念。实现方法就是在外层函数加一个var that = this;将外层的this先储存到that中。如下实例,同时还解决了跨域的问题:
二,axios请求数据
介绍:这是一个第三方的插件 github地址:https://github.com/axios/axios
第一步:npm安装 npm install axios -save
第二步:直接调用。和vue-resource的区别是:aixos是每在一个页面用一次就要在该页面调用一次。vue-resource是绑定了全局的了。具体使用方法可以看github:
第三步:关于axios的跨域请求
在config->index.js->proxyTable配置如下:target填写自己想要的地址
如下配置,url为地址后面所带的参数,配置好后,现在npm run dev 运行就行。
第四步:关于多个并发请求:
上面这个是同一地址的跨域,如果要拿不同地址的跨域,只需要更改config->index.js->proxyTable的配置,增加地址块就行。
三,关于fetch-jsonp
vue的请求数据方式的更多相关文章
- vue vue-resource 请求数据
main.js import Vue from 'vue'; import App from './App.vue'; /*使用vue-resource请求数据的步骤 1.需要安装vue-resour ...
- Vue vue-resource三种请求数据方式pet,post,jsonp
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue.js 请求数据
VUE.JS var vm = new Vue({ el:"#list", data:{ gridData: "", }, mounted: function( ...
- C# 中请求数据方式
#region 根据URL获取结果集 /// <summary> /// 根据URL获取结果集 默认为GET,如果数据量大了可以传入POST // ...
- vue.js请求数据(axios)
使用npm安装axios npm install axios --save 在main.js中引入axios import axios from "axios"; 注册axios到 ...
- vue 异步请求数据后,用v-if,显示组件,这样初始化的值就在开始的时候传进去了
请求到数据才会有的一个组件,并把数据传进组件中 https://www.cnblogs.com/LuckyWinty/p/6246698.html
- 爬取'Content-Type': 'text/plain;charset=UTF-8' ,发送请求数据方式
解决方式 直接以字符串的方式发送data就可以得到响应数据 import requests data = 'k1:v1,k2:v2' requests.post(url, data=data)
- VUE实现请求数据
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- C# 请求数据 方式1
public static string PostWebRequest2() { HttpWebRequest req = (HttpWebRequest)HttpWebRequest.Create( ...
随机推荐
- javascript之alter的坑
1.注意在使用alert返回两数之和时,会出现0.1+0.2并不等于0.3的bug 解决方法: var f=0.1; var g=0.2; alert((parseFloat(f)*100+parse ...
- webstorm tools window
webstorm左侧的文件列表不见了, 通过菜单,view-->tools window-->project window就可以找到
- Python编程:从入门到实践—函数
从函数中修改列表 一家为用户提交的设计制作3D打印模型的公司,需要打印的设计存储在一个列表中,打印后移到另一个列表中. #!/usr/bin/env python # -*- coding:utf-8 ...
- UVALive 7325 Book Borders
题目链接:https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&page=show_ ...
- mysql转化时间戳毫秒到秒
其实我感觉都不值得写一篇随笔的,但是呢,我就是想写 其实就是截取毫秒时间戳的前十位就是我们是秒时间戳啦 update 表 set 表字段 = substr(表字段,1,10) 好简单 嫌弃中
- 阶段1 语言基础+高级_1-3-Java语言高级_1-常用API_1_第4节 ArrayList集合_19-ArrayList练习四_筛选集合
大集合里面循环装了20个int类型的随即数字 下面要自定义方法,这个方法专门负责筛选 遍历偶数的集合 重点是集合当做方法的参数,还能当做集合的返回值
- delphi自定义事件处理
http://www.cnblogs.com/ywangzi/archive/2012/09/06/2673414.html delphi自定义事件处理 为什么我们点击按钮,就会执行按钮的oncl ...
- Java ——String 类 StringBuffer 和 StringBuilder类 随机字符
本节重点思维导图 String 类 创建字符串 String str = "I love ai"; 在代码中遇到字符串常量时,"I love ai",编译器会使 ...
- 如何快速查找到多个字典中的公共键(Key)---Python数据结构与算法相关问题与解决技巧
如何快速查找到多个字典中的公共键(Key)-? 实际案例: 西班牙足球甲级联赛,每轮球员进球统计: 第1轮: { '苏亚雷斯':1,'梅西':2,'本泽马':1,...} 第2轮: { '苏亚雷斯 ...
- 【ABAP系列】SAP ABAP 模拟做成像windows一样的计算器
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP ABAP 模拟做成像wind ...