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 相关文章推荐
jQuery toggle()设置CSS样式
Nov 05 Javascript
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
Feb 24 Javascript
js unicode 编码解析关于数据转换为中文的两种方法
Apr 21 Javascript
js实现html table 行,列锁定的简单实例
Oct 13 Javascript
微信小程序 二维码canvas绘制实例详解
Jan 06 Javascript
JavaScript纯色二维码变成彩色二维码
Jul 23 Javascript
基于BootStrap实现简洁注册界面
Jul 20 Javascript
vue-cli配置文件——config篇
Jan 04 Javascript
使用Vue动态生成form表单的实例代码
Apr 26 Javascript
详解JavaScript的数据类型以及数据类型的转换
Apr 20 Javascript
一篇文章带你浅入webpack的DLL优化打包
Feb 20 Javascript
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
Feb 11 Vue.js
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计划任务之ignore_user_abort函数实现方法
2015/01/08 PHP
laravel 5 实现模板主题功能(续)
2015/03/02 PHP
摘自织梦CMS的HTTP文件下载类
2015/08/08 PHP
php PDO实现的事务回滚示例
2017/03/23 PHP
qTip 基于JQuery的Tooltip插件[兼容性好]
2010/09/01 Javascript
jquery基础教程之数组使用详解
2014/03/10 Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
2014/03/12 Javascript
js生成缩略图后上传并利用canvas重绘
2014/05/15 Javascript
JS动态增加删除UL节点LI及相关内容示例
2014/05/21 Javascript
JavaScript实现网页截图功能
2014/10/16 Javascript
node.js操作mongodb学习小结
2015/04/25 Javascript
JS实现的左侧竖向滑动菜单效果代码
2015/10/19 Javascript
基于jQuery实现二级下拉菜单效果
2016/02/01 Javascript
js实现动态显示时间效果
2017/03/06 Javascript
javascript面向对象三大特征之封装实例详解
2019/07/24 Javascript
JS中作用域以及变量范围分析
2020/07/18 Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
2020/07/22 Javascript
JavaScript快速调试的两个技巧
2020/11/04 Javascript
详解python做UI界面的方法
2019/02/27 Python
Python如何实现动态数组
2019/11/02 Python
Pandas 解决dataframe的一列进行向下顺移问题
2019/12/27 Python
使用css3做0.5px的细线的示例代码
2018/01/18 HTML / CSS
谈一谈HTML5本地存储技术
2016/03/02 HTML / CSS
美国存储和组织商店:The Container Store
2017/08/16 全球购物
世界上第一个水枕头:Mediflow
2018/12/06 全球购物
玛蒂尔达简服装:Matilda Jane Clothing
2019/02/13 全球购物
2014年学雷锋活动总结
2014/06/26 职场文书
小学生暑假安全保证书
2015/07/13 职场文书
校长新学期致辞
2015/07/30 职场文书
爱国主义教育主题班会
2015/08/13 职场文书
三八红旗手主要事迹材料
2015/11/04 职场文书
幼儿园开学家长寄语(2016秋季)
2015/12/03 职场文书
教师学习十八届五中全会精神心得体会
2016/01/05 职场文书
小学语文的各类谚语(70首)
2019/08/15 职场文书
python读取mnist数据集方法案例详解
2021/09/04 Python
如何使用注解方式实现 Redis 分布式锁
2022/07/23 Redis