基本语法

必须引入一个库：vue-resource github地址

// 基于全局Vue对象使用http

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

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

// 在一个Vue实例内使用$http

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

this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);
vue-resource的请求API是按照REST风格设计的，它提供了7种请求API：
  • get(url, [options])
  • head(url, [options])
  • delete(url, [options])
  • jsonp(url, [options])
  • post(url, [body], [options])
  • put(url, [body], [options])
  • patch(url, [body], [options])

Options

Parameter Type Description
url string 请求的UR
body Object, FormData, string request body
headers Object request header
params Object 请求的URL参数对象
method string 请求的HTTP方法，例如：'GET', 'POST'或其他HTTP方法
timeout number 单位为毫秒的请求超时时间 (0 表示无超时时间)
before function(request) 请求发送前的处理函数，类似于jQuery的beforeSend函数
progress function(event) ProgressEvent回调处理函数
credentials boolean 表示跨域请求时是否需要使用凭证
emulateHTTP boolean 发送PUT, PATCH, DELETE请求时以HTTP POST的方式发送，并设置请求头的X-HTTP-Method-Override
emulateJSON boolean 将request body以application/x-www-form-urlencoded content type发送

1. 向文本发出get请求

准备一个1.txt 的文本数据，时面的内容是：welcomet to vue!!!



<!DOCTYPE html>

<html>

<head>

    <title></title>

    <meta charset="utf-8">

    <script src="http://unpkg.com/vue/dist/vue.js"></script>

    <script src="http://files.cnblogs.com/files/zycbloger/vue-resource.min.js"></script>

    <script type="text/javascript">

        window.onload = function(){

            var vm = new Vue({

                el:'#box',

                data:{

                    msg:'Hello World!',

                },

                methods:{

                    get:function(){

                        //发送get请求

                        this.$http.get('1.txt').then(function(res){

                            alert(res.body);

                        },function(){

                            alert('请求失败处理');   //失败处理

                        });

                    }

                }

            });

        }

    </script>

</head>

<body>

    <div id="box">

        <input type="button" @click="get()" value="按钮">

    </div>

</body>

</html>

上面代码实现了，点击按钮，就发送get请求，成功就会执行弹窗 welcomet to vue!!!

2. 关于向后端请求，并带参数的写法



<!DOCTYPE html>

<html>

<head>

    <title></title>

    <meta charset="utf-8">

    <script src="http://unpkg.com/vue/dist/vue.js"></script>

    <script src="http://files.cnblogs.com/files/zycbloger/vue-resource.min.js"></script>

    <script type="text/javascript">

        window.onload = function(){

            var vm = new Vue({

                el:'#box',

                data:{

                    msg:'Hello World!',

                },

                methods:{

                    get:function(){

                        //发送get请求

                        this.$http.get('get.do',{a:1,b:2}).then(function(res){

                            alert(res.body);

                        },function(){

                            alert('请求失败处理');   //失败处理

                        });

                    },

                    post:function(){

                        //发送post请求

                        this.$http.post('post.do',{a:1,b:2}).then(function(res){

                            alert(res.body);

                        },function(){

                            alert('请求失败处理');   //失败处理

                        });

                    }

                }

            });

        }

    </script>

</head>

<body>

    <div id="box">

        <input type="button" @click="get()" value="按钮get">

        <input type="button" @click="post()" value="按钮post">

    </div>

</body>

</html>

