Vue.js之Ajax请求
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请求的更多相关文章
- vue.js中ajax请求
<div id="app"> <table style="border-collapse: collapse"> <thead&g ...
- vue.js遍历ajax请求的数据
<div id="dv" style="text-align: center;"><div class="head input-gr ...
- leyou_04_vue.js的ajax请求方式
1.异步查询数据,自然是通过ajax查询,大家首先想起的肯定是jQuery.但jQuery与MVVM的思想不吻合,而且ajax只是jQuery的一小部分.因此不可能为了发起ajax请求而去引用这么大的 ...
- Vue.js——基于$.ajax实现数据的跨域增删查改
概述 之前我们学习了Vue.js的一些基础知识,以及如何开发一个组件,然而那些示例的数据都是local的.在实际的应用中,几乎90%的数据是来源于服务端的,前端和服务端之间的数据交互一般是通过ajax ...
- Vue.js——基于$.ajax实现数据的跨域增删查改
转自:https://www.cnblogs.com/keepfool/p/5648674.html 概述 之前我们学习了Vue.js的一些基础知识,以及如何开发一个组件,然而那些示例的数据都是loc ...
- Vue.js使用-http请求
Vue.js使用-ajax使用 1.为什么要使用ajax 前面的例子,使用的是本地模拟数据,通过ajax请求服务器数据. 2.使用jquery的ajax库示例 new Vue({ el: '#app' ...
- Atitit vue.js 把ajax数据 绑定到form表单
Atitit vue.js 把ajax数据 绑定到form表单 1.1. 使用场景:主要应用在编辑与提交场合..1 1.2. 绑定数据到form控件,可以使用jquery,不过vue.js更加简单1 ...
- Atitit 项目界面h5化静态html化计划---vue.js 把ajax获取到的数据 绑定到表格控件 v2 r33.docx
Atitit 项目界面h5化静态html化计划---vue.js 把ajax获取到的数据 绑定到表格控件 v2 r33.docx 1. 场景:应用在项目列表查询场景下1 1.1. 预计初步掌握vue ...
- vue.js的ajax和jsonp请求
首先要声明使用ajax 在 router下边的 Index.js中 import VueResource from 'vue-resource'; Vue.use(VueResource); ajax ...
随机推荐
- ctrNet库介绍
一个神秘网友写的代码库,膜拜,附上下载链接:https://github.com/guoday/ctrNet-tool 似乎是专门为点击率预估写的库??? 收藏,日后慢慢研究
- 初识MySQL <一>
创建一个 表 create table student( id int(10) not null unique auto_increment primary key, name varchar(30) ...
- Python进阶编程 反射
1.7反射 python面向对象中的反射:通过字符串的形式操作对象相关的属性.python中的一切事物都是对象(都可以使用反射) class Foo: f = '类的静态变量' def __init_ ...
- Python字符串和正则表达式中的反斜杠('\')问题
在Python普通字符串中 在Python中,我们用'\'来转义某些普通字符,使其成为特殊字符,比如 In [1]: print('abc\ndef') # '\n'具有换行的作用 abc defg ...
- vs2012编译CZMQ-2.2.0
1.下载源代码包 到地址http://download.zeromq.org/czmq-2.2.0.zip下载源代码,解压缩到czmq-2.2.0文件夹下如图所看到的 watermark/2/text ...
- 关于encodeURI() 踩的坑
情景: 列表页跳转详情页,需要把列表页的数据带到详情页直接展示,思路是在路径后面加?传参,然后再在详情页获取url的参数. 为了以防中文乱码什么的所以先试用encodeURI转码再decodeURI解 ...
- CSS3 @keyframes 实现匀速旋转魔方（搬运工）
原博文 * https://www.cnblogs.com/shihao905/p/6208324.html * html <div id="wrap"> <di ...
- Solaris下truss的使用
Solaris下truss的使用 原文转载:http://blog.csdn.net/sunlin5000/article/details/6560736 在Solaris下面,如果需要跟踪系统的调用 ...
- Linux下部署springboot项目的步骤及过程
最近在研究将springboot项目部署到Linux服务器上,由于springboot是内嵌了tomcat,所以可以直接将项目打包上传至服务器上.我是在idea上的项目,所以我就基于此说下过程. (一 ...
- Big Data（一）分治思想
按照课程安排,接下来半年,我将会去上一个为期半年的大数据课程.第一课是马士兵老师机构的周老师所讲,这里单纯记录讲课的内容. 问题1: 我有一万个元素(比如数字或单词)需要存储? 如果查找某一个元素,最 ...