<!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.js"></script>

    <!-- 注意：vue-resource依赖于vue，所以在引用时要注意顺序 -->

    <!-- this.$http -->

    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.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>

</body>

<script>

    new Vue({

        el: '#app',

        data: {

        },

        methods: {

            getInfo() {

                //通过.then来是指成功的回调函数

                this.$http.get('https://cn.vuejs.org').then(function(result) {

                    //通过result.body拿到服务器返回成功的数据

                    //console.log(result.body);

                })

            },

            postInfo() { //发起post请求

                //手动发起的post请求，默认没有表单格式，所以有的服务器处理不了

                //通过post方法的第三个参数，设置提交内容的类型为普通表单数据格式

                this.$http.post('http://vue-studyit.io/api/post', {}, {

                    emulateJSON: true

                }).then(function(result) {

                    //console.log(result.body)

                })

            },

            jsonpInfo() { //发起jsonp 请求

                this.$http.jsonp('http://vue-studyit.io/api/jsonp').then(result => {

                    console.log(result.body)

                })

            }

        }

    })

</script>

</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. 解密Qt安装目录的结构

    http://c.biancheng.net/view/3866.html 了解 Qt 安装目录的结构虽然不是编程必须的,但是它能练就我们的内功,让我们对 Qt 的编程环境了如指掌.Windows 和 ...

  2. 牛客练习赛49 B 筱玛爱阅读 （状压DP，子集生成）

    链接:https://ac.nowcoder.com/acm/contest/946/B 来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 262875K,其他语言5257 ...

  3. 字符串与List互转

    List转字符串,用逗号隔开 List<string> list = new List<string>(); list.Add("a"); list.Add ...

  4. java实现一个简单的计数器

    package com.fengunion.sf; import org.junit.platform.commons.util.StringUtils; import java.util.HashM ...

  5. 【LuoguP3270】[JLOI2016] 成绩比较

    题目链接 题目描述 G系共有n位同学,M门必修课.这N位同学的编号为0到N-1的整数,其中B神的编号为0号.这M门必修课编号为0到M-1的整数.一位同学在必修课上可以获得的分数是1到Ui中的一个整数. ...

  6. git 的add .

    git add . :他会监控工作区的状态树,使用它会把工作时的所有变化提交到暂存区,包括文件内容修改(modified)以及新文件(new),但不包括被删除的文件. git add -u :他仅监控 ...

  7. vue面试题专题

    1,v-if和v-show的作用是什么?有什么区别? v-if:        创建---删除,没有元素.切换开销大.适合不频繁切换的情况用. 例子:制作搜索框,导航栏和搜索框重叠的两个框,点击搜索图 ...

  8. SonarQube规则之坏味道类型

    1.Abbreviation As Word In Name (默认 关闭)坏味道 主要检查验证标识符名称中的缩写(连续大写字母)长度,还允许执行骆驼案例命名allowedAbbreviationLe ...

  9. CSS3制作太极图以及用JS实现旋转太极图

     太极图可以理解为一个一半黑一半白的半圆,上面放置着两个圆形,一个黑色边框白色芯,一个白色边框黑色芯. 1.实现黑白各半的圆形. .box{ width:200px;height:200px; bor ...

  10. spring boot mapper层传参数是用main的arg0（第一个参数），arg1（第二个参数）

    spring boot mapper层传参数是用main的arg0(第一个参数),arg1(第二个参数) 大于三个参数,用map传递 public interface FrontMapper{ //= ...