<!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. nice - 改变执行程序的优先级

    总览 (SYNOPSIS) nice [OPTION]... [COMMAND [ARG]...] 描述 (DESCRIPTION) 以 调整过的 调度优先级 运行 COMMAND. 如果 没给出 C ...

  2. Python 快排

    def quick_sort(array,left,right): if left>=right: return low=left high=right key=array[low]#设置基准数 ...

  3. 错误：非法字符：“\ufeff”

        导入开源的项目的时候,你可以碰到以上的编码问题,这一般这个项目是用eclipse开发的.主要原因是: Eclipse可以自动把UTF-8+BOM文件转为普通的UTF-8文件,但Android ...

  4. bzoj2959: 长跑 LCT+并查集+边双联通

    题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=2959 题解 调了半天,终于调完了. 显然题目要求是求出目前从 \(A\) 到 \(B\) 的可 ...

  5. 阅读《Effective Java》每条tips的理解和总结（2）（持续更新）

    15. 使类和成员的可访问性最小化 一个好用的类的属性必须要隐藏起来,干净的将它与类的api分离开来,类之间只通过api相互使用,降低他们之间的耦合性.为了做到这一点,建议根据情况选择尽可能低的访问级 ...

  6. ESP8266-向物联网云平台发送数据--dweet

    方法一: //向物联网平台发送数据 //发送数据格式: https://dweet.io/dweet/for/my-thing-name?hello=world 免费平台 //my-thing-nam ...

  7. sql中count(1)和count(*)有区别吗

    count(*) 对 innodb 而言,它需要把数据从磁盘中读取出来然后累计计数:而 MyISAM 引擎把一个表的总行数存在了磁盘上,所以执行 count(*) 会直接返回这个数,如果有 where ...

  8. Spring 自动代理

    在传统的基于代理类的AOP实现中,每个代理都是通过ProxyFactoryBean织入切面代理,在实际开发中,非常多的Bean每个都配置ProxyFactoryBean开发维护量巨大.解决方案:自动创 ...

  9. React Native 之 createBottomTabNavigator,createMaterialTopTabNavigator

    icon第三方库 yarn add react-native-vector-icons react-native link react-native-vector-icons 在上次的代码中添加: A ...

  10. PHP超大文件上传与下载

    前段时间做视频上传业务,通过网页上传视频到服务器. 视频大小 小则几十M,大则 1G+,以一般的HTTP请求发送数据的方式的话,会遇到的问题:1,文件过大,超出服务端的请求大小限制:2,请求时间过长, ...