Vue学习之vue-resource小结（五）
一、Vue实现数据交互的方式：
1、Vue除了vue-resource之外，还可以使用‘axios’的第三方包实现数据的请求；
2、常见的数据请求类型有：
get、post、jsonp
3、JSONP的实现原理：
由于浏览器的安全性限制，不允许AJAX访问，协议不同、域名不同、端口号不同的数据接口，浏览器认为这种访问不安全；
可以通过动态创建script标签的形式，把script标签的src属性，指向数据接口的地址，因为script标签不存在跨域限制，这种数据获取方式，称为JSONP（注意：根据JSONP的实现原理，知晓，JSONP只支持Get请求）；
具体实现过程：
①、先在客户端定义一个回调方法，预定义对数据的操作；
②、再把这个回调方法的名称，通过URL传参的形式，提交到服务器的数据接口；
③、服务器数据接口组织好要发送给客户端的数据，再拿着客户端传递过来的回调方法名称，拼接出一个调用这个方法的字符串，发送给客户端去解析执行；
④、客户端拿到服务器返回的字符串之后，当做Script脚本去解析执行，这样就能够拿到JSONP的数据了。
4、具体的三种方式的使用方法如下图：
5、发送请求时的options选项对象包含以下属性：
6、具体使用时需要先导入vue.js然后再导入vue.resource!
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
<!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>vue-resource</title>
<script src="./lib/vue.js"></script>
<script src="./lib/vue-resource.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>
var vm = new Vue({
el: "#app ",
data: {},
methods: {
getInfo() {
//发起get请求
//当发起get请求之后，通过.then 来设置成功的回调函数
this.$http.get("请求的地址").then(function(result) {
//通过 result.body 拿到服务器返回的成功的数据
console.log(result.body);
});
}
},
postInfo() {
//发起post请求 application/x-wwww-form-urlencoded
//手动发起的 post请求，默认没有表单格式，所以，有的服务器处理不了
//通过POST方法的第三个参数，{ emulateJSON: true} 设置提交的内容类型 为普通表单数据类型
this.$http.post("地址", {}, { emulateJSON: true }).then(result => {
console.log(result.body);
});
},
jsonpInfo() {
//发起jsonp请求
this.$http.jsonp("地址").then(result => {
console.log(result.body);
});
}
});
</script>
</body>
</html>
Vue学习之vue-resource小结（五）的更多相关文章
- Vue学习笔记-Vue.js-2.X 学习(五)===>脚手架Vue-CLI(PyCharm)
Vue项目在pycharm中配置 退出运行: ctrl+c Vue学习笔记-Vue.js-2.X 学习(六)===>脚手架Vue-CLI(项目说明)
- Vue学习笔记-Vue.js-2.X 学习(六)===>脚手架Vue-CLI(项目说明-Babel)
五 Vue学习-vue-cli脚手架学习(创建只选一个选项:Babel) 1. 项目目录说明 node_modules : 包管理文件夹 public : 静态资源 src : 源代码 gitign ...
- Vue学习笔记-Vue.js-2.X 学习(四)===>脚手架Vue-CLI(基本工作和创建)
(五) 脚手架Vue-CLI 一 Vue-CLI前提(nodejs和webpack) 二 Vue学习-nodejs按装配置,Node.js 就是运行在服务端的 JavaScript. 1. 去nod ...
- Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习
一 使用环境: windows 7 64位操作系统 二 IDE:VSCode/PyCharm 三 Vue.js官网: https://cn.vuejs.org/ 四 下载安装引用 方式1:直接 ...
- vue学习之vue基本功能初探
vue学习之vue基本功能初探: 采用简洁的模板语法将声明式的将数据渲染进 DOM: <div id="app"> {{ message }} </div> ...
- vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus
vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...
- Vue学习笔记-Vue.js-2.X 学习(三)===>组件化高级
(四) 组件化高级 1.插槽(slot)的基本使用 A:基本使用: <slot></slot> B:默认置:<slot><h1>中间可以放默认值< ...
- Vue学习笔记-Vue.js-2.X 学习(二)===>组件化开发
===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...
- Vue学习笔记-Vue.js-2.X 学习(七)===>脚手架Vue-CLI(路由Router)
脚手架Vue-CLI(路由Router) 一 按装(通过新创建脚手架按装),如果在原来的脚手架上按装直接进图型化界面vue ui的插件按装. 二 使用(上面按装下面步骤自动会生成) 第一步:导入路由对 ...
- Vue学习之--------Vue中收集表单数据（使用v-model 实现双向数据绑定、代码实现）（2022/7/18）
文章目录 1.Vue中实现表单数据的收集 1.1 基础知识 1.2 代码实例 1.3 测试效果 1.4 额外插一嘴 1.Vue中实现表单数据的收集 1.1 基础知识 表单中常用的标签:input(输入 ...
随机推荐
- nginx 跨域请求访问
1.nginx跨域请求访问 location ~ .*\.(htm|html)$ { add_header Access-Control-Allow-Origin(请求域名) *(所有域名) http ...
- CentOS7配置本地Yum源
从CentOS7官网下载DVD中存在需要的大部分软件,所以在没有网络的情况下可以配置yum源为本地的DVD,下载速度快,软件稳定.1. 如果使用虚拟机,那么就在虚拟机中挂载DVD的iso文件.2. 使 ...
- 关于时间排序在ios中失效的处理方法
上个月公司做项目的时候在列表排序的时候产品加了一个需求,通过点击量,发布时间,评论量进行筛选的一个需求. 一开始在电脑上测试基本没问题,然后我也就放下了这个按耐不住的小心脏,然后在完成所有模块后 sh ...
- 将python项目.py文件打包成.exe文件
安装pyinstaller包 pip3 install pyinstaller 如果不行 pip3 install pyinstaller -i https://pypi.doubanio.com/s ...
- python相对导包问题
导包分为:绝对路径.相对路径 在测试时发现不能够使用相对路径 查过之后才知道: 运行模块(如:main.py)中导包只能使用绝对路径,不能使用相对路径 官方文档: Note that relative ...
- 数据库: 安装配置数据库,使用Navicat for MySQL和手机APP 连接测试(如果上一节碰到问题可参考这一节)
咱就安装上 还有这个 最终测试请参考上一节 启动MySQL服务主要有以下两种方法: 第一种: 在搜索框中输入“services,msc” ,en ...
- MYSQL：基于哈希的索引和基于树的索引有什么区别？
B+树是一个平衡的多叉树.B+树从根节点到叶子节点的搜索效率基本相当,不会出现大幅波动. 哈希索引采用一定的哈希算法,把键值换成新的哈希值,检索时不需要类似B+树那样从根节点逐级查找,只需一次哈希算法 ...
- 趣谈Linux操作系统学习笔记：第二十七讲
一.文件系统的功能规划 1.引子 咱们花了这么长的时间,规划了会议室管理系统,这样多个项目执行的时候,隔离性可以得到保证. 但是,会议室里面被回收,会议室里面的资料就丢失了.有一些资料我们希望项目结束 ...
- .NET三层架构开发初步
转自:https://www.cnblogs.com/weilengdeyu/archive/2013/01/04/2844847.html 今天咱们来谈下三层架构.说到三层架构,搞过点程序的可能都知 ...
- 【IntelliJ IDEA学习之九】版本控制之Git和Github
版本:IntelliJIDEA2018.1.4 [IntelliJ IDEA学习之九]版本控制之Git版本:IntelliJIDEA2018.1.4 一.git知识准备git是目前流行的分布式版本管理 ...