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、具体使用时需要先导入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>

原文地址:https://www.cnblogs.com/21-forever/p/11107019.html

时间: 2024-10-11 15:19:27

Vue学习之vue-resource小结(五)的相关文章

vue学习指南:第十五篇(详细) - Vuex

Vuex 一.基础 1. Vuex 相当于 vue的数据仓库 2. Vuex 是 vue 的状态管理工具 3. Vuex中的 state 只能通过mutations 改变 4. Vuex很适合做购物车 什么是Vuex? Vuex采用集中式存储所有组件的数据状态,并且中间状态和store(后台数据)是响应的. 什么是响应? 前台的组件数据发生改变了,那后台的store数据都会发生改变,从而导致根这个组件有关联的都会改变,所以很适合做购物车. Vuex有什么好处?及使用场景? 好处:可以做状态管理

Vue学习之vue属性绑定和双向数据绑定

··· <!DOCTYPE html> vue <!-- vue中的属性绑定和双向数据绑定 属性绑定: v-bind:title="title" 或 :title="title" 双向数据绑定: v-model --> <div id="root"> <div :title="title">hi man</div> <input v-model="co

Vue学习之vue中的v-if,v-show,v-for

<!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" con

记Vue学习经历-------Vue未定义及无反应

今天开始接触Vue,并且随手敲代码查看效果 刚兴致勃勃的上手,就碰见了个很纠结的问题,Vue貌似并没有加载成功 下面是代码 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 </head> 7 <script src="https://cdn.

vue学习(八) vue中样式 class 定义引用

//style<style> .red{ color:red; } .thin{//字体粗细 font-weight:200 } .italic{//字体倾斜 font-style:italic } .active{//字符间距 letter-spacing: 0.5em }</style>//html <div id="app"> //传统方式 <h1 class="red thin" >红红火火</>

Vue 学习随笔五 - 简单项目设计

学一门技术的最好方法是用这个技术去做一件事情,现在规划一下我们这个DEMO的简单需求. 概述:做一个后台系统,实现简单的实体CRUD,以及跟前台的交互功能. UI:集成Bootstrap样式,实现简单后台的框架 后台:Springboot,使用Kotlin开发 需求:User的CRUD,User包括子类Car 就这么简单的功能,主要是用来学习VUE+Kotlin. 第一步:集成Bootstrap,毕竟不会做样式,真实项目有UI去操作,我们目前只需要简单的使用现成的框架即可. 1. 安装Boots

Vue学习之组件小结(七)

一.组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用相应的组件即可. 二.组件和模块: 1.模块化:是从代码逻辑的角度进行划分的:方便代码分层开发,保证每个功能模块的只能单一: 2.组块化:是从UI界面的角度进行划分的:前端的组块化,方便UI组件的重用. 三.定义全局组件的方式: 三种方式: <!DOCTYPE html> <html lang="en"> <head

vue学习第四天

一:路由跳转 this.$router.push('/course'); this.$router.push({name: course}); this.$router.go(-1); this.$router.go(1); <router-link to="/course">课程页</router-link> <router-link :to="{name: 'course'}">课程页</router-link>

Vue学习笔记入门篇——组件的使用

本文为转载,原文:Vue学习笔记入门篇--组件的使用 组件定义 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 组件使用 注册 注册一个全局组件,你可以使用 Vue.component(tagName, options).组件在注册之后,便可以在父实例的模块中以自定义元素 的形式使用.

Vue学习笔记入门篇——组件的内容分发(slot)

本文为转载,原文:Vue学习笔记入门篇--组件的内容分发(slot) 介绍 为了让组件可以组合,我们需要一种方式来混合父组件的内容与子组件自己的模板.这个过程被称为 内容分发 (或 "transclusion" 如果你熟悉 Angular).Vue.js 实现了一个内容分发 API,使用特殊的 'slot' 元素作为原始内容的插槽. 编译作用域 在深入内容分发 API 之前,我们先明确内容在哪个作用域里编译.假定模板为: <child-component> {{ messa