一：概述

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. C# 里面将字符作为代码计算，主要是运算符号的计算

    DataTable dt = new DataTable(); string str="1+2*(5+3)+3-1"; dt.Compute(str, "false&qu ...

  2. scrapy爬虫中间件-urlLength

    浏览器里面能输入的最大url是有限制的 safari 最多 一万多 ie最少  2083 urllength中间件源码 谷歌和火狐正常 八千多 """ Url Lengt ...

  3. 得到List<HashTable>里面的list然后取list的某一项

    //得到List<HashTable>里面的listUnFix然后取listUnFix判断tempfix里面得值 List<Hashtable> list = new List ...

  4. Gitlab创建一个项目

    1.安装git yum install git 2.生成密钥文件:使用ssh-keygen生成密钥文件.ssh/id_rsa.pub ssh-keygen 执行过程中输入密码,以及确认密码,并可设置密 ...

  5. kindedtor 数据传输问题

    <script src="/static/kindeditor/kindeditor-all.js"></script><script src=&qu ...

  6. Android笔记(七十五) Android中的图片压缩

    这几天在做图记的时候遇第一次遇到了OOM,好激动~~ 追究原因,是因为在ListView中加载的图片太大造成的,因为我使用的都是手机相机直接拍摄的照片,图片都比较大,所以在加载的时候会出现内存溢出,那 ...

  7. 自动化运维-Ansible-playbook

    Ansible Playbook https://ansible-tran.readthedocs.io/en/latest/docs/playbooks_intro.html Ansible中文网址 ...

  8. mysqlbinlog 恢复数据到任意时间点

    创建表,插入数据. ``` mysql> create database binlog; mysql> create table bt(id int); mysql> insert ...

  9. oracle获取时间段之间的所有日期

    SELECT TO_CHAR(ADD_MONTHS(TO_DATE('2014-10', 'yyyy-MM'), ROWNUM - 1), 'yyyy-MM') as monthlist FROM D ...

  10. js 预解析以及变量的提升

    js在执行之前会进行预解析. 什么叫预解析? 预:提前 解析:编译 预解析通俗的说:js在执行代码之前会读取js代码,会将变量声明提前. 变量声明包含什么?1.var 声明 2.函数的显示声明. 提前 ...