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 相关文章推荐
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
May 22 Javascript
js去除重复字符串两种实现方法
Jan 09 Javascript
js控制输入框获得和失去焦点时状态显示的方法
Jan 30 Javascript
jQuery轻松实现表格的隔行变色和点击行变色的实例代码
May 09 Javascript
JavaScript 闭包详细介绍
Sep 28 Javascript
jquery实现点击页面回到顶部
Nov 23 Javascript
canvas学习之API整理笔记(一)
Dec 29 Javascript
js遍历json对象所有key及根据动态key获取值的方法(必看)
Mar 09 Javascript
微信小程序基于picker实现级联菜单
Feb 15 Javascript
详解package.json版本号规则
Aug 01 Javascript
利用H5api实现时钟的绘制(javascript)
Sep 13 Javascript
js观察者模式的弹幕案例
Nov 23 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.ini修改php上传文件大小限制的方法详解
2013/06/17 PHP
自己写了一个php检测文件编码的函数
2014/04/21 PHP
JS类定义原型方法的两种实现的区别评论很多
2007/09/12 Javascript
Wordpress ThickBox 添加“查看原图”效果代码
2010/12/11 Javascript
基于jquery的关于动态创建DOM元素的问题
2010/12/24 Javascript
js实现翻页后保持checkbox选中状态的实现方法
2012/11/03 Javascript
javascript利用apply和arguments复用方法
2013/11/25 Javascript
js中substr,substring,indexOf,lastIndexOf的用法小结
2013/12/27 Javascript
jQuery学习笔记之jQuery.fn.init()的参数分析
2014/06/09 Javascript
js面向对象之静态方法和静态属性实例分析
2015/01/10 Javascript
JQuery实现的图文自动轮播效果插件
2015/06/19 Javascript
JSON与XML优缺点对比分析
2015/07/17 Javascript
浅谈js中的in-for循环
2016/06/28 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
2016/08/02 Javascript
Angular设置title信息解决SEO方面存在问题
2016/08/19 Javascript
jQuery实现简单的网页换肤效果示例
2016/09/18 Javascript
详解Angular的8个主要构造块
2017/06/20 Javascript
vue2.0项目中使用Ueditor富文本编辑器示例代码
2017/08/14 Javascript
vue interceptor 使用教程实例详解
2018/09/13 Javascript
利用JavaScript的Map提升性能的方法详解
2019/08/14 Javascript
Python学习笔记_数据排序方法
2014/05/22 Python
Django自定义分页与bootstrap分页结合
2021/02/22 Python
基于python的图片修复程序(实现水印去除)
2018/06/04 Python
python 自定义对象的打印方法
2019/01/12 Python
基于python实现的百度新歌榜、热歌榜下载器(附代码)
2019/08/05 Python
python 怎样将dataframe中的字符串日期转化为日期的方法
2019/09/26 Python
解决Python列表字符不区分大小写的问题
2019/12/19 Python
Python求两个字符串最长公共子序列代码实例
2020/03/05 Python
Python如何将函数值赋给变量
2020/04/28 Python
python openpyxl模块的使用详解
2021/02/25 Python
德国高尔夫商店:Golfshop.de
2019/06/22 全球购物
Linux中如何用命令创建目录
2016/12/02 面试题
网上卖盒饭创业计划书
2014/01/26 职场文书
经销商订货会主持词
2014/03/27 职场文书
预备党员学习十八届三中全会精神思想汇报
2014/09/13 职场文书
2014年平安建设工作总结
2014/11/19 职场文书