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 相关文章推荐
JavaScript判断浏览器类型的方法
Feb 10 Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
Aug 24 Javascript
超赞的jQuery图片滑块动画特效代码汇总
Jan 25 Javascript
jquery之别踩白块游戏的简单实现
Jul 25 Javascript
JS添加或修改控件的样式(Class)实现方法
Oct 15 Javascript
jQuery post数据至ashx实例详解
Nov 18 Javascript
如何让你的JS代码更好看易读
Dec 01 Javascript
JS中‘hello’与new String(‘hello’)引出的问题详解
Aug 14 Javascript
Vue项目部署在Spring Boot出现页面空白问题的解决方案
Nov 26 Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
Dec 11 Javascript
koa+jwt实现token验证与刷新功能
May 30 Javascript
三步搞定:Vue.js调用Android原生操作
Sep 07 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
让Json更懂中文(JSON_UNESCAPED_UNICODE)
2011/10/27 PHP
PHP中防止直接访问或查看或下载config.php文件的方法
2012/07/07 PHP
destoon在360浏览器下出现用户被强行注销的解决方法
2014/06/26 PHP
PHP中文字符串截断无乱码解决方法
2016/10/10 PHP
WordPress伪静态规则设置代码实例
2020/12/10 PHP
JavaScript数组去重的3种方法和代码实例
2015/07/01 Javascript
js判断手机访问或者PC的几个例子(常用于手机跳转)
2015/12/15 Javascript
基于JavaScript实现移除(删除)数组中指定元素
2016/01/04 Javascript
纯JavaScript手写图片轮播代码
2016/10/20 Javascript
js实现短信发送倒计时功能(正则验证)
2017/02/10 Javascript
详解vue中使用express+fetch获取本地json文件
2017/10/10 Javascript
浅谈js获取ModelAndView值的问题
2018/03/28 Javascript
jQuery实现表单动态添加与删除数据操作示例
2018/07/03 jQuery
vue2.0结合Element-ui实战案例
2019/03/06 Javascript
了解JavaScript中的选择器
2019/05/24 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
2020/07/19 Javascript
python模块restful使用方法实例
2013/12/10 Python
详细介绍Python中的偏函数
2015/04/27 Python
浅析python协程相关概念
2018/01/20 Python
教你用一行Python代码实现并行任务(附代码)
2018/02/02 Python
python中的decorator的作用详解
2018/07/26 Python
python 执行文件时额外参数获取的实例
2018/12/18 Python
Python基础学习之函数方法实例详解
2019/06/18 Python
解决在pycharm运行代码,调用CMD窗口的命令运行显示乱码问题
2019/08/23 Python
python 并发下载器实现方法示例
2019/11/22 Python
python实现密度聚类(模板代码+sklearn代码)
2020/04/27 Python
python获取响应某个字段值的3种实现方法
2020/04/30 Python
SEPHORA新西兰官方网站:购买化妆品和护肤品
2016/12/02 全球购物
欧洲最大的化妆品连锁公司:Douglas道格拉斯
2017/05/06 全球购物
Nike比利时官网:Nike.com (BE)
2019/02/07 全球购物
SAZAC的动物连体衣和动物睡衣:Kigurumi Shop
2020/03/14 全球购物
什么是静态路由,其特点是什么?什么是动态路由,其特点是什么?
2013/07/26 面试题
互联网创业计划书写作技巧攻略
2014/03/23 职场文书
党员民主评议自我评价
2014/10/20 职场文书
校园广播稿范文
2015/08/19 职场文书
Nginx优化服务之网页压缩的实现方法
2021/03/31 Servers