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. [UER #1] DZY Loves Graph

    题目描述 开始有 \(n\) 个点,现在对这 \(n\) 个点进行了 \(m\) 次操作,对于第 \(i\) 个操作(从 \(1\) 开始编号)有可能的三种情况: \(Add\) a b: 表示在 \ ...

  2. C语言---程序的一般形式、数据类型、常量变量、运算符、表达式、格式化输入输出

    1. 程序的一般形式 (1)注释 ① 分类:单行注释( // ): 注释一行.多行注释( /**/ ): 在这个区间内,都属于多行注释,可以换行. ② 作用:提示代码的作用,提示思路   不写注释的后 ...

  3. Python 入门之 内置模块 --logging模块

    Python 入门之 内置模块 --logging模块 1.logging -- 日志 (1)日志的作用: <1> 记录用户信息 <2> 记录个人流水 <3> 记录 ...

  4. JavaEE--JSP详解

    一.JSP JSP全名为Java Server Pages,中文名叫java服务器页面,其根本是一个简化的Servlet设计,它是由Sun Microsystems公司倡导.许多公司参与一起建立的一种 ...

  5. Git命令之：git push

    保护版权:转自,http://www.yiibai.com/git/git_push.html

  6. linux centos中安装flash player

    本机为centos 7.0 64 1.用火狐浏览器随便打开一个视频网站,找到一个视频点进去,网站会提示未安装flash player.点击进去到adobe官网.2.下载flash player插件,可 ...

  7. C#操作目录和文件

    C#操作目录和文件  创建目录和文件 1.通过Path类的Combine方法可以合并路径. string activeDir = @"C:\myDir"; string newPa ...

  8. git常用的操作命令

    设置git用户名/邮箱: $ git config user.name 'github用户名' $ git config user.email '邮箱' 从指定分支切换新分支: git checkou ...

  9. [bzoj4358]permu：莫队+线段树/回滚莫队

    这道题是几天前水过去的,现在快没印象了,水一发. 首先我们看到它让求解的是最长的值域 连续段长度,很好. 然后就想到了山海经,但但是我还没有做. 然后又想到了很久以前的一次考试的T3旅馆hotel(我 ...

  10. echarts实现心脏图的滚动三种实现方法

    1.改变dataset 2.移动scrollbar 3.修改echarts自带的dataZoom的start和end