一、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小结（五）的更多相关文章

  1. Vue学习笔记-Vue.js-2.X 学习(五)===>脚手架Vue-CLI(PyCharm)

    Vue项目在pycharm中配置 退出运行: ctrl+c Vue学习笔记-Vue.js-2.X 学习(六)===>脚手架Vue-CLI(项目说明)

  2. Vue学习笔记-Vue.js-2.X 学习(六)===>脚手架Vue-CLI(项目说明-Babel)

    五  Vue学习-vue-cli脚手架学习(创建只选一个选项:Babel) 1. 项目目录说明 node_modules : 包管理文件夹 public : 静态资源 src : 源代码 gitign ...

  3. Vue学习笔记-Vue.js-2.X 学习(四)===>脚手架Vue-CLI(基本工作和创建)

    (五) 脚手架Vue-CLI 一 Vue-CLI前提(nodejs和webpack) 二  Vue学习-nodejs按装配置,Node.js 就是运行在服务端的 JavaScript. 1. 去nod ...

  4. Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习

    一  使用环境: windows 7 64位操作系统 二  IDE:VSCode/PyCharm 三  Vue.js官网: https://cn.vuejs.org/ 四  下载安装引用 方式1:直接 ...

  5. vue学习之vue基本功能初探

    vue学习之vue基本功能初探: 采用简洁的模板语法将声明式的将数据渲染进 DOM: <div id="app"> {{ message }} </div> ...

  6. vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus

    vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...

  7. Vue学习笔记-Vue.js-2.X 学习(三)===>组件化高级

    (四) 组件化高级 1.插槽(slot)的基本使用 A:基本使用: <slot></slot> B:默认置:<slot><h1>中间可以放默认值< ...

  8. Vue学习笔记-Vue.js-2.X 学习(二)===>组件化开发

    ===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...

  9. Vue学习笔记-Vue.js-2.X 学习(七)===>脚手架Vue-CLI(路由Router)

    脚手架Vue-CLI(路由Router) 一 按装(通过新创建脚手架按装),如果在原来的脚手架上按装直接进图型化界面vue ui的插件按装. 二 使用(上面按装下面步骤自动会生成) 第一步:导入路由对 ...

  10. Vue学习之--------Vue中收集表单数据（使用v-model 实现双向数据绑定、代码实现）（2022/7/18）

    文章目录 1.Vue中实现表单数据的收集 1.1 基础知识 1.2 代码实例 1.3 测试效果 1.4 额外插一嘴 1.Vue中实现表单数据的收集 1.1 基础知识 表单中常用的标签:input(输入 ...

随机推荐

  1. 2019南昌网络赛I:Yukino With Subinterval(CDQ) （树状数组套主席树）

    题意:询问区间有多少个连续的段,而且这段的颜色在[L,R]才算贡献,每段贡献是1. 有单点修改和区间查询. 思路:46min交了第一发树套树,T了. 稍加优化多交几次就过了. 不难想到,除了L这个点, ...

  2. [冬令营Day1 T2]sequence

    题目描述 Description 给一个长度为N的序列以及Q的询问,每次两个参数l,r,问你序列[l,r]中的最大连续和 输入描述 Input Description 一行二个正整数N,Q. 接下来一 ...

  3. hdu5111 树链剖分，主席树

    hdu5111 链接 hdu 思路 先考虑序列上如何解决. 1 3 2 5 4 1 2 4 5 3 这个序列变成 1 2 3 4 5 1 3 5 5 2 是对答案没有影响的(显然). 然后查询操作\( ...

  4. PATB1009说反话

    这里有一点需要注意的就是,PAT里面是禁用gets函数的,所以要换成一个替代函数 那就是下面这个: //这个是定义一个字符串数组 char str[90]; //需要被替代的函数 gets(str) ...

  5. springboot事务

    参考: 1.https://www.cnblogs.com/kesimin/p/9546225.html https://www.cnblogs.com/east7/p/10585724.html

  6. virtualbox安装问题总结

    还是老问题 重点重点: https://blog.csdn.net/Loisleen/article/details/84975165#1install_the_gcc_make_perl_packa ...

  7. CF1208F Bits And Pieces

    CF1208F Bits And Pieces 传送门 思路 这里要运用SOS-DP的思路(\(\text{Sum over Subsets}\)).我在另外一篇博客里介绍过,如有需要可以搜索一下我的 ...

  8. Hadoop集群上搭建Ranger

    There are two types of people in the world. I hate both of them. Hadoop集群上搭建Ranger 在搭建Ranger工程之前,需要完 ...

  9. Golang（二）基本概念

    类型 18个基本类型:bool.string.rune.byte.int.uint.int8.uint.int8.int16.uint16.int32.uint32.int64.uint64.floa ...

  10. 微信小程序跳转函数总结

    微信小程序跳转函数总结 ​ 笔者在微信小程序前端的开发过程中,在不同的情况下遇到了需要使用不同的页面跳转逻辑的情况,以下是我对这些函数的使用场景的一个总结介绍. wx.navigateTo 这是最常用 ...