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 ...
随机推荐
- 【Tomcat】虚拟主机
<Host name="localhost" appBase="webapps" unpackWARs="true" autoDepl ...
- 记一次IntelliJ IDEA中文乱码问题
问题描述:输出控制台中文乱码,反正就是各种百度解决不了 问题解决:https://blog.csdn.net/m0_37893932/article/details/78280663 解决方案:我用的 ...
- golang读写文件之Scan和Fprintf
1. 标准输入输出 os提供了标准输入输出: Stdin = NewFile(uintptr(syscall.Stdin), "/dev/stdin") Stdout = NewF ...
- Python Image库简单处理图像
直接列举几个常用的函数,可在 http://effbot.org/imagingbook/image.htm 中查看更多相关函数. from PIL import Image import numpy ...
- python写一些简单的tcp服务器和客户端
代码贴上,做个记录 TcpClient # -*- coding:utf-8 -*- import socket target_host = "127.0.0.1" #服务器端地址 ...
- asp.net core 默认采用小驼峰命名和自定义模型验证
services.AddMvc(options => { options.Filters.Add<ApiExceptionAttribute>(); }).SetCompatibil ...
- BZOJ2523/LOJ2646 聪明的学生
BZOJ2523/LOJ2646 聪明的学生 第一道CTSC的题. 因为是思维题,所以思路就不写了.直接看代码吧. #include<bits/stdc++.h> #define M 30 ...
- jenkins生成的HTML报告中expand与collapse问题
1.打开jenkins中脚本命令执行页面 2.在脚本命令页面的,输入框中粘贴 System.setProperty("hudson.model.DirectoryBrowserSupport ...
- ARTS-week4
Algorithm 将两个有序链表合并为一个新的有序链表并返回.新链表是通过拼接给定的两个链表的所有节点组成的.示例:输入:1->2->4, 1->3->4输出:1->1 ...
- Python常用标准库函数
math库: >>> import math >>> dir(math) ['__doc__', '__loader__', '__name__', '__pack ...