一：概述

1.说明

　　https://github.com/pagekit/vue-resource

2.使用方法

　　Vue.http.get('/someUrl', [config]).then(successCallback, errorCallback);

　　Vue.http.post('/someUrl', [body], [config]).then(successCallback, errorCallback);

　　// in a Vue instance

　　this.$http.get('/someUrl', [config]).then(successCallback, errorCallback);

　　this.$http.post('/someUrl', [body], [config]).then(successCallback, errorCallback);

二：示例

1.添加包

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

     <script src="./lib/vue-2.4.0.js"></script>

     <!-- 注意：vue-resource 依赖于 Vue，所以先后顺序要注意  -->

     <!-- this.$http.jsonp -->

     <script src="./lib/vue-resource-1.3.4.js"></script>

 </head>

 <body>

     <div id="app">

         <input type="button" value="get请求" @click="getInfo">

         <input type="button" value="post请求" @click="postInfo">

         <input type="button" value="jsonp请求" @click="jsonpInfo">

     </div>

     <script>

         // 创建 Vue 实例，得到 ViewModel

         var vm = new Vue({

             port: 8082,

             el: '#app',

             data: {},

             methods: {

                 getInfo() { // 发起get请求

                     //  当发起get请求之后， 通过 .then 来设置成功的回调函数

                     this.$http.get('http://localhost:8090/hello').then(function (result) {

                         // 通过 result.body 拿到服务器返回的成功的数据

                         console.log(result.body)

                     })

                 },

                 postInfo() { // 发起 post 请求   application/x-wwww-form-urlencoded

                     //  手动发起的 Post 请求，默认没有表单格式，所以，有的服务器处理不了

                     //  通过 post 方法的第三个参数， { emulateJSON: true } 设置 提交的内容类型 为 普通表单数据格式

                     this.$http.post('http://vue.studyit.io/api/post', {}, { emulateJSON: true }).then(result => {

                         console.log(result.body)

                     })

                 },

                 jsonpInfo() { // 发起JSONP 请求

                     this.$http.jsonp('http://localhost:8090/hello').then(function(result){

                         console.log(result)

                         console.log(result.body)

                     })

                 }

             }

         });

     </script>

 </body>

 </html>

　　

002 vue-resource的更多相关文章

  1. vue resource 携带cookie请求 vue cookie 跨域

    vue resource 携带cookie请求 vue cookie 跨域 1.依赖VueResource 确保已安装vue-resource到项目中,找到当前项目,命令行输入: npm instal ...

  2. Vue Resource root options not used?

    I specify a root options in my Vue-Resource in my main.js file, but when I do the request, it does n ...

  3. vue -resource 文件提交提示process,或者拦截处理

    this.$http.post('url',fd||data,{emulateJSON:true}).then(fn(res){},fn(res){}) process成功案例 _self.$http ...

  4. 002——vue小结

    1.new 一个vue对象的时候你可以设置他的属性,其中最重要的包括三个,分别是:data,methods,watch. 2.其中data代表vue对象的数据,methods代表vue对象的方法,wa ...

  5. vue resource 携带cookie请求 vue cookie 跨域(六)

    1.依赖VueResource  确保已安装vue-resource到项目中,找到当前项目,命令行输入: npm install vue-resource --save 在主方法添加 过滤 Vue.h ...

  6. vue resource patch方法的传递数据 form data 为 [object Object]

    今天在测试 iblog 登录时,传送过去的数据总是 [object Object],以至于后台识别不出来. vue 使用了 vueResource 组件,登录方法为 patch. 经过探索,终于在官网 ...

  7. (尚002)Vue的基本使用

    输入端在上面变化的同时,下面的内容也在变 View-->DOM监听-->指令;大括号数据 {{username}} Model-->模型(简单来说就是data,数据供view自动去读 ...

  8. Vue.js——使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用

    概述 上一篇我们介绍了如何使用vue resource处理HTTP请求,结合服务端的REST API,就能够很容易地构建一个增删查改应用.这个应用始终遗留了一个问题,Web App在访问REST AP ...

  9. Vue.js——vue-resource全攻略

    概述 上一篇我们介绍了如何将$.ajax和Vue.js结合在一起使用,并实现了一个简单的跨域CURD示例.Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的D ...

  10. vue.js插件使用(01) vue-resource

    本文的主要内容如下: 介绍vue-resource的特点 介绍vue-resource的基本使用方法 基于this.$http的增删查改示例 基于this.$resource的增删查改示例 基于int ...

随机推荐

  1. JavaScript: 自动类型转换-续

    在上一篇文章中,我们详细讲解了JavaScript中的自动类型转换,由于篇幅限制,没能覆盖到所有的转换规则,这次准备详细讲解一下. 上次我们提到了对象类型参与运算时转换规则: 1). 在逻辑环境中执行 ...

  2. 洛谷 P1816 忠诚题解

    题目描述 老管家是一个聪明能干的人.他为财主工作了整整10年,财主为了让自已账目更加清楚.要求管家每天记k次账,由于管家聪明能干,因而管家总是让财主十分满意.但是由于一些人的挑拨,财主还是对管家产生了 ...

  3. linux卸载及安装mysql 5.7以上

    删除: 1.rpm -qa|grep -i mysql     查看安装的mysql 2./usr/local/mysql/support-files/mysql.server stop  停止mys ...

  4. 文件上传相关报错: The current request is not a multipart request或is a MultipartResolver configured?

    1:from中涉及到图片上传的就要用post提交方式.否则就会报这个错误. 2:第一中:在jsp页面的<head></head>标签里面加上<meta http-equi ...

  5. 一行代码搞定WordPress面包屑导航breadcrumb

    有好几位网友在问WordPress面包屑导航breadcrumb怎么操作,网上有些教程是去function文件中定义,其实不用那么复杂,很简单一行代码就能搞定.下面随ytkah一起来看看.如果是单页, ...

  6. Bootstrap Method

    bootstrap方法是一种重采样技术,用于通过抽样数据集来估计总体统计数据.是一种面向应用的.基于大量计算的统计思维——模拟抽样统计推断. 它可以用来估计统计数据,例如平均值或标准差.在应用机器学习 ...

  7. BZOJ 4764: 弹飞大爷 LCT

    思路并不难,主要是细节需要注意一下. 在 lct 中,删边要写成:f[lson]=0,lson=0 (因为删 x->y 时 y 不一定是左儿子,y 只是 x 的前驱) 然后 f[lson]=ls ...

  8. 【洛谷P2664】 树上游戏 点分治

    code: #include <bits/stdc++.h> #define N 200009 #define ll long long #define setIO(s) freopen( ...

  9. Redis存储Hash

    结构: 1.存取操作: (1)单个存取: (2)一次存储多个,单个取出: 一次取出多个·: (3)取出全部的键和值: 2.删除: (1)删除单个键值对: (2)删除所有键值对: 3.增加数值: 4.减 ...

  10. CSS块元素、行内元素、行内块元素的转换

    一.块元素转行内元素:display:inline 二.行内元素转块元素:display:block div{ display: inline; /*无效 width: 500px; height: ...