1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9.     <script src="./lib/vue.js"></script>
  10.     <!-- 注意：vue-resource依赖于vue，所以在引用时要注意顺序 -->
  11.     <!-- this.$http -->
  12.     <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
  13.  
  14. </head>
  15.  
  16. <body>
  17.     <div id="app">
  18.         <input type="button" value="get" @click="getInfo">
  19.         <input type="button" value="post" @click="postInfo">
  20.         <input type="button" value="jsonp" @click="jsonpInfo">
  21.     </div>
  22. </body>
  23. <script>
  24.     new Vue({
  25.         el: '#app',
  26.         data: {
  27.  
  28.         },
  29.         methods: {
  30.             getInfo() {
  31.                 //通过.then来是指成功的回调函数
  32.                 this.$http.get('https://cn.vuejs.org').then(function(result) {
  33.                     //通过result.body拿到服务器返回成功的数据
  34.                     //console.log(result.body);
  35.                 })
  36.             },
  37.             postInfo() { //发起post请求
  38.                 //手动发起的post请求，默认没有表单格式，所以有的服务器处理不了
  39.                 //通过post方法的第三个参数，设置提交内容的类型为普通表单数据格式
  40.                 this.$http.post('http://vue-studyit.io/api/post', {}, {
  41.                     emulateJSON: true
  42.                 }).then(function(result) {
  43.                     //console.log(result.body)
  44.                 })
  45.             },
  46.             jsonpInfo() { //发起jsonp 请求
  47.                 this.$http.jsonp('http://vue-studyit.io/api/jsonp').then(result => {
  48.                     console.log(result.body)
  49.                 })
  50.             }
  51.         }
  52.     })
  53. </script>
  54.  
  55. </html>

05.vue-resource的基本使用的更多相关文章

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

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

  2. Vue Resource root options not used?

    I specify a root options in my Vue-Resource in my main.js file, but when I do the request, it does n ...

  3. vue -resource 文件提交提示process,或者拦截处理

    this.$http.post('url',fd||data,{emulateJSON:true}).then(fn(res){},fn(res){}) process成功案例 _self.$http ...

  4. vue resource 携带cookie请求 vue cookie 跨域(六)

    1.依赖VueResource  确保已安装vue-resource到项目中,找到当前项目,命令行输入: npm install vue-resource --save 在主方法添加 过滤 Vue.h ...

  5. vue resource patch方法的传递数据 form data 为 [object Object]

    今天在测试 iblog 登录时,传送过去的数据总是 [object Object],以至于后台识别不出来. vue 使用了 vueResource 组件,登录方法为 patch. 经过探索,终于在官网 ...

  6. 05.VUE学习之表达式

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  7. 05 vue项目01-组件关系、bootstrap

    1.django后端项目 1.项目预期 配置前端静态资源            页面展示 2.django项目代码 主url from django.contrib import admin from ...

  8. 05 Vue项目搭建

    Vue-CLI 项目搭建 1.环境搭建 安装node 官网下载安装包,傻瓜式安装:https://nodejs.org/zh-cn/ 安装cnpm npm install -g cnpm --regi ...

  9. 05 . Vue前端交互,fetch,axios,以asyncawait方式调用接口使用及案例

    目标 /* 1. 说出什么是前后端交互模式 2. 说出Promise的相关概念和用法 3. 使用fetch进行接口调用 4. 使用axios进行接口调用 5. 使用asynnc/await方式调用接口 ...

  10. Vue.js——使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用

    概述 上一篇我们介绍了如何使用vue resource处理HTTP请求,结合服务端的REST API,就能够很容易地构建一个增删查改应用.这个应用始终遗留了一个问题,Web App在访问REST AP ...

随机推荐

  1. redis防止抢购商品超卖

    前言: redis不仅仅是单纯的缓存,它还有一些特殊的功能,在一些特殊场景上很好用. 本篇博文用来测试下使用redis来防止抢购商品超卖问题. 内容: 使用redis的list进行测试 思路是设置一个 ...

  2. sklearn逻辑回归库函数直接拟合数据

    from sklearn import model_selection from sklearn.linear_model import LogisticRegression from sklearn ...

  3. CentOS7编译安装MySQL8.0

    1.下载mysql8.0.16源码包和cmake源码包 cd /usr/local/srcwget https://cdn.mysql.com//Downloads/MySQL-8.0/mysql-b ...

  4. java.sql.SQLException: Unknown system variable 'query_cache_size'

    改为 <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java< ...

  5. 【洛谷P3959】宝藏

    题目大意:比较复杂,点 这里 看题. 题解:对于状态压缩 dp 来讲,阶段的确立十分重要.本题中,采用以层次为阶段进行状压 dp. 设状态 \(f[i][S]\) 表示开凿到深度 \(i\),当前已经 ...

  6. 3.docker镜像管理基础

    一.docker镜像相关 1.About Docker Image Docker镜像含有启动容器所需要的文件系统及其内容,因此,其用于创建并启动docker容器. 采用分层构建机制,最底层为bootf ...

  7. Python---进阶---文件操作---搜索文件和保存搜索结果

    ### 编写一个程序,用户输入文件名以及开始搜索的路径,搜索该文件是否存在,如果遇到文件夹,则进入该文件夹继续搜索 - input 去接受用户输入的文件名和开始搜索的路径 - os.path.isdi ...

  8. pycharm快捷键的使用、内存管理、变量、数据类型、注释相关笔记

    目录 pycharm快捷键的使用 变量 python内存管理 小整数池 引用计数 垃圾回收机制 循环引用 变量的三种打印形式 数字类型 字符串 注释 pycharm快捷键的使用 ctrl+c复制,默认 ...

  9. 大数据学习笔记之初识Hadoop

    1.Hadoop概述 1.1 Hadoop名字的由来 Hadoop项目作者的孩子给一个棕黄色的大象样子的填充玩具的命名 Hadoop的官网:http://hadoop.apache.org . 1.2 ...

  10. 【leetcode】1095. Find in Mountain Array

    题目如下: (This problem is an interactive problem.) You may recall that an array A is a mountain array i ...