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. Thinkphp+Ajax带关键词搜索列表无刷新分页实例

    Thinkphp+Ajax带关键词搜索列表无刷新分页实例,两个查询条件,分页和搜索关键字,懂的朋友还可以添加其他分页参数. 搜索#keyword和加载内容区域#ajax_lists <input ...

  2. Python自学笔记之字符串的操作

    1.将字符串全部变为小写:lower() casefold() 范围更广 2.将字符串全部变为大写:upper() 3.判断是否大小写:isupper() islower() 4.居中:center( ...

  3. mysql+canal+kafka+elasticsearch构建数据查询平台

    1. 实验环境 CPU:4 内存:8G ip:192.168.0.187 开启iptables防火墙 关闭selinux java >=1.5 使用yum方式安装的java,提前配置好JAVA_ ...

  4. JSON函数表2

    [class] Json::Reader [public] [将字符串或者输入流转换为JSON的Value对象] bool parse( const std::string &document ...

  5. javascript——== 和===的区别

    == 等于 === 全等(值和类型) console.log(5==5);//true console.log(5=="5");//true console.log(5===5); ...

  6. Sublime Text3 插件收录

    收录常用的Sublime Text3 插件, 方便安装使用,免得每次一个个的搜, 欢迎补充 安装方法直接打开install package 搜索安装 1. Babel 支持react jsx语法 2. ...

  7. ES6新增内容总结

    ES6新增内容有:1,模块化思想.2,关于变量let和const.3,解构赋值.4,字符串的扩展.5,函数的扩展.6,箭头函数.7,继承apply的用法 以下就是详解: 1:模块化思想 非模块化有命名 ...

  8. linux 删除文件空间未释放问题

    现象:我们测试环境上,导出数据文件时,由于作业报错,重复导出,空间使用到达100%,按理说,导出的文件时在相同的路径下,文件名也是一致的,会自动替换. 那么之前导出的文件会被删除,问题就出现在删除这一 ...

  9. sqoop 安装

    Sqoop是一款开源的工具,主要用于在Hadoop(Hive)与传统的数据库(mysql.postgresql...)间进行数据的传递,可以将一个关系型数据库(例如 : MySQL ,Oracle , ...

  10. 获取iframe子页面内容高度给iframe动态设置高度

    <!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <meta nam ...