Vue2学习笔记:数据交互vue-resource的更多相关文章

  1. Vue学习笔记十三：Vue+Bootstrap+vue-resource从接口获取数据库数据

    目录 前言 SpringBoot提供后端接口 Entity类 JPA操作接口 配置文件 数据库表自动映射,添加数据 写提供数据的接口 跨域问题 前端修改 效果图 待续 前言 Vue学习笔记九的列表案例 ...

  2. Vue2 学习笔记3

    文中例子代码请参考github 定义Vue组件 什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组 ...

  3. vue2 学习笔记2

    文中例子代码请参考github 品牌管理案例 添加新品牌 <body> <div id="app"> <div class="panel p ...

  4. uLua学习之数据交互（三）

    前言 在上节中,大概谈了一下如何在lua脚本中调用unity3d中的方法来创建游戏物体,这只是很小的一个方面,uLua的优势在于对unity3d中C#语言的扩展和定制.那么如何扩展和定制呢?其中的数据 ...

  5. VUE2.0 饿了吗视频学习笔记(一)：VUE示例data.json

    https://gitee.com/1981633/vue_study.git 源码下载地址,随笔记动态更新中有的同学找不到data.json,以下是data.json内容 { "selle ...

  6. Vue.js 学习笔记之四：Vue 组件基础

    到目前为止,这个系列的笔记所展示的都是一些极为简单的单页面 Web 应用程序,并且页面上通常只有几个简单的交互元素.但在实际生产环境中,Web 应用程序的用户界面往往是由多个复杂的页面共同组成的.这时 ...

  7. Vue2 学习笔记1

    什么是Vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App,Vue语法也是可以用于进行手机App开发的,需要借助于Wee ...

  8. EXCEL 2010学习笔记 —— 数据透视表

    今天整理一下EXCEL2010 数据透视表的课程笔记,数据透视表可以对多组数据进行统计和整理,是一种基本的数据可视化工具. 记录6个方面的总结: 1.创建数据透视表 2.更改数据透视表的汇总方式 3. ...

  9. Vue学习笔记七：Vue中的样式

    目录 两种样式 class样式 内联样式 两种样式 Vue中使用样式方式有两种,一种是class样式,一种是内联样式也就是style class样式 class样式使用的方式有5种,HTML如下 &l ...

随机推荐

  1. Android RecyclerView的使用

    RecyclerView是什么? RecyclerView是一种新的视图组件,目标是为任何基于适配器的视图提供相似的渲染方式.它被作为ListView和GridView控件的继承者,在最新的suppo ...

  2. Jar包的格式

    jar包目录格式: |-- com | |-- test.class |-- META-INF | |-- MAINFEST.MF 一个正常的jar包下必有META-INF/MANIFEST.MF清单 ...

  3. Hive和SparkSQL： 基于 Hadoop 的数据仓库工具

    Hive: 基于 Hadoop 的数据仓库工具 前言 Hive 是基于 Hadoop 的一个数据仓库工具,可以将结构化的数据文件映射为一张数据库表,并提供完整的 SQL 查询功能,将类 SQL 语句转 ...

  4. Nodejs学习笔记（六）—Node.js + Express 构建网站预备知识

    前言 前面经过五篇Node.js的学习,基本可以开始动手构建一个网站应用了,先用这一篇了解一些构建网站的知识! 主要是些基础的东西... 如何去创建路由规则.如何去提交表单并接收表单项的值.如何去给密 ...

  5. JS事件细分

    鼠标相关事件执行顺序 与 onmousedown 事件相关连得事件发生次序( 鼠标左侧/中间 按钮): onmousedown onmouseup onclick 与 onmousedown 事件相关 ...

  6. Ionic3 UI组件之 autocomplete

    无论是web开发还是app开发,autocomplete是常用组件之一. 可惜截止到目前,ionic官方并未提供此组件. ionic2-autocomplete是GitHub上的开源的Ionic2组件 ...

  7. HTML的map-area的使用

    使用背景 在把设置图转成页面的时候,时常会遇到这种情况:一张小图片上有好多个可以点击的小图标,按常规的处理方法是把这一个一个的小图切出来,然后每个加个a标签进行跳转,但是这样会非常的浪费时间,而且会增 ...

  8. 写给创业者：如何打造让用户离不开的App

    百度权重查询 词库网 网站监控 服务器监控 SEO监控 Swift编程语言教程 还记得那个学会编程,开发了一个拼车应用程序——Trees For Cars,并因此发了一笔小财的流浪汉吗?今天的新闻称, ...

  9. 双11抢券，写一个自动打开页面的html，仅仅是设定时间打开抢券的页面

    <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  10. IIS负载均衡-Application Request Route详解第一篇： ARR介绍

    IIS负载均衡-Application Request Route详解第一篇: ARR介绍 说到负载均衡,相信大家已经不再陌生了,本系列主要介绍在IIS中可以采用的负载均衡的软件:微软的Applica ...