05.vue-resource的基本使用
<!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.js"></script>
<!-- 注意：vue-resource依赖于vue，所以在引用时要注意顺序 -->
<!-- this.$http -->
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.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>
</body>
<script>
new Vue({
el: '#app',
data: { },
methods: {
getInfo() {
//通过.then来是指成功的回调函数
this.$http.get('https://cn.vuejs.org').then(function(result) {
//通过result.body拿到服务器返回成功的数据
//console.log(result.body);
})
},
postInfo() { //发起post请求
//手动发起的post请求，默认没有表单格式，所以有的服务器处理不了
//通过post方法的第三个参数，设置提交内容的类型为普通表单数据格式
this.$http.post('http://vue-studyit.io/api/post', {}, {
emulateJSON: true
}).then(function(result) {
//console.log(result.body)
})
},
jsonpInfo() { //发起jsonp 请求
this.$http.jsonp('http://vue-studyit.io/api/jsonp').then(result => {
console.log(result.body)
})
}
}
})
</script> </html>
05.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 ...
- 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. 经过探索,终于在官网 ...
- 05.VUE学习之表达式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- 05 vue项目01-组件关系、bootstrap
1.django后端项目 1.项目预期 配置前端静态资源 页面展示 2.django项目代码 主url from django.contrib import admin from ...
- 05 Vue项目搭建
Vue-CLI 项目搭建 1.环境搭建 安装node 官网下载安装包,傻瓜式安装:https://nodejs.org/zh-cn/ 安装cnpm npm install -g cnpm --regi ...
- 05 . Vue前端交互,fetch,axios,以asyncawait方式调用接口使用及案例
目标 /* 1. 说出什么是前后端交互模式 2. 说出Promise的相关概念和用法 3. 使用fetch进行接口调用 4. 使用axios进行接口调用 5. 使用asynnc/await方式调用接口 ...
- Vue.js——使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
概述 上一篇我们介绍了如何使用vue resource处理HTTP请求,结合服务端的REST API,就能够很容易地构建一个增删查改应用.这个应用始终遗留了一个问题,Web App在访问REST AP ...
随机推荐
- 企业网站的SSL签证生产测试以及https配置方法
这一次要做企业网站怎么获得安全的数字证书,没有数字证书的话,在浏览器访问网站的时候会跳出不安全界面,而且钓鱼网站也会让用户进去个假网站,一般企业可以去阿里云去买数字证书,买好之后浏览器便会加载这个数字 ...
- numpy中的range（）
1.arange返回一个array对象,arange(5)=([0,1,2,3,4]) 2.如果是两个参数,第一个参数是起点,第二个参数是终点 3.如果是三个参数,那么第三个参数就是步长
- 03python面向对象编程2
3.继承 如果你要编写的类是另一个现成类的特殊版本,可使用继承.一个类继承另一个类时,它将自动获得另一个类的所有属性和方法:原有的类称为父类,而新类称为子类.子类继承了其父类的所有属性和方法,同时还可 ...
- JS监听浏览器标签页的显示与隐藏
/** * 监听浏览器标签页的显示与隐藏 */ class ListenerPageVisibility { constructor () { // 设置隐藏属性和改变可见属性的事件的名称 this. ...
- python数据探索与数据与清洗概述
数据探索的核心: 1.数据质量分析(跟数据清洗密切联系,缺失值.异常值等) 2.数据特征分析(分布.对比.周期性.相关性.常见统计量等) 数据清洗的步骤: 1.缺失值处理(通过describe与len ...
- sql中count(1)和count(*)有区别吗
count(*) 对 innodb 而言,它需要把数据从磁盘中读取出来然后累计计数:而 MyISAM 引擎把一个表的总行数存在了磁盘上,所以执行 count(*) 会直接返回这个数,如果有 where ...
- SpringBoot路径映射
当然这个功能并非是springboot特有的,只是springboot提供了更简便的方法以供使用. 传统情况下我们跳转一个动态页面且并没有数据,也需要在controller中写一个跳转的con ...
- [CSP-S模拟测试]:打扫卫生（暴力）
题目描述 有$N$头奶牛,每头那牛都有一个标号$P_i1\leqslant Pi\leqslant M\leqslant N\leqslant 40,000$.现在$Farmer\ John$要把这 ...
- java 线程池的创建方式
package com.nf147.Constroller; import java.util.concurrent.ExecutorService; import java.util.concurr ...
- Java 中如何使用clone()方法克隆对象？
java为什么要 对象克隆: 在程序开发时,有时可能会遇到以下情况:已经存在一个对象A,现在需要一个与A对象完全相同的B 对象,并对B 对象的属性值进行修改,但是A 对象原有的属性值不能改变.这时,如 ...