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. 使用foreach的禁忌

    List<String> list = new ArrayList<>(); Iterator<String> iterator = list.iterator() ...

  2. Spring4学习回顾之路04—引用其他Bean，集合数据注入，内部Bean

    引用其他Bean 组件应用程序的Bean经常需要相互协作以完成应用程序的功能,所以要求Bean能够相互访问,就必须在Bean配置文件中指定Bean的引用.在Bean的配置文件中可以用过<ref& ...

  3. 小a的强迫症 题解

    题面: 小a是一名强迫症患者,现在他要给一群带颜色的珠子排成一列,现在有N种颜色,其中第i种颜色的柱子有num(i)个.要求排列中第i种颜色珠子的最后一个珠子,一定要排在第i+1种颜色的最后一个珠子之 ...

  4. Good Triple CodeForces - 1169D (等差子序列)

    大意: 给定01字符串, 求有多少个区间$[l,r]$, 使得存在正整数$x,k$满足$1\le x,k\le n,l\le x<x+2k\le r,s_x=s_{x+k}=s_{x+2k}$. ...

  5. WPF的硬件加速

    wpf根据硬件 可以做出三档的渲染 dx7以下 第0档  不支持硬件加速 dx7-dx9 第1档, 不支持所有硬件加速,但支持一部分 dx9 以上 支持所有硬件加速 可以用编程的方式取代 当前设备处于 ...

  6. JS基础_逻辑运算符

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

  7. std::list保存大量数据时，类型即是无析构函数，该list析构时会占用大量CPU

    std::list保存大量数据时,类型即是无析构函数,该list析构时会占用大量CPU

  8. java ftp retrieveFile 较大文件丢失内容

    今天发现用  如下方法下载一个2.2M的zip文件但是只下载了500K没有下载完全,但是方法  返回的却是true boolean org.apache.commons.net.ftp.FTPClie ...

  9. vuejs 深度监听

    data: { obj: { a: 123 } }, 监听obj中a属性 watch: { 'obj.a': { handler(newName, oldName) { console.log('ob ...

  10. vue项目使用qrcodejs2生成二维码

    最近写项目遇到一个需求,根据后台给的地址生成二维码,在网上找了下,qrcodejs2使用还是比较多,试了下也能实现需求,就整理下使用方法,方便以后使用   1. 安装包 cnpm i qrcodejs ...