一：概述

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. iManager微服务自定义上传数据的两种方法

    背景 当数据量大时,通过浏览器上传可能速度较慢,可以使用以下两种方式进行数据导入. 方法一 1.访问k8s主页(31234端口) 找到所创建的微服务的命名空间(例如icloud-native-xxx) ...

  2. JavaScript获得URL地址栏参数防乱码

    JavaScript获得URL地址栏参数防乱码 JavaScript中经常需要解析地址栏中拼接的参数.下面的代码基本是固定的代码,这里摘录下备用. //获得地址栏参数值 function getUrl ...

  3. docker复制文件到宿主机

    从主机复制到容器 sudo docker cp host_path containerID:container_path 从容器复制到主机 sudo docker cp containerID:con ...

  4. USB之hub3

    =============  本系列参考  ============= <圈圈教你玩USB>.<Linux那些事儿之我是USB> 协议文档:https://www.usb.or ...

  5. linux命令提示符上色

    vi /etc/profile RED='\[\e[31;1m\]' Yello='\[\e[33;1m\]' Green='\[\e[32;1m\]' End='\[\e[0m\]' Pur='\[ ...

  6. POI IndexedColors 编码 与 颜色 对照

    https://www.cnblogs.com/yanjie-java/p/8329631.html 1 package com.java.connect.poi; 2 3 import java.i ...

  7. Linux学习21-设置定时任务crontab

    前言 做自动化测试写的脚本需设置定时任务,在指定的时间去执行,这就需要用到定时任务.之前用jenkins可以在里面设置定时任务,很好用,其实不用jenkins,在linux上也可以用crontab做个 ...

  8. OLED液晶屏幕（3）串口读取文字并分割

    https://blog.csdn.net/iracer/article/details/50334041 String comdata = ""; void setup() { ...

  9. （3） esp8266 官方库文件，没有求逆函数

    下载库文件 #include <MatrixMath.h> #define N (2) mtx_type A[N][N]; mtx_type B[N][N]; mtx_type C[N][ ...

  10. Tensorflow细节-P309-监控指标可视化

    注意下面一个点就ok了 with tf.name_scope('input_reshape'): # 注意看这里,图片的生成 image_shaped_input = tf.reshape(x, [- ...