1.vue-resource 实现 get, post, jsonp请求：https://github.com/pagekit/vue-resource

注意： 除了 vue-resource 实现数据 Ajax 请求之外，还可以使用 `axios` 的第三方包实现实现数据的请求

代码：

<!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，所以先后顺序要注意  -->

  <!-- 在Vue上挂载了一些属性，比如：this.$http.post -->

  <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({

      el: '#app',

      data: {},

      methods: {

        getInfo() { // 发起get请求

          //当发起get请求之后， 通过 .then 来设置成功的回调函数

          this.$http.get('http://vue.studyit.io/api/getlunbo').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://vue.studyit.io/api/jsonp').then(result => {

            console.log(result.body)

          })

        }

      }

    });

  </script>

</body>

</html>

8.vue-resource 数据请求基本实现的更多相关文章

  1. vue axios数据请求get、post方法的使用

    我们常用的有get方法以及post方法,下面简单的介绍一下这两种请求方法 vue中使用axios方法我们先安装axios这个方法 npm install --save axios 安装之后采用按需引入 ...

  2. vue中数据请求的三种方法

    注意请求可能存在跨域问题,需要去配置好 这三种建议使用axios 1.resource Vue 要实现异步加载需要使用到 vue-resource 库. Vue.js 2.0 版本推荐使用 axios ...

  3. vue axios 数据请求实现

    1.安装nginx npm install axios --save-dev cnpm install axios --save-dev 使用淘宝镜像 保存依赖文件到本地 装好了.packjson.j ...

  4. vue---发送数据请求的一些列的问题

    使用vue做数据请求,首先考虑的是封装请求方法request.js import axios from 'axios' import Qs from 'qs' // 创建一个axios实例 const ...

  5. 02 Vue之vue对象属性功能&axios数据请求实现

    1.过滤器的声明和使用 过滤器,就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中. 定义过滤器的方式有两种. 1 使用Vue.filter()进行全局定义 2 在v ...

  6. day 74 vue 2 axios数据请求 以及组件的学习

    前情提要:   vue 学习二: 一: 通过axios实现数据请求 1:json数据语法 json数据对象类似于JavaScript中的对象,但是它的键对应的值里面是没有函数方法的,值可以是普通变量, ...

  7. VUE 数据请求和响应(axios)

    1. 概述 1.1 简介 axios是一个基于Promise(本机支持ES6 Promise实现) 的HTTP库,用于浏览器和 nodejs 的 HTTP 客户端.具有以下特征: 从浏览器中创建 XM ...

  8. vue中Axios请求豆瓣API数据并展示到Swipe中

    vue中Axios请求豆瓣API数据并展示到Swipe中 1.首先是安装Axios: 安装方法cnpm install axios --save 等待npm安装完毕: 2.在main.js中引入axi ...

  9. vue数据请求显示loading图

    一般项目中,有时候会要求,你在数据请求的时候显示一张gif图片,然后数据加载完后,消失.这个,一般只需要在封装的axios中写入js事件即可.当然,我们首先需要在app.vue中,加入此图片.如下: ...

  10. vue resource 携带cookie请求 vue cookie 跨域

    vue resource 携带cookie请求 vue cookie 跨域 1.依赖VueResource 确保已安装vue-resource到项目中,找到当前项目,命令行输入: npm instal ...

随机推荐

  1. Convex Hull | Set 1

    Given a set of points in the plane. the convex hull of the set is the smallest convex polygon that c ...

  2. Selenium ? 也要学...!

    一.selenium 简介 Selenium是ThroughtWorks公司一个强大的开源Web功能测试工具系列,包括Selenium-IDE.Selenium-RC.Selenium-Webdriv ...

  3. QT OpenGLWidget的surfaceFormat

    由OpenGLWidget和QOpenGLFunctions_2_0派生了类,试图使用双帧缓冲(Double Buffer)进行渲染.下面是部分功能代码: initializeGL()中: QSurf ...

  4. 解决 Ceph v14.2.1 RGW使能压缩时遇到不生效的问

    根据常规方法部署Ceph(14.2.1 or 14.2.2)集群+rgw后,通过命令“radosgw-admin zone placement modify --rgw-zone=default -- ...

  5. 2019-11－8 Linux作业 李宗盛

    linux系统的特点:完全免费,高效,安全稳定.支持多种硬件平台.有好的用户界面.强大的网络功能.支持多任务多用户. linux一般有三个主要部分:内核.命令解释层.实用工具. 那合适系统的心脏,是运 ...

  6. 【计算机视觉】Object Proposal之BING理解

    发现: 本论文主要有两大亮点.第一个亮点是发现了在固定窗口的大小下,物体与背景的梯度模式有所不同.如图1所示.图1(a)中绿框代表背景,红框代表物体.如果把这些框都resize成固定大小,比如8X8, ...

  7. python运算符 - python基础入门(7)

    什么是运算符?听着高大上,实际小学生都能把它玩的贼溜.比如:3 + 2 – 5 * 0 = 0 一.算术运算符 简称加减乘除,直接上代码:   a = 10 b = 20 c = 30 # 其实上面三 ...

  8. MySQL 配置参数优化

    MySQL 配置参数优化 1.修改back_log参数值:由默认的50修改为500 back_log=500back_log值指出在MySQL暂时停止回答新请求之前的短时间内多少个请求可以被存在堆栈中 ...

  9. mysql只会使用到一个索引的原因

    select count(1) from table1 where column1 = 1 and column2 = 'foo' and column3 = 'bar' 其中column1,colu ...

  10. PO,VO,DAO,BO,POJO之间的区别与解释

    VO value object:值对象 通常用于业务层之间的数据传递,由new创建,由GC回收. PO persistant object:持久层对象 对应数据库中表的字段. VO和PO,都是属性加上 ...