vue.js与后台数据交互的实例讲解
2018-08-08 10:00
1056 查看
第一步:引入js库:
<script src="../js/common/vue.min.js"></script> <script src="../js/common/vue-resource.js"></script>
前端代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue example</title> <link rel="stylesheet" href="../my/style.css" rel="external nofollow" ><script src="../js/common/vue.min.js"></script> <script src="../js/common/vue-resource.js"></script> </head> <body> <div id="app"> <input type="button" @click="get()" value="点击" /> </div> </body> <script> new Vue({ el : '#app', data : { }, methods:{ get:function(){ this.$http.get('/getData').then((response) => { console.log(response); alert(response.data); },function(){ alert('请求失败!'); }); } } }); </script> </html>
后端接口响应:
.... @RequestMapping("/getData") @ResponseBody public String getDatas() { return "data"; } ....
效果:
以上这篇vue.js与后台数据交互的实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- ajax请求后台接口数据与返回值处理js的实例讲解
- vue.js 2.0入门级前端和后台数据交互
- Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
- vue.js与后台数据交互
- vue.js路由参数简单实例讲解------简单易懂
- vue 纯js监听滚动条到底部的实例讲解
- Layui前后台交互数据获取java实例
- vue.js配合$.post从后台获取数据简单demo
- android webview 初学实例-页面JS与后台交互
- js前台与后台数据交互-前台调后台
- js前台与后台数据交互-后台调前台(后台调用、注册客户端脚本)
- vue.js+elementUI学习01之后台管理登录验证实现axios和springMVC交互
- vue之数据交互实例代码
- 使用vue-resource进行数据交互的实例
- JS设计模式之数据访问对象模式的实例讲解
- vue.js 过滤器、ajax数据、事件监听实例
- Vue.js 2.0 中#$on与$emit如何使用之实例讲解
- 实例讲解Vue.js中router传参
- js前台与后台数据交互-前台调后台【转】
- 以申购单为实例,讲解Jquery动态删减行,新增行添加鼠标事件,子窗口与父窗口传值,自动计算金额,及输入值的验证,前台数据批量提交到后台action