Vue2学习笔记:数据交互vue-resource
基本语法
必须引入一个库：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的更多相关文章
- Vue学习笔记十三：Vue+Bootstrap+vue-resource从接口获取数据库数据
目录 前言 SpringBoot提供后端接口 Entity类 JPA操作接口 配置文件 数据库表自动映射,添加数据 写提供数据的接口 跨域问题 前端修改 效果图 待续 前言 Vue学习笔记九的列表案例 ...
- Vue2 学习笔记3
文中例子代码请参考github 定义Vue组件 什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组 ...
- vue2 学习笔记2
文中例子代码请参考github 品牌管理案例 添加新品牌 <body> <div id="app"> <div class="panel p ...
- uLua学习之数据交互（三）
前言 在上节中,大概谈了一下如何在lua脚本中调用unity3d中的方法来创建游戏物体,这只是很小的一个方面,uLua的优势在于对unity3d中C#语言的扩展和定制.那么如何扩展和定制呢?其中的数据 ...
- VUE2.0 饿了吗视频学习笔记(一)：VUE示例data.json
https://gitee.com/1981633/vue_study.git 源码下载地址,随笔记动态更新中有的同学找不到data.json,以下是data.json内容 { "selle ...
- Vue.js 学习笔记之四：Vue 组件基础
到目前为止,这个系列的笔记所展示的都是一些极为简单的单页面 Web 应用程序,并且页面上通常只有几个简单的交互元素.但在实际生产环境中,Web 应用程序的用户界面往往是由多个复杂的页面共同组成的.这时 ...
- Vue2 学习笔记1
什么是Vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App,Vue语法也是可以用于进行手机App开发的,需要借助于Wee ...
- EXCEL 2010学习笔记 —— 数据透视表
今天整理一下EXCEL2010 数据透视表的课程笔记,数据透视表可以对多组数据进行统计和整理,是一种基本的数据可视化工具. 记录6个方面的总结: 1.创建数据透视表 2.更改数据透视表的汇总方式 3. ...
- Vue学习笔记七：Vue中的样式
目录 两种样式 class样式 内联样式 两种样式 Vue中使用样式方式有两种,一种是class样式,一种是内联样式也就是style class样式 class样式使用的方式有5种,HTML如下 &l ...
随机推荐
- Ubuntu11.10 带图形安装步骤详解
不多说,直接上干货! 成功! 关于Ubuntu的网络设置.静态IP设置,见 Ubuntukylin-14.04-desktop( 不带分区)安装步骤详解 Ubuntukylin-14.04-desk ...
- Maven 学习笔记(一)
什么是 maven? 对于已经使用过 maven 的用户来说 maven 就是一个架构工具,使用它可以将代码构建成一个可发布的工具.当然也有人会说maven是一个项目管理的工具.当然各有各的说法,那么 ...
- PTA (Advanced Level) 1024 Palindromic Number
Palindromic Number A number that will be the same when it is written forwards or backwards is known ...
- JAVA 图像操作辅助类
package util; import java.awt.Component; import java.awt.Image; import java.awt.MediaTracker; import ...
- redis实战笔记（7）-第7章 基于搜索的应用程序
本章主要内容 使用Redis进行搜索 对搜索结果进行排序 实现广告定向 实现职位搜索
- 【Xmail】使用Xmail搭建局域网邮件服务器
下载地址: http://www.xmailserver.org/xmail-1.27.win32bin.zip,当前最新版本 1.27. 解压文件:xmail-1.27.win32bin.zip ...
- WCF DEMO2 基于HTTP-GET的元数据交换及Configure()方法以及添加MEX终结点
using System; using System.Diagnostics; using System.Linq; using System.ServiceModel; using System.S ...
- Ubuntu16.04 LTS上安装Go1.10
原因 Ubuntu资源库上默认使用的是Go1.6.2版本,给最新版本代码编译带来了不少问题.本文就记录下在Ubuntu下直接安装Go最新版1.10的步骤. 准备工作 1.卸载已有版本 # 卸载已经安装 ...
- int类型转换byte类型
计算机中,int类型占用4个字节,byte类型占用1个字节: 当int类型强转为byte类型时,计算机会截取最后的八位(1个字节): 由于计算机存储数据时,都是以补码的形式进行存储. 然而,我们通常看 ...
- Yii CGridView 关联表搜索排序实例
在这篇文章中,我准备讲解如何在CGridView中搜索或者排序关联表中的某一行,通过给Yii Blog demo添加一个list页面. 首先,检查你的blog demo里的protected\mode ...