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

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

代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.   <title>Document</title>
  8.   <script src="./lib/vue-2.4.0.js"></script>
  9.   <!-- 注意：vue-resource 依赖于 Vue，所以先后顺序要注意  -->
  10.   <!-- 在Vue上挂载了一些属性，比如：this.$http.post -->
  11.   <script src="./lib/vue-resource-1.3.4.js"></script>
  12. </head>
  13.  
  14. <body>
  15.   <div id="app">
  16.     <input type="button" value="get请求" @click="getInfo">
  17.     <input type="button" value="post请求" @click="postInfo">
  18.     <input type="button" value="jsonp请求" @click="jsonpInfo">
  19.   </div>
  20.  
  21.   <script>
  22.     // 创建 Vue 实例，得到 ViewModel
  23.     var vm = new Vue({
  24.       el: '#app',
  25.       data: {},
  26.       methods: {
  27.         getInfo() { // 发起get请求
  28.           //当发起get请求之后， 通过 .then 来设置成功的回调函数
  29.           this.$http.get('http://vue.studyit.io/api/getlunbo').then(function (result) {
  30.             //通过 result.body 拿到服务器返回成功的数据
  31.             //console.log(result.body)
  32.           })
  33.         },
  34.         postInfo() { // 发起 post请求,服务器接收表单数据格式的数据：application/x-wwww-form-urlencoded
  35.           //手动发起的 Post 请求，默认没有表单格式，所以，有的服务器处理不了
  36.           //第二个参数为提交给服务器的参数
  37.           //通过 post 方法的第三个参数， { emulateJSON: true } 设置提交的内容类型为普通表单数据格式
  38.           this.$http.post('http://vue.studyit.io/api/post', {}, { emulateJSON: true }).then(result => {
  39.             console.log(result.body)
  40.           })
  41.         },
  42.         jsonpInfo() { //发起JSONP 请求
  43.           this.$http.jsonp('http://vue.studyit.io/api/jsonp').then(result => {
  44.             console.log(result.body)
  45.           })
  46.         }
  47.       }
  48.     });
  49.   </script>
  50. </body>
  51. </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. Java遍历日期代码

    import java.util.ArrayList; import java.util.List; public class DateTraveller { public static List&l ...

  2. MySQL从.ibd文件中恢复数据

    首先,在MySQL命令行下执行如下命令可以查看MySQL中存放数据的位置: show global variables like "%datadir%"; 我这里的执行结果: +- ...

  3. docker 概念

    前言: docker是一个开源的应用容器引擎,让开发这可以打包他们的应用以及依赖包到一个可以移植的容器中,然后发布到任何流行的Linux机器上,也可以实现虚拟化.容器是完全使用沙箱机制,互相之间不会有 ...

  4. 【数据库开发】Redis数据库服务器启动配置

    Redis简介 redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(sor ...

  5. Redis HashMap 使用

    散列类型相当于Java中的HashMap,他的值是一个字典,保存很多key,value对,每对key,value的值个键都是字符串类型,换句话说,散列类型不能嵌套其他数据类型.一个散列类型键最多可以包 ...

  6. vector iterators incompatible

    字面翻译迭代器类型不兼容 今天同事遇到的这个问题算是一个习惯性写法的问题.描述一下代码: struct Track{}; class BaseTrack { - std::vector<Trac ...

  7. socket通信时如何判断当前连接是否断开--select函数，心跳线程，QsocketNotifier监控socket

    client与server建立socket连接之后,如果突然关闭server,此时,如果不在客户端close(socket_fd),会有不好的影响: QsocketNotifier监控socket的槽 ...

  8. java输入输出 -- Java NIO之选择器

    一.简介 前面的文章说了缓冲区,说了通道,本文就来说说 NIO 中另一个重要的实现,即选择器 Selector.在更早的文章中,我简述了几种 IO 模型.如果大家看过之前的文章,并动手写过代码的话.再 ...

  9. GCC 高版本7.4 编译链接 boost 报错 boost::thread::XXX’未定义的引用 解决方法

    背景:开发中的项目之前一直用GCC4.8,boost库1.48版本的开发环境.现在因业务需求,需要更换GCC7.4,boost库1.70. 问题:可以正常编译BOOST的链接库文件,但是链接时候报错. ...

  10. Python 安装包时选择 python版本

    安装了两个版本的python 其中一个版本为2.7 专门为python 2.7安装包使用的语句为 升级pip E:\Python27\python -m pip install --upgrade p ...