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对象和字串之间的转换实例探讨
Apr 21 Javascript
JQuery分别取得每行最后一列和最后一行的示例代码
Aug 18 Javascript
仿百度的关键词匹配搜索示例
Sep 25 Javascript
jQuery aminate方法定位到页面具体位置
Dec 26 Javascript
JavaScript中的原型prototype属性使用详解
Jun 05 Javascript
jQuery实现的网页左侧在线客服效果代码
Oct 23 Javascript
ajax跨域调用webservice的实现代码
May 09 Javascript
类似于QQ的右滑删除效果的实现方法
Oct 16 Javascript
js仿淘宝评价评分功能
Feb 28 Javascript
Vue2单一事件管理组件通信
May 09 Javascript
AngularJS 限定$scope的范围实例详解
Jun 23 Javascript
webpack搭建vue 项目的步骤
Dec 27 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
一个捕获函数输出的函数
2007/02/14 PHP
php结合正则获取字符串中数字
2015/06/19 PHP
Laravel的throttle中间件失效问题解决方法
2016/10/09 PHP
form自动提交实例讲解
2017/07/10 PHP
php插件Xajax使用方法详解
2017/08/31 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
Avengerls vs Newbee BO3 第一场2.18
2021/03/10 DOTA
filemanage功能中用到的common.js
2007/04/08 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
2013/11/26 Javascript
用Jquery.load载入页面后样式没了页面混乱的解决方法
2014/10/20 Javascript
JavaScript变量声明详解
2014/11/27 Javascript
jQuery及JS实现循环中暂停的方法
2015/02/02 Javascript
JavaScript动态修改背景颜色的方法
2015/04/16 Javascript
基于jquery实现省市区三级联动效果
2015/12/25 Javascript
JavaScript实现显示函数调用堆栈的方法
2016/04/21 Javascript
jQuery中的一些常见方法小结(推荐)
2016/06/13 Javascript
bootstrap模态框示例代码分享
2017/05/17 Javascript
bootstrap多层模态框滚动条消失的问题
2017/07/21 Javascript
浅析JS中回调函数及用法
2018/07/25 Javascript
Vue中的v-for指令不起效果的解决方法
2018/09/27 Javascript
详解webpack loader和plugin编写
2018/10/12 Javascript
webpack4+express+mongodb+vue实现增删改查的示例
2018/11/08 Javascript
js实现限定区域范围拖拉拽效果
2020/11/20 Javascript
pymongo给mongodb创建索引的简单实现方法
2015/05/06 Python
Python 函数返回值的示例代码
2019/03/11 Python
python对csv文件追加写入列的方法
2019/08/01 Python
对Django 中request.get和request.post的区别详解
2019/08/12 Python
python3实现用turtle模块画一棵随机樱花树
2019/11/21 Python
matlab中二维插值函数interp2的使用详解
2020/04/22 Python
Dillard’s百货官网:Dillards.com
2018/05/26 全球购物
北美主要的汽车零部件零售商:AutoShack.com
2019/02/23 全球购物
促销活动总结
2014/04/28 职场文书
镇政府副镇长群众路线专题民主生活会对照检查材料
2014/09/19 职场文书
会计专业求职信范文
2015/03/19 职场文书
朋友圈早安励志语录!
2019/07/08 职场文书
java实现web实时消息推送的七种方案
2022/07/23 Java/Android