一：概述

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. 树莓派安装系统+ssh登录

    一.准备工作: (1)树莓派3b (2)官网下载系统 (3)SD卡 (4)网线 (5)SDFormatter.exe (6)win32diskimager.exe (7)putty (7)笔记本 二. ...

  2. C 是什么样的语言？

    学习交流可加 微信读者交流①群 (添加微信:coderAllen) 程序员技术QQ交流①群:736386324 --- ==C 是什么样的语言?== 这个问题不要急于寻找问题的答案,而是应该先去考虑当 ...

  3. 基于kubeamd初始化安装kubernetes集群

    环境:master,etcd 172.16.1.5node1 172.16.1.6node2 172.16.1.7前提:1.基于主机名通信,/etc/hosts 2.时间同步3.关闭firewalld ...

  4. sqliteman install parameter

    .安装前准备 系统要求:linux Qt库版本:一般都有 .安装文件 官网自行下载 .安装 )这里用的pscp pscp .\sqliteman-.tar.gz root@192.168.30.140 ...

  5. win10下无法安装loadrunner，提示“管理员已阻止你运行此应用”

    如下图: 1.再次进入控制面板,并且选择用户账户后把最下面的[更改用户账户控制设置],里面有个滑条,把滑条拉到最下面的[从不通知]上面并且确定. 2.按[Win+R]快捷键打开运行,输入 gpedit ...

  6. 如何使用git,进行项目的管理

    1.首先,现在git上个创建一个项目, 2.然后在本地创建一个springboot工程 3.使用git命令   git init 将这个springboot项目交给git进行管理 4.创建一个dev分 ...

  7. 使用Zookeeper实现负载均衡原理

    思路 使用Zookeeper实现负载均衡原理,服务器端将启动的服务注册到,zk注册中心上,采用临时节点.客户端从zk节点上获取最新服务节点信息,本地使用负载均衡算法,随机分配服务器. 创建项目工程 M ...

  8. 接口&调用接口

    接口: /** * 分页查询 * @param request * @param pageable * @return */ @GetMapping("/query-baseProductB ...

  9. HttpContext对象下的属性Application、Cache、Request、Response、Server、Session、User

    概述: HttpContext封装关于单个HTTP请求的所有HTTP特定信息. HttpContext基于HttpApplication的处理管道,由于HttpContext对象贯穿整个处理过程,所以 ...

  10. BZOJ2159 Crash的文明世界——树上DP&&第二类Stirling数

    题意 给定一个有 $n$ 个结点的树,设 $S(i)$ 为第 $i$ 个结点的“指标值”,定义为 $S(i)=\sum_{i=1}^{n}dist(i,j)^k$,$dist(i, j)$ 为结点 $ ...