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 ...
随机推荐
- win10 提示该文件没有与之关联的应用来执行该操作
将下面代码复制进一个文本文档,然后将文本文档的txt后缀改成bat.双击运行,可以解决问题. 问题发生原因是之前通过注册表去除了桌面图标的快捷方式的小标志. /-------------------- ...
- JSX 到 JS 的转换
在写react代码的时候,大部分同学应该都是写JSX.因为相比于写纯JavaScript.写JSX为我们去写组件,比写一些在JavaScript当中写类似于html结构的这种代码是要方便非常非常多的, ...
- keepalived日志显示脚本能执行成功，但是amoeba程序没启动起来，单独执行脚本amoeba能启动成功，放到keepalived里面启动不起来
keepalived日志如图: 解决:keepalived还有crontab等计划任务自动执行脚本,并不会有本地用户的环境变量,需要在脚本里面加 . /etc/profile 引入本地用户的环境变量
- Codeforces E. Alyona and a tree（二分树上差分）
题目描述: Alyona and a tree time limit per test 2 seconds memory limit per test 256 megabytes input stan ...
- (MYSQL)回表查询原理，利用联合索引实现索引覆盖
一.什么是回表查询? 这先要从InnoDB的索引实现说起,InnoDB有两大类索引: 聚集索引(clustered index) 普通索引(secondary index) InnoDB聚集索引和普通 ...
- phantomJS+Python 隐形浏览器
phantomjs解压后,把文件夹bin中的phantomjs.exe移到python文件夹中的Scripts中 实例: from selenium import webdriver driver = ...
- Thinkphp3.2下导入所需的类库 同java的Import 本函数有缓存功能
* 导入所需的类库 同java的Import 本函数有缓存功能 * @param string $class 类库命名空间字符串 * @param string $baseUrl 起始路径 * @pa ...
- tensorflow API _ 4 (优化器配置)
"""Configures the optimizer used for training. Args: learning_rate: A scalar or `Tens ...
- linux查看文件相关命令
通过命令+文件名查看内容.如下命令可以查看. 1,cat:由第一行开始显示文件内容:一次性显示文件所有内容 2,tac:从最后一行开始显示,可以看出tac与cat字母顺序相反:一次性显示文件所有内容, ...
- Bagging and Random Forest
Bagging和随机森林RF. 随机森林是最受欢迎和最强大的机器学习算法之一.它是一种称为Bootstrap Aggregation或bagging的集成机器学习算法. bootstrap是一种强大的 ...