Vue不提倡使用操作DOM，所以Jquery不使用了，ajax也不使用了。所以，Vue给我们提供了一种和ajax差不多功能的指令，vue-resource

HTML

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>蜀云泉</title>

    <script type="text/javascript" src="../lib/vue-2.6.10.js"></script>

    <script type="text/javascript" src="../lib/vue-resource.min.js"></script>

</head>

<body>

    <!-- 这个div就是MVVM中的V，View -->

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

        // 这个vm就是MVVM中的VM，ViewModel

        var vm=new Vue({

         el: '#app',

        //  这个data就是MVVM中的M，Model

         data: {

             msg:''

         },

         methods: {

            getInfo(){

                 this.$http.get('http://jsonplaceholder.typicode.com/users').then(result=>{

                     //成功了的回调函数

                     console.log(result.body)

                 })

             },

            postInfo(){

                this.$http.post('http://jsonplaceholder.typicode.com/users',{},{emulateJSON:true}).then(result=>{

                         console.log(result.body);

                 })

             },

            jsonpInfo(){

                 this.$http.jsonp('http://jsonplaceholder.typicode.com/users').then(result=>{

                     //成功了的回调函数

                     console.log(result.body)

                 })

             }

         },

         filters:{

         }

        })

    </script>

</body>

</html>

需要下载vue-resource.min.js，然后引用，具体的三种方式都写在代码里了，get，post和jsonp方式

浏览器效果

防盗链接：本博客由蜀云泉发表

Vue学习笔记十二：vue-resource的基本使用的更多相关文章

  1. Vue学习笔记十三：Vue+Bootstrap+vue-resource从接口获取数据库数据

    目录 前言 SpringBoot提供后端接口 Entity类 JPA操作接口 配置文件 数据库表自动映射,添加数据 写提供数据的接口 跨域问题 前端修改 效果图 待续 前言 Vue学习笔记九的列表案例 ...

  2. python3.4学习笔记(十二) python正则表达式的使用，使用pyspider匹配输出带.html结尾的URL

    python3.4学习笔记(十二) python正则表达式的使用,使用pyspider匹配输出带.html结尾的URL实战例子:使用pyspider匹配输出带.html结尾的URL:@config(a ...

  3. Go语言学习笔记十二： 范围(Range)

    Go语言学习笔记十二: 范围(Range) rang这个关键字主要用来遍历数组,切片,通道或Map.在数组和切片中返回索引值,在Map中返回key. 这个特别像python的方式.不过写法上比较怪异使 ...

  4. vue学习笔记(十)路由

    前言 在上一篇博客vue学习笔记(九)vue-cli中的组件通信内容中,我们学习组件通信的相关内容和进行了一些组件通信的小练习,相信大家已经掌握了vue-cli中的组件通信,而本篇博客将会带你更上一层 ...

  5. vue 学习笔记（二）

    最近公司赶项目,一直也没时间看 vue,之前看下的都快忘得差不多了.哈哈哈,来一起回顾一下vue 学习笔记(一)后,继续向下看嘛. #表单输入绑定 基础用法 v-model 会忽略所有表单元素的 va ...

  6. vue学习笔记（二）——简单的介绍以及安装

    学习编程需要的是 API+不断地练习^_^ Vue官网:https://cn.vuejs.org/ 菜鸟教程:http://www.runoob.com/vue2/vue-tutorial.html ...

  7. vue学习（十二）vue全家桶 Vue-router&Vuex

    一 vue-router的安装 二 vue-router的基本使用 三 命名路由 四 动态路由的匹配和路由组件的复用 一 vue-router的安装 NPM npm install vue-route ...

  8. 从零开始的vue学习笔记（二）

    数据与方法 当一个 Vue 实例被创建时,它将 data 对象中的所有的属性加入到 Vue 的响应式系统中.data的数据和视图同步更新. 实例创建后添加一个新的属性,对这个属性的的改动将不会触发任何 ...

  9. java jvm学习笔记十二（访问控制器的栈校验机制）

    欢迎装载请说明出处:http://blog.csdn.net/yfqnihao 本节源码:http://download.csdn.net/detail/yfqnihao/4863854 这一节,我们 ...

随机推荐

  1. sentinel主从切换技术

    主从切换技术的方法是: 当主服务器宕机后,需要手动把一台从服务器切换为主服务器, 这就需要人工干预,费事费力,还会造成一段时间内服务不可用. 这不是一种推荐的方式,更多时候,我们优先考虑哨兵模式. 一 ...

  2. LightOJ - 1226 - One Unit Machine(排列组合）

    链接: https://vjudge.net/problem/LightOJ-1226 题意: OUM is a one unit machine which processes jobs. Sinc ...

  3. Mac 下Wireshark 找不到网卡

    终端上面,执行如下命令: sudo chgrp admin /dev/bpf* sudo chmod g+rw /dev/bpf*

  4. Oracle plsql存储过程中out模式参数的用法

    在plsql中,存储过程中的out模式的参数可以用来返回数据,相当于函数的返回值.下面是一个小例子. 沿用上一篇的emp表结构和数据. 存储过程如下: create or replace proced ...

  5. 01_搭建新浪云SAE

    Step1:注册新浪云计算平台用新浪微博登陆新浪云计算平台,网址:http://sae.sina.com.cn/ 登陆成功之后会跳转到安全设置页面,安全设置页面要填写的东西比较多,需要注意:安全设置里 ...

  6. SpringCloud分布式系统的演进.

    day1 https://github.com/deadzq/product-service 单体服务 https://github.com/deadzq/eurekaserver1 注册中心Eure ...

  7. Linux下的Memcache安装 和 安装Memcache的PHP扩展

    一.首先安装服务端memcached 1.下载libevent与memcache软件包. 下载memcached: wget http://memcached.org/latestwget http: ...

  8. Js验证正则表达式

    //验证是否手机 var base = Objcet();base.isPhone = function(num) { var preg = /^1[3-7,8]{1}[0-9]{9}$/; retu ...

  9. 洛谷 P2872 [USACO07DEC]道路建设Building Roads 题解

    P2872 [USACO07DEC]道路建设Building Roads 题目描述 Farmer John had just acquired several new farms! He wants ...

  10. Deepin-TIM或Deepin-QQ调整界面DPI字体大小的方法

    Deepin-TIM或Deepin-QQ调整界面DPI字体大小的方法 env WINEPREFIX="/home/landv/.deepinwine/Deepin-QQ" deep ...