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. linux DTS介绍

    一. 设备树的由来 1.1. 什么是设备树 1.1.1. Device Tree 可以描述的信息包括CPU的数量和类别,内存基地址和大小,总线和桥,外设连接,中断控制器和中断使用情况,Clock控制器 ...

  2. python3 enum模块的应用

    python枚举模块的学习 ps:小编刚开始学习没多久,部分资源来源于其他网友,如有出错,麻烦联系修改哈,互帮互助,共同进步 一.枚举与字典类型 字典类型的缺点:1.值可变 2.没有防止相同标签的功能 ...

  3. Node.js FS模块方法速查

    1. File System 所有文件操作提供同步和异步的两种方式,本笔记只记录异步的API 异步方式其最后一个参数是回调函数.回调函数的第一个参数往往是错误对象,如果没有发生参数,那么第一个参数可能 ...

  4. Gogs官方帮助文档

    环境要求 数据库(选择以下一项): MySQL:版本 >= 5.7 PostgreSQL MSSQL TiDB(实验性支持,使用 MySQL 协议连接) 或者 什么都不安装 直接使用 SQLit ...

  5. 解决Linux下SSH超时自动断开

    title: 解决Linux下SSH超时自动断开 comments: false date: 2019-08-19 19:22:55 description: Linux 下 SSH 超时自动断开?? ...

  6. 微信小程序 setData动态设置数组中的数据

    setdata传递动态数据值必须为对象(只能是key:value) 语法如下 this.setData({ filter: 1212 }) 如果setdata要传递数组呢? 首先相到的是 this.s ...

  7. 实践周java基础软件开发app之五子棋

    五子棋人机对战实践项目 总的任务和目标 完成一个人机对战的五子棋项目,基本效果如下: 第一部分 Java绘图原理 1.   基本概念 像素,坐标 第二部分 绘制棋盘 1.   基本思路 在一个JPan ...

  8. laravel 学习之第一章

    LTS : long time support. download url : http://www.golaravel.com/download/ 第一篇 目录介绍: ​ resource:包含了原 ...

  9. kubernets全套笔记

    Master/node Master核心组件: API server,Scheduler,Controller-Manager  etcd(存储组件) Node核心组件:  kubelet(核心组件) ...

  10. poj1419 Graph Coloring 最大独立集(最大团)

    最大独立集: 顶点集V中取 K个顶点,其两两间无连接. 最大团: 顶点集V中取 K个顶点,其两两间有边连接. 最大独立集=补图的最大团最大团=补图的最大独立集 #include<iostream ...