1.vue-resource 的请求api是按照rest风格设计的,它提供了7种请求api

  • get(url, [data], [options]);

  • head(url,[data],[options]);
  • post(url, [data], [options]);

  • put(url, [data], [options]);

  • patch(url, [data], [options]);

  • delete(url, [data], [options]);

  • jsonp(url, [data], [options]);

都是接受三个参数:

  • url(字符串),请求地址。可被options对象中url属性覆盖。

  • data(可选,字符串或对象),要发送的数据,可被options对象中的data属性覆盖。

  • options对象

    参数 类型 描述
    url string 请求的URL
    method string 请求的HTTP方法,例如:'GET', 'POST'或其他HTTP方法
    body Object, FormData string request body
    params Object 请求的URL参数对象 ,get
    headers Object request header 第三方请求数据需要用到
    timeout number 单位为毫秒的请求超时时间 (0 表示无超时时间)
    before function(request) 请求发送前的处理函数,类似于jQuery的beforeSend函数
    progress function(event) ProgressEvent回调处理函数
    credentials boolean 表示跨域请求时是否需要使用凭证
    emulateHTTP boolean 发送PUT, PATCH, DELETE请求时以HTTP POST的方式发送,并设置请求头的X-HTTP-Method-Override
    emulateJSON boolean 将request body以application/x-www-form-urlencoded content type发送
  • emulateHTTP的作用

    如果Web服务器无法处理PUT, PATCH和DELETE这种REST风格的请求,你可以启用enulateHTTP现象。启用该选项后,请求会以普通的POST方法发出,并且HTTP头信息的X-HTTP-Method-Override属性会设置为实际的HTTP方法。
    Vue.http.options.emulateHTTP = true;
  • emulateJSON的作用

    如果Web服务器无法处理编码为application/json的请求,你可以启用emulateJSON选项。启用该选项后,请求会以application/x-www-form-urlencoded作为MIME type,就像普通的HTML表单一样。
    Vue.http.options.emulateJSON = true;

2.如何使用vue-resource

  • 安装vue-resource
npm i vue-resource --save -dev

--save 是安装到开发依赖中去

dependencies是项目的依赖,是项目上线后仍然要用的插件
devDependencies是开发的依赖,是在开发过程中要使用的
  • 要引用插件
<script src="node_modules/vue-resouce/dist/vue-resource.min.js"></script>
  • 调用get方法:
