Vue.js同React、Angular,可以说号称前端三巨头。

前段时间，有个哥们说，Vue.js现在出2.0版本了。可是我现在还是在用1.0的。

Vue.js一直都没有好好系统的学习，包括目前公司虽然是在用Vue,但是让我感觉用的有些偏了。比如Vue.js明明就有异步交互，但是我用的却还是jQuery的ajax,说到这也不是歧视jQuery,只不过觉得没有用到刀刃上。总觉得怪怪的。

今天贴一段代码，关于Vue.js的Ajax请求，希望能给朋友们带来帮助。

下面代码，测试完全没问题，只不过url需要改成你个人项目或公司项目对应的那个。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Vue 测试实例</title>

<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>

<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>

</head>

<body>

<div id="box">

    <input type="button" @click="get()" value="点我异步获取数据(Get)">

</div>

<script type = "text/javascript">

window.onload = function(){

var vm = new Vue({

    el:'#box',

    data:{

        msg:'Hello World!',

    },

    methods:{

        get:function(){

            //发送get请求

            this.$http.get('localhost:8080/test-web/database/getAllDataBaseInfo').then(function(res){

                document.write(res.body);

            },function(){

                console.log('请求失败处理');

            });

        }

    }

});

}

</script>

</body>

</html>

Vue.js之Ajax请求的更多相关文章

  1. vue.js中ajax请求

    <div id="app"> <table style="border-collapse: collapse"> <thead&g ...

  2. vue.js遍历ajax请求的数据

    <div id="dv" style="text-align: center;"><div class="head input-gr ...

  3. leyou_04_vue.js的ajax请求方式

    1.异步查询数据,自然是通过ajax查询,大家首先想起的肯定是jQuery.但jQuery与MVVM的思想不吻合,而且ajax只是jQuery的一小部分.因此不可能为了发起ajax请求而去引用这么大的 ...

  4. Vue.js——基于$.ajax实现数据的跨域增删查改

    概述 之前我们学习了Vue.js的一些基础知识,以及如何开发一个组件,然而那些示例的数据都是local的.在实际的应用中,几乎90%的数据是来源于服务端的,前端和服务端之间的数据交互一般是通过ajax ...

  5. Vue.js——基于$.ajax实现数据的跨域增删查改

    转自:https://www.cnblogs.com/keepfool/p/5648674.html 概述 之前我们学习了Vue.js的一些基础知识,以及如何开发一个组件,然而那些示例的数据都是loc ...

  6. Vue.js使用-http请求

    Vue.js使用-ajax使用 1.为什么要使用ajax 前面的例子,使用的是本地模拟数据,通过ajax请求服务器数据. 2.使用jquery的ajax库示例 new Vue({ el: '#app' ...

  7. Atitit vue.js 把ajax数据 绑定到form表单

    Atitit vue.js 把ajax数据 绑定到form表单 1.1. 使用场景:主要应用在编辑与提交场合..1 1.2. 绑定数据到form控件,可以使用jquery,不过vue.js更加简单1 ...

  8. Atitit  项目界面h5化静态html化计划---vue.js 把ajax获取到的数据 绑定到表格控件 v2 r33.docx

    Atitit  项目界面h5化静态html化计划---vue.js 把ajax获取到的数据 绑定到表格控件 v2 r33.docx 1. 场景:应用在项目列表查询场景下1 1.1. 预计初步掌握vue ...

  9. vue.js的ajax和jsonp请求

    首先要声明使用ajax 在 router下边的 Index.js中 import VueResource from 'vue-resource'; Vue.use(VueResource); ajax ...

随机推荐

  1. python 链接mysql 修改查询删除语句

    import mysql.connector.pooling config = { "host": "localhost", "port": ...

  2. sql server 角度与弧度相互转换的函数radians(x)和degrees(x)

    --RANDIANS(x)将参数x由角度转换为弧度 --DEGREES(x)将参数x由弧度转换为角度. 示例:select RADIANS(90.0), RADIANS(180.0), DEGREES ...

  3. python 抓取拉勾网 攻略

    废话不多说,直接上代码,将数据存入Mongdb import requests import pymongo import time import random mycon = pymongo.Mon ...

  4. ORA-00979: 不是 GROUP BY 表达式

    在oracle数据库中,sql语句中group by子句报错,原因是select 存在列字段,而group by中不存在.

  5. css练习小总结

    1.div水平居中:/*设置div宽度后,margin:0 auto:*/2.div显示在一行:/*float:left:*/ 3.text-align:/*后面标签里的内容水平居中:*/4.alig ...

  6. 万兴神剪手 Wondershare Filmora v9.2.11.6 简体中文版

    目录 1. 介绍 2. 简体中文9.2.1.10汉化版下载 3. 安装和激活说明 1. 介绍 万兴神剪手 Filmora 是一款界面简洁时尚.功能强大的视频编辑软件,它是深圳万兴科技公司近年来的代表作 ...

  7. 有准备的面试才能拿到更好的 Offer

    http://www.sohu.com/a/331411917_181657 前几天有读者问我,工作不顺利辞职了.本来以为凭借自己的能力和工作经验可以轻松找到更好的工作,结果投了简历,约面试的很少,面 ...

  8. HDU 6215 Brute Force Sorting 模拟双端链表

    一层一层删 链表模拟 最开始写的是一个一个删的 WA #include <bits/stdc++.h> #define PI acos(-1.0) #define mem(a,b) mem ...

  9. Mysql定时器定时删除表数据

    由于测试环境有张日志表没定时2分钟程序就狂插数据,导致不到1一个月时间,这张日志表就占用了6.7G的空间,但是日志刷新较快,有些日志就没什么作用,就写了个定时器,定期删除这张表的数据 首先先查看mys ...

  10. 第三篇：解析库之re、beautifulsoup、pyquery

    BeatifulSoup模块 一.介绍 Beautiful Soup 是一个可以从HTML或XML文件中提取数据的Python库.它能够通过你喜欢的转换器实现惯用的文档导航,查找,修改文档的方式.Be ...