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几种常见开局方式详解
在SF问题中看到了一个关于vue-cli中的template问题,问题是这样的: 用vue-cli工具生成的main.js中: import Vue from 'vue' import App from './App' import router from './router' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, template: '<App/>'
-
vue2.0获取自定义属性的值
最近在项目中使用了vue.js.在爬坑的路上遇到了很多问题.这里都会给记录下来,今天要说的是怎么获取自定义属性的值. HTML <!DOCTYPE html> <html> <head> <script src="http://vuejs.org/js/vue.js"></script> <meta charset="utf-8"> <title>JS Bin</title&g
-
Vue2实现组件props双向绑定
Vue学习笔记-3 前言 Vue 2.x相比较Vue 1.x而言,升级变化除了实现了Virtual-Dom以外,给使用者最大不适就是移除的组件的props的双向绑定功能. 以往在Vue1.x中利用props的twoWay和.sync绑定修饰符就可以实现props的双向绑定功能,但是在Vue2中彻底废弃了此功能,如果需要双向绑定需要自己来实现. Vue2的组件props通信方式 在Vue2中组件的props的数据流动改为了只能单向流动,即只能由组件外(调用组件方)通过组件的DOM属性attribu
-
详解vue2路由vue-router配置（懒加载）
vue路由配置以及按需加载模块配置 1.首先在component文件目录下写俩组件: First.vue: <template> <div>我是第一个页面</div> </template> <script> export default { name: 'first', data () { return { msg: 'Welcome to Your Vue.js App' } } } </script> <!-- Add &
-
vue2组件实现懒加载浅析
一. 什么是懒加载 懒加载也叫延迟加载,即在需要的时候进行加载,随用随载. 二.为什么需要懒加载 在单页应用中,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,延时过长,不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时 三.如何与webpack配合实现组件懒加载 1.在webpack配置文件中的output路径配置chunkFilename属性 output: { pat
-
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('/so
-
Vue2.0实现组件之间数据交互和通信操作示例
本文实例讲述了Vue2.0实现组件之间数据交互和通信操作.分享给大家供大家参考,具体如下: Vue2.0组件之间数据交互和通信. Vue2.0废弃了dispatch 和 $broadcast,如何在实现组件之间的数据交互和通信?下面是一个简单的demo解决了这个问题. 事件中心(evengtHub.js): //定义事件中心,在模板通信是使用. import Vue from 'vue'; export default { bus: new Vue() } 父组件: <div> <!--
-
微信小程序学习笔记之本地数据缓存功能详解
本文实例讲述了微信小程序学习笔记之本地数据缓存功能.分享给大家供大家参考,具体如下: 前面介绍了微信小程序获取位置信息操作.这里再来介绍一下微信小程序的本地数据缓存功能. [将数据存储在本地缓存]wx.setStorage [读取本地缓存]wx.getStorage 以手机号+密码登录为例,把登录成功返回的token值存储在本地缓存中,然后读取缓存中的token: login.php: <?php header("Content-type:text/html;charset=utf-8&q
-
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
通过前面对Vue的学习,到现在我们很有必要进一步了解Vue实例中的一些特殊的属性和方法.首先要了解的是$refs属性.但是在深入到JavaScript部分之前,我们先看看模板. <div id="app"> <h1>{{ message }}</h1> <button @click="clickedButton">点击偶</button> </div> let app = new Vue({ e
-
ORACLE学习笔记-添加更新数据函数篇
一.添加数据 /*添加数据*/ insert into STU values('stu0004','赵一',18,1,"kc0004"); insert into STU(STU_ID,STU_NAME,STU_AGE,STU_SET ) values('stu0013','储十一',19,1); 说明:如果不指定将数据添加到那个字段,那么此时必须列出全部数据,如果列出字段,则一一对应,必须列出约束不为空的所有字段,否则报错. 二.更新数据 /*更新数据*/ update STU SE
-
vue.js前后端数据交互之提交数据操作详解
本文实例讲述了vue.js前后端数据交互之提交数据操作.分享给大家供大家参考,具体如下: 前端小白刚开始做页面的时候,我们的前端页面中经常会用到表单,所以学会提交表单也是一个基本技能,其实用ajax就能实现,但他的原始语法有点...额 ...复杂,所以这里给大家提供一种用vue-resource向后端提交数据. (1)第一步,先在template中写一个表单: <el-form :model="ruleForm" :rules="rules" ref=&quo
-
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
本文实例讲述了微信小程序学习笔记之表单提交与PHP后台数据交互处理.分享给大家供大家参考,具体如下: 前面一篇结介绍了微信小程序函数定义.页面渲染.这里介绍form表单提交与后台php数据交互处理. [form表单提交] form.wxml: <form bindsubmit="formSubmit" bindreset="formReset"> <view> 昵称:<input type="text" name=&
-
vue学习笔记之vue1.0和vue2.0的区别介绍
今天我们来说一说vue1.0和vue2.0的主要变化有哪些 一.在每个组件模板,不在支持片段代码 VUE1.0是: <template> <h3>我是组件</h3><strong>我是加粗标签</strong> </template> VUE2.0:必须有根元素,包裹住所有的代码 <template id="aaa"> <div> <h3>我是组件</h3> <
-
Vue2.5学习笔记之如何在项目中使用和配置Vue
最开始的项目开发中,我们如果使用第三方的库我们会直接在项目中直接使用 script 元素标签引入即可. <script src="../xxx.js"></script> Vue 我们也可以这种引入的方式 <div id="root">{{name}}</div> <script src="./dist/vue.js"></script> <script> con
-
详解vue前后台数据交互vue-resource文档
这两天学习了vue-resource插件个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. Vue可以构建一个完全不依赖后端服务的应用,同时也可以与服务端进行数据交互来同步界面的动态更新. Vue通过插件的形式实现了基于AJAX,JSPNP等技术的服务端通信. vue-resource是一个通过XMLHttpRequrest或JSONP技术实现异步加载服务端数据的Vue插件 提供了一般的 HTTP请求接口和RESTful架构请求接口,并且提供了全局方法和VUe组件实例方法. 使用的版本是