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 ...
随机推荐
- 實現QQ第三方登錄
<?php // 写几个函数,分别用于获取code,token,openid,用户信息 // 跳转到QQ授权登录页面 function code(){ $response_type='code' ...
- 事件循环(EventLoop)的学习总结
前言 在学习eventloop之前,我们需要复习一下js的单线程和异步.虽说js是单线程的,但是在浏览器和Node中都做了相应的处理.如浏览器中的web workers(工作线程),Node中的chi ...
- filebeat->redis->logstash->elasticsearch->kibana
整体流程 filebeat收集openresty应用日志传输到Redis集群中 Logstash从Redis集群中拉取数据,并传输到Elasticsearch集群 使用Kibana可视化索引 使用El ...
- leetcode 75. Sort Colors （荷兰三色旗问题）
Given an array with n objects colored red, white or blue, sort them in-place so that objects of the ...
- mysql数据库基础命令（一）
用户与权限 创建用户 mysql>create user test identified by 'BaC321@#'; 修改密码 ##5.5版本及以前的命令 mysql>set passw ...
- 深入Spring Boot：那些注入不了的 Spring 占位符 ( ${} 表达式 )
Spring里的占位符 spring里的占位符通常表现的形式是: 1 2 3 <bean id="dataSource" destroy-method="close ...
- EC元素
'''判断title是否是一致,返回布尔值'''WebDriverWait(driver,10,0.1).until(EC.title_is("title_text")) '''判 ...
- 雪花算法生成ID
前言我们的数据库在设计时一般有两个ID,自增的id为主键,还有一个业务ID使用UUID生成.自增id在需要分表的情况下做为业务主键不太理想,所以我们增加了uuid作为业务ID,有了业务id仍然还存在自 ...
- 苹果预热 WWDC 2019
Erika Hairston 是一位来自旧金山的 23 岁耶鲁大学毕业生,她的首款 app Zimela 刚刚上线.这款应用主要为了宣传科技行业的多样性.Hairston 设计的 Zimela 通过建 ...
- Filter（过滤器） 和 interceptor（拦截器）的区别
Filter(过滤器) 和 interceptor(拦截器)的区别 1.拦截器是基于java反射机制的,而过滤器是基于函数回调的. 2.过滤器依赖于Servlet容器,而拦截器不依赖于Servlet容 ...