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. 并不对劲的CF1239B&C&D Programming Task in the Train to Catowice City

    CF1239B The World Is Just a Programming Task 题目描述 定义一个括号序列s是优秀的,当且仅当它是以下几种情况的一种: 1.|s|=0 2.s='('+t+' ...

  2. Asp.net core Identity + identity server + angular + odata + 权限管理

    今天踩了一个坑. 网站发布后看到了一个 error Refused to execute inline script because it violates the following Content ...

  3. 使用filebeat给多个logstash传输数据

    1. filebeat.yml filebeat.inputs: - type: log enabled: true paths: - /var/log/messages - /var/log/dme ...

  4. 11-Perl 运算符

    1.Perl 运算符运算符是一种告诉编译器执行特定的数学或逻辑操作的符号,如: 3+2=5.Perl 语言内置了丰富的运算符,我们来看下常用的几种: 算术运算符,比较运算符,逻辑运算符,赋值运算符,位 ...

  5. linq to sql之Distinct

    Distict用来排除相同序列中元素的,对于基础类型,可以直接使用Distinct,如:int[] a = {1, 2, 2, 3, 3, 3, 4};var reslut = a.Distinct( ...

  6. kali入侵服务器之后清除痕迹

    Linux清除痕迹 第一种方法: 在退出会话前直接执行: #history -r 清除当前会话的命令历史记录 第二种方法: 在vim中执行自己不想让别人看到的命令随便用vim打开一个文件 :set h ...

  7. Hive SQL查询效率提升之Analyze方案的实施

    0.简介 Analyze,分析表(也称为计算统计信息)是一种内置的Hive操作,可以执行该操作来收集表上的元数据信息.这可以极大的改善表上的查询时间,因为它收集构成表中数据的行计数,文件计数和文件大小 ...

  8. 输入列号得到excel对应的字母列

    zexcel_cell_column 类型是INT4 FUNCTION ZGET_EXCEL_COL. *"----------------------------------------- ...

  9. js小功能1：全选全不选

    <form> 请选择你爱好:<br> <input type="checkbox" name="hobby" id="h ...

  10. ubuntu - 14.04，安装Git（源代码管理工具）

    在shell中执行:sudo apt-get install git-core