1.Vue的Ajax基本用法
在vue中用Ajax需要用到vue.js和vue-resource.js;
简单的get请求：
    创建一个方法;
    方法中调用 this.$http.get()来进行ajax请求；
    then()方法做回调函数；
    用v-on 将方法绑定到事件；
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ajax测试</title>
<script src="vue.js"></script>
<script src="vue-resource.js"></script>
</head>
<body>
<div id="app">
    <input type="button" @click="get()" value="点我异步获取数据(Get)">
</div>
<script type = "text/javascript">
window.onload = function(){
var vm = new Vue({
    el:'#app',
    data:{
        msg:'Hello World!',
    },
    methods:{
        get:function(){
            //发送get请求
            this.$http.get('https://api.auto.ifeng.com/cms/api/revision/wapguide/?page=1&pageCount=10').then(function(res){
                document.write(JSON.stringify(res.body));    
            },function(){
                alert("请求失败");
            });
        }
    }
});
}
</script>
</body>
</html>
结果：可以看到请求成功了，返回的是json格式的数据；
 
 

vue使用ajax的更多相关文章

  1. vue实现ajax滚动下拉加载，同时具有loading效果

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. Vue中ajax返回的结果赋值

    这是第二次在项目中遇到此问题,ajax请求成功后在success函数中为Vue实例data里的变量赋值,却失败了 new Vue({ el:'#app', data:{ msg:'' }, creat ...

  3. 从零开始学 Web 之 Vue.js（四）Vue的Ajax请求和跨域

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  4. vue实战(一):利用vue与ajax实现增删改查

    vue实战(一):利用vue与ajax实现增删改查: <%@ page pageEncoding="UTF-8" language="java" %> ...

  5. vue的ajax

    vue的ajax常见的有两种 ,一种是 vue-resource,一种是axios vue-resource: 是vue的插件,非官方库, vue1.x 使用广泛 如何使用: 先在vue的脚本架上安装 ...

  6. jQuery和vue 设置ajax全局请求

    一个很常见的问题,如果用户登录网站session过期,需要用户返回登录页面重新登录. 如果是http请求可以在后台设置拦截器,统一拦截并跳转.但是ajax方法并不能通过后台直接跳转. 所以我们可以写一 ...

  7. vue根据ajax绑定数数。。

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. vue 发送ajax请求

    一. 简介 1.vue本身不支持发送AJAX请求,需要使用vue-resource(vue1.0版本).axios(vue2.0版本)等插件实现 2.axios是一个基于Promise的HTTP请求客 ...

  9. vue相关ajax库的使用

    相关库: vue-resource: vue插件, 多用于vue1.x axios: 第三方库, 多用于vue2.x vue-resource使用 // 引入模块 import VueResource ...

随机推荐

  1. Spring4学习回顾之路06- IOC容器中Bean的生命周期方法

    SpringIOC容器可以管理Bean的生命周期,Spring允许在Bean生命周期的特定点执行特定的任务! Spring IOC容器对Bean的生命周期进行管理的过程: -通过构造器或者工厂方法创建 ...

  2. sql server安装图解

    1.进入安装中心:可以参考硬件和软件要求.可以看到一些说明文档 2.选择全新安装模式继续安装 3.输入产品秘钥:这里使用演示秘钥进行 4.在协议中,点击同意,并点击下一步按钮,继续安装 5.进入全局规 ...

  3. 修改hosts文件 解决coursera可以登录但无法播放视频的问题

    我们经常为了学习或者了解一些领域的知识为访问国外的网站,但是在国内,很多优秀的网站都被封锁了.在GFW(墙)的几种封锁方式中,有一种就是DNS污染,GFW会对域名解析过程进行干扰,使得某些被干扰的域名 ...

  4. 异常-JDK7针对多个异常的处理方案

    package cn.itcast_02; /* * JDK7出现了一个新的异常处理方案: * try{ * * }catch(异常名1 | 异常名2 | ... 变量 ) { * ... * } * ...

  5. 盗取连接你wifi的人的qq

    #本文内容仅供个人娱乐学习 思路: 使用wireshark监听笔记本的wifi热点,拦截捕获连接你的wifi热点的人的手机qq网络数据包,从网络数据包中分析取出两个qq空间的两个coookie值,使用 ...

  6. react+antd引入 阿里图标

    import iconfont from '../../../../assets/fonts/iconfont.js' const Iconfont = Icon.createFromIconfont ...

  7. MySQL踩坑及MySQL解压版安装

    MySQL默认当前时间: MySQL5.5版本以下是不支持:datetime default now() 的,只能写成 timestamp default now() ; 而MySQL5.6以上是支持 ...

  8. 2、screen工具

    1.背景 系统管理员经常需要SSH 或者telent 远程登录到Linux 服务器,经常运行一些需要很长时间才能完成的任务,比如系统备份.ftp 传输等等.通常情况下我们都是为每一个这样的任务开一个远 ...

  9. 【2017-05-19】WebForm复合控件、用DropDownList实现时间日期选择。

    自动提交的属性: AutoPostBack="True" 1.RadioButtonList     单选集合 -属性:RepeatDirection:Vertical (垂直排布 ...

  10. [微信小程序]聊天对话(文本,图片)的功能(完整代码附效果图)

    废话不多说, 先上图: <!--pages/index/to_news/to_news.wxml--> <view class='tab'> <view class='l ...