002 vue-resource
一：概述
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的更多相关文章
- vue resource 携带cookie请求 vue cookie 跨域
vue resource 携带cookie请求 vue cookie 跨域 1.依赖VueResource 确保已安装vue-resource到项目中,找到当前项目,命令行输入: npm instal ...
- 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 ...
- vue -resource 文件提交提示process,或者拦截处理
this.$http.post('url',fd||data,{emulateJSON:true}).then(fn(res){},fn(res){}) process成功案例 _self.$http ...
- 002——vue小结
1.new 一个vue对象的时候你可以设置他的属性,其中最重要的包括三个,分别是:data,methods,watch. 2.其中data代表vue对象的数据,methods代表vue对象的方法,wa ...
- vue resource 携带cookie请求 vue cookie 跨域(六)
1.依赖VueResource 确保已安装vue-resource到项目中,找到当前项目,命令行输入: npm install vue-resource --save 在主方法添加 过滤 Vue.h ...
- vue resource patch方法的传递数据 form data 为 [object Object]
今天在测试 iblog 登录时,传送过去的数据总是 [object Object],以至于后台识别不出来. vue 使用了 vueResource 组件,登录方法为 patch. 经过探索,终于在官网 ...
- (尚002)Vue的基本使用
输入端在上面变化的同时,下面的内容也在变 View-->DOM监听-->指令;大括号数据 {{username}} Model-->模型(简单来说就是data,数据供view自动去读 ...
- Vue.js——使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
概述 上一篇我们介绍了如何使用vue resource处理HTTP请求,结合服务端的REST API,就能够很容易地构建一个增删查改应用.这个应用始终遗留了一个问题,Web App在访问REST AP ...
- Vue.js——vue-resource全攻略
概述 上一篇我们介绍了如何将$.ajax和Vue.js结合在一起使用,并实现了一个简单的跨域CURD示例.Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的D ...
- vue.js插件使用(01) vue-resource
本文的主要内容如下: 介绍vue-resource的特点 介绍vue-resource的基本使用方法 基于this.$http的增删查改示例 基于this.$resource的增删查改示例 基于int ...
随机推荐
- golang执行Linux和Windows命令
1. 可接收变参命令 package main import ( "fmt" "os" "os/exec" "strings&qu ...
- kubernetes里面的GC--转发
什么是GC GC 是 Garbage Collector 的简称.从功能层面上来说,它和编程语言当中的「GC」 基本上是一样的.它清理 Kubernetes 中「符合特定条件」的 Resource O ...
- 日志聚合工具loki
目录 1.loki是什么 2.loki特点 3.loki组成 4.loki安装 4.1.添加helm的chart库 4.2.安装loki及promtail 4.3.安装grafana 5.配置和使用 ...
- springmvc手动获取bean
@Service @Lazy(false) public class SpringContextHolder implements ApplicationContextAware, Disposabl ...
- Rendering in UE4
Intro Thinking performance. Identify the target framerate, aim your approach on hitting that target ...
- Error while obtaining UI hierarchy XML file: com.android.ddmlib.SyncException: Remote object doesn't
在使用真机定位页面元素时启动uiautomatorviewer.bat ,报错Error while obtaining UI hierarchy XML file: com.android.ddml ...
- Windows环境下安装和使用nginx1.16.0
nginx是一款开源的HTTP服务器和反向代理服务器,nginx可以作为Web服务器提供HTTP访问功能,类似于Apache.IIS等.目前nginx已经在国内外很多网站作为Web服务器或反向代理服务 ...
- 【项目管理工具】—— Microsoft Office Project 介绍
Project是由微软开发的项目管理软件.设计的目的在于协助项目经理发展计划,为任务分配资源.跟踪计划.管理预算和分析工作量. 对于我们之前的项目来说,之前的整体计划和WBS任务分解都是通过Excel ...
- 自然数幂和——第一类Stirling数和第二类Stirling数
第一类Stirling数 首先设 $$S_k(n)=\sum_{i=0}^ni^k$$ 根据第一类斯特林数的定义(P是排列数,C是组合数,s是Stirling) $$C_n^k={P_n^k\over ...
- 解决最新版fitnesse无法运行测试用例的问题
用fitnesse-standalone.jar这个jar包时 运行测试用例会报错,显示IOException:can not run program:”c:\program files\java\j ...