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 ...
随机推荐
- 1.基础CRUD
在ef中,CUD都使用Datacontext.SaveChange()进行保存. SavaChange方法在保存之前会自动调用DetectChanges方法检查DataContext中做了什么更改,以 ...
- JavaSE基础:泛型
泛型 1.引入 情景模式描述,假设完成一个学生的成绩的情况: 整数: math=80,english=70 小数: math=85.6,englisth=77.8 字符串: math="66 ...
- grunt接触
grunt使用 以下内容均为已经安装好grunt,具体grunt的安装过程不述,可以参考grunt的相关资料. 1.项目初始化grunt 在项目文件夹的根目录下面,打开命令行grunt init,执行 ...
- RubyGems 库发现了后门版本的网站开发工具 bootstrap-sass
安全研究人员在官方的 RubyGems 库发现了后门版本的网站开发工具 bootstrap-sass.该工具的下载量高达 2800 万次,但这并不意味着下载的所有版本都存在后门,受影响的版本是 v3. ...
- 一、Core授权-2 之.net core 基于Jwt实现Token令牌
一.Startup类配置 ConfigureServices中 //添加jwt验证: services.AddAuthentication(JwtBearerDefaults.Authenticati ...
- 页面中获取 iframe 中的值
3.页面中获取 iframe 中的值 var obj=document.getElementsByClassName(".ke-edit-iframe").contentWindo ...
- hive模拟数据
人员表 id,姓名,爱好,住址 1,小明1,lol-book-movie,beijing:mashibing-shanghai:pudong 2,小明2,lol-book-movie,beijing: ...
- Codeforces Round #605 (Div. 3) 比赛总结
比赛情况 2h才刀了A,B,C,D.E题的套路做的少,不过ygt大佬给我讲完思路后赛后2min就AC了这题. 比赛总结 比赛时不用担心"时间短,要做多快",这样会匆匆忙忙,反而会做 ...
- ps制作雾的效果
制作雾的效果 方法一: 新建图层,将前景色设置为白色,背景色为黑色(因为雾的颜色是根据前景色决定的,也可根据这个原理制作火焰效果) 选择滤镜->渲染->云彩(也可选择其他效果的云彩) (选 ...
- Python 3标准库第三章
时间过得很快,又是一周过去了,今天感觉迷迷糊糊的,不在状态,然后,下面开始我们的讲解,还是跟大家分享一下我自己的一些想法,第一.怎么讲了,就是各位如果有怀才不遇的想法,我感觉最好不要有这种想法;第二. ...