vue.js与后台数据交互的实例讲解


Posted in Javascript onAugust 08, 2018

第一步:引入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与后台数据交互的实例讲解

以上这篇vue.js与后台数据交互的实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Mootools 1.2 手风琴(Accordion)教程
Sep 15 Javascript
几个有趣的Javascript Hack
Jul 24 Javascript
Javascript倒计时代码
Aug 12 Javascript
JS匀速运动演示示例代码
Nov 26 Javascript
AngularJS实现全选反选功能
Dec 08 Javascript
JavaScript简单计算人的年龄示例
Apr 15 Javascript
微信小程序实现锚点定位楼层跳跃的实例
May 18 Javascript
Bootstrap table使用方法记录
Aug 23 Javascript
BootStrap数据表格实例代码
Sep 13 Javascript
微信小程序获取用户openid的实现
Dec 24 Javascript
3分钟读懂移动端rem使用方法(推荐)
May 06 Javascript
JavaScript写个贪吃蛇小游戏(超详细)
Mar 17 Javascript
JS实现自定义弹窗功能
Aug 08 #Javascript
vue.js提交按钮时进行简单的if判断表达式详解
Aug 08 #Javascript
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 #jQuery
JS+HTML5实现获取手机验证码倒计时按钮
Aug 08 #Javascript
JS的Ajax与后端交互数据的实例
Aug 08 #Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 #jQuery
JavaScript中arguments和this对象用法分析
Aug 08 #Javascript
You might like
php递归函数中使用return的注意事项
2014/01/17 PHP
可以用鼠标拖动的DIV实现思路及代码
2013/10/21 Javascript
jQuery中die()方法用法实例
2015/01/19 Javascript
深入理解Angular2 模板语法
2016/08/07 Javascript
jQuery命名空间与闭包用法示例
2017/01/12 Javascript
H5上传本地图片并预览功能
2017/05/08 Javascript
JavaScript框架Angular和React深度对比
2017/11/20 Javascript
javascript实现循环广告条效果
2017/12/12 Javascript
vue2.0实现前端星星评分功能组件实例代码
2018/02/12 Javascript
JS实现的JSON序列化操作简单示例
2018/07/02 Javascript
详解webpack2异步加载套路
2018/09/14 Javascript
Vuex 使用 v-model 配合 state的方法
2018/11/13 Javascript
JavaScript文本特效实例小结【3个示例】
2018/12/22 Javascript
简单了解JavaScript中的执行上下文和堆栈
2019/06/24 Javascript
vue 更改连接后台的api示例
2019/11/11 Javascript
VUEX-action可以修改state吗
2019/11/19 Javascript
vue+vant实现商品列表批量倒计时功能
2020/01/13 Javascript
vue实现前端分页完整代码
2020/06/17 Javascript
javascript实现京东登录显示隐藏密码
2020/08/02 Javascript
antd配置config-overrides.js文件的操作
2020/10/31 Javascript
使用Python绘制图表大全总结
2017/02/11 Python
python实现将一个数组逆序输出的方法
2018/06/25 Python
Python3最长回文子串算法示例
2019/03/04 Python
Python2与Python3的区别实例分析
2019/04/11 Python
Python Gluon参数和模块命名操作教程
2019/12/18 Python
python+django+selenium搭建简易自动化测试
2020/08/19 Python
python matplotlib工具栏源码探析三之添加、删除自定义工具项的案例详解
2021/02/25 Python
车间组长岗位职责
2013/12/20 职场文书
市级文明单位申报材料
2014/05/07 职场文书
广告设计专业毕业生自我鉴定
2014/09/27 职场文书
网络销售员岗位职责
2015/04/11 职场文书
2016年优秀共青团员事迹材料
2016/02/25 职场文书
python OpenCV学习笔记
2021/03/31 Python
nginx+lua单机上万并发的实现
2021/05/31 Servers
AudioContext 实现音频可视化(web技术分享)
2022/02/24 Javascript
Python实现信息管理系统
2022/06/05 Python