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. [HNOI2008]越狱 题解

    题面: 我们知道:相邻房间的犯人的宗教相同的方案数=总方案数-相邻房间的犯人的宗教不相同的方案数: 那么所有方案数是m^n; 我们假设第一个房间有m中取值方案,而对于每个房间(非第一个)都有m-1个取 ...

  2. PAT A1035 Password (20)

    AC代码 注意创造函数条件中使用引用 输出语句注意单复数 #include <cstdio> #include <cstring> #include <iostream& ...

  3. 线段树维护最后一个0的位置（Restore Permutation）Manthan, Codefest 19 (open for everyone, rated, Div. 1 + Div. 2)

    题意:https://codeforc.es/contest/1208/problem/D 给你长度为n的序列,s[i]的值为p[1]到p[i-1]中比p[i]小的数的和,让你求出p序列. 思路: 首 ...

  4. springboot2.0整合freemarker快速入门

    目录 1. 快速入门 1.1 创建工程pom.xml文件如下 1.2 编辑application.yml 1.3 创建模型类 1.4 创建模板 1.5 创建controller 1.6 测试 2. F ...

  5. python 2 和 python 3的区别

    python2和python3区别 ​ python2:源码不统一,源码(功能)重复,维护困难,除法的时候返回来的是小数点,()浮点数 ​ python3:源码统一,源码不重复,除法的时候返回来的是整 ...

  6. nginx-consul-template

    概述Consul-template 是 HashiCorp 基于 Consul 所提供的可扩展的工具,通过监听 Consul中的数据变化,动态地修改一些配置文件中地模板.常用于在 Nginx.HAPr ...

  7. golang 客户端

    package main import ( "fmt" "io/ioutil" "net/http" ) func main() { fmt ...

  8. [IOI2005]Riv河流

    题目链接:洛谷,BZOJ 前置知识:莫得 题解 直接考虑dp.首先想法是设状态 \(dp[u][i]\) 表示u的子树内建 \(i\) 个伐木场且子树内木头都运到某个伐木场的最小花费.发现这样的状态是 ...

  9. BZOJ 4835: 遗忘之树

    传送门 首先设 $f[x]$ 表示点分树上 $x$ 的子树内的方案数 发现对于 $x$ 的每个儿子 $v$ ,$x$ 似乎可以向 $v$ 子树内的每个节点连边,因为不管怎么连重心都不会变 显然是错的, ...

  10. Make It One CodeForces - 1043F (数论,最短路,好题)

    大意: 给定序列$a$, 求最小子集, 使得gcd为1. 对于数$x$, 素因子多少次幂是无关紧要的, 这样就可以用一个二进制数来表示. $x$取$gcd$后的二进制状态最多$2^7$, 可以暴力枚举 ...