一：概述

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. 元素定位方法之Uiautomator方法

    这个方法只能用于安卓系统,方法通过类UiSelector()来构造对象的 官网地址:https://developer.android.google.cn/topic/libraries/testin ...

  2. 【hadoop】hadoop3.2.0应用环境搭建与使用指南

    下面列出我搭建hadoop应用环境的文章整理在一起,不定期更新,供大家参考,互相学习!!! 杂谈篇: [英语学习]Re-pick up English for learning big data (n ...

  3. QQ推广工具

    目前比较简单易用的QQ推广工具有:一键加群.在线聊天 一.一键加群 1.官网链接 http://qun.qq.com/join.html 2.使用 1登录自己的QQ 2创建一个想要作为推广的群 3选择 ...

  4. linux设备驱动程序--串行通信驱动框架分析

    linux 串行通信接口驱动框架 在学习linux内核驱动时,不论是看linux相关的书籍,又或者是直接看linux的源码,总是能在linux中看到各种各样的框架,linux内核极其庞杂,linux各 ...

  5. 【Flask】 python学习第一章 - 4.0 钩子函数和装饰器路由实现 session-cookie 请求上下文

    钩子函数和装饰器路由实现 before_request 每次请求都会触发 before_first_requrest  第一次请求前触发 after_request  请求后触发 并返回参数 tear ...

  6. MySQL/MariaDB数据库的mysqldump工具备份还原实战

    MySQL/MariaDB数据库的mysqldump工具备份还原实战 作者:尹正杰  版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.mysqldump概述 1>.逻辑备份工具 mysq ...

  7. TCN时间卷积网络——解决LSTM的并发问题

    TCN是指时间卷积网络,一种新型的可以用来解决时间序列预测的算法.在这一两年中已有多篇论文提出,但是普遍认为下篇论文是TCN的开端. 论文名称: An Empirical Evaluation of ...

  8. Ubuntu创建启动器（快捷方式）的方式

    解压.tar.gz的navicat之后发现不能自动生成启动器了,研究了一下发现: 虽然不少带有图形界面的程序会在安装时自动在桌面上创建快捷方式,还有一些图形界面程序或者命令行程序可能需要你手动创建快捷 ...

  9. root用户ssh可以登录,xftp通过sftp不能登录链接CentOS解决办法

    xftp显示无法连接到xx.xx.xx(服务器地址) 解决办法: 把/etc/ssh/sshd_config文件中的Subsystem sftp /usr/libexec/openssh/sftp-s ...

  10. Python开发应用-正则表达进行排序搜索

    re模块提供了3个方法对输入的字符串进行确切的查询,match和search最多只会返回一个匹配条件的子串,可以理解为非贪婪模式,而findall会返回N个匹配条件的子串,可以理解为贪婪模式 re.m ...