<div id="app">
<a href="javascript:;" v-on:click="ready">get 请求</a>
</div>
<script>
new vue({
el:"app:,
methods:{
ready: function() {
// get 请求
this.$http.get(this.apiUrl,{
params:{ //填写传输的参数 usersId:"101"
}
}) .then(res=> {
// 请求成功回调 },err => {
// 请求失败回调 });
}
}
})
</script>
  • 调用post方法
post:function(){
this.$http.post(url,{usrid:'105"},{header:{acction:"sss"}).then(res=>{
//成功回掉
})
}
  • 调用jsonp跨域请求
jsonp: function() {
this.$http.jsonp(this.apiUrl).then(function(response){
this.$set('gridData', response.data)
})
}

vue-resource是一个非常轻量的用于处理HTTP请求的插件,它提供了两种方式来处理HTTP请求:
1、使用Vue.http或this.$http
2、使用Vue.resource或this.$resource

vue-resource基础介绍的更多相关文章

  1. [Vue入门及介绍,基础使用、MVVM架构、插值表达式、文本指令、事件指令]

    [Vue入门及介绍,基础使用.MVVM架构.插值表达式.文本指令.事件指令] 1)定义:javascript渐进式框架 ​ 渐进式:可以控制一个页面的一个标签,也可以控制一系列标签,也可以控制整个页面 ...

  2. Node.js学习笔记(一)基础介绍

    什么是Node.js 官网介绍: Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js us ...

  3. Node.js 基础介绍

    什么是Node.js 官网介绍: Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js us ...

  4. Vue学习记录第一篇——Vue入门基础

    前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...

  5. Vue组件基础用法

    前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需, ...

  6. Vue入门基础

    前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...

  7. vue项目搭建介绍02

    目录 vue项目搭建介绍02 python-pycharm设置: vue创建项目分类: vue-cli构建 自定义构建 基础的vue项目目录: vue项目搭建介绍02 python-pycharm设置 ...

  8. vue 快速入门 系列 —— vue 的基础应用(上)

    其他章节请看: vue 快速入门 系列 vue 的基础应用(上) Tip: vue 的基础应用分上下两篇,上篇是基础,下篇是应用. 在初步认识 vue一文中,我们已经写了一个 vue 的 hello- ...

  9. vue 快速入门 系列 —— vue 的基础应用(下)

    其他章节请看: vue 快速入门 系列 vue 的基础应用(下) 上篇聚焦于基础知识的介绍:本篇聚焦于基础知识的应用. 递归组件 组件是可以在它们自己的模板中调用自身的.不过它们只能通过 name 选 ...

  10. Web3D编程入门总结——WebGL与Three.js基础介绍

    /*在这里对这段时间学习的3D编程知识做个总结,以备再次出发.计划分成“webgl与three.js基础介绍”.“面向对象的基础3D场景框架编写”.“模型导入与简单3D游戏编写”三个部分,其他零散知识 ...

随机推荐

  1. linux查看网卡速度

    ethtool eth0 会包含速度模式等各项属性信息   lspci|grep -i ether 可以查看硬件设备具体型号,会包含硬件厂商及信息   dmesg |grep -i eth 会显示系统 ...

  2. fabric 安装及简单使用 (centos6)

    fabric 是一个python的库,fabric可以通过ssh批量管理服务器. 第一步安装依赖包 安装epel源 1 wget -O /etc/yum.repos.d/epel.repo http: ...

  3. 按住说话 speex压缩

    demo下载 speex要用自己的包名.类名 用ndk-build生成so文件,再删除jni文件使用

  4. ps6-工具的基础使用

    1.图像的移动与对齐 ctrl+j:复制图层,然后再移动不损坏原来的图像. Ctrl+Z =返回键 Shift+单击最下方图层 选择全部 Alt+鼠标移动 复制并粘贴 2.规则选择工具组 shift键 ...

  5. XML DOM - Range 对象

    Range对象 Range对象表示文档的连续范围区域,如用户在浏览器窗口中用鼠标拖动选中的区域.   dom标准Range对象 在IE中使用TextRange对象 range对象常用的建立方法在开发中 ...

  6. 数据库迁移到Azure SQL Database用户无法登陆的问题

    业务情景:数据库是运维迁移上去的,好像使用了一个工具叫做Microsoft Data Migration Assistant,迁移之后,我的web应用无法连接数据库. 迁移之后的数据库内有User,但 ...

  7. SVN管理多个项目版本库 (windows,linux 通用)

    SVN管理多个项目版本库: . 安装SVN服务器软件,路径: C:\Program Files\Subversion . 在D盘创建svn根目录D:\SVN-CM . 在D:\SVN-CM下创建SVN ...

  8. 3.16 draw 3.17 更新函数

    3.16 draw virtual void draw(); void HelloWorld::draw() { CCSize size = CCDirector::sharedDirector()- ...

  9. web 压力测试工具ab压力测试详解

    Web性能压力测试工具之ApacheBench(ab)详解 原文:http://www.ha97.com/4617.html PS:网站性能压力测试是性能调优过程中必不可少的一环.只有让服务器处在高压 ...

  10. jquery ajax中使用jsonp的限制(转)

    http://www.cnblogs.com/dudu/archive/2012/12/04/jquery_ajax_jsonp.html jsonp 解决的是跨域 ajax 调用的问题.为什么要跨域 ...