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获取GridView选择的行内容
Apr 14 Javascript
调试Node.JS的辅助工具(NodeWatcher)
Jan 04 Javascript
node.js 一个简单的页面输出实现代码
Mar 07 Javascript
JS防止用户多次提交的简单代码
Aug 01 Javascript
jquery 提示信息显示后自动消失的具体实现
Dec 18 Javascript
Javascript解析URL方法详解
Dec 05 Javascript
node.js中的fs.appendFileSync方法使用说明
Dec 17 Javascript
JS自动倒计时30秒后按钮才可用(两种场景)
Aug 31 Javascript
js实现图片轮播效果学习笔记
Jul 26 Javascript
详解vue-cli本地环境API代理设置和解决跨域
Sep 05 Javascript
Element-UI踩坑之Pagination组件的使用
Oct 29 Javascript
vue实现日历表格(element-ui)
Sep 24 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
我的论坛源代码(九)
2006/10/09 PHP
php访问查询mysql数据的三种方法
2006/10/09 PHP
IStream与TStream之间的相互转换
2008/08/01 PHP
php实现用户在线时间统计详解
2011/10/08 PHP
真正根据utf8编码的规律来进行截取字符串的函数(utf8版sub_str )
2012/10/24 PHP
详解php与ethereum客户端交互
2018/04/28 PHP
laravel 操作数据库常用函数的返回值方法
2019/10/11 PHP
JavaScript去除空格的几种方法
2006/10/03 Javascript
Extjs学习笔记之五 一个小细节renderTo和applyTo的区别
2010/01/07 Javascript
setTimeout的延时为0时多个浏览器的区别
2012/05/23 Javascript
jquery插件制作 图片走廊 gallery
2012/08/17 Javascript
ExtJS4给Combobox设置列表中的默认值示例
2014/05/02 Javascript
详解jquery中$.ajax方法提交表单
2014/11/03 Javascript
QQ登录背景闪动效果附效果演示源码下载
2015/09/22 Javascript
AngularJS初始化静态模板详解
2016/01/14 Javascript
Js获取图片原始宽高的实现代码
2016/05/17 Javascript
JS+Canvas绘制时钟效果
2020/08/20 Javascript
javascript实现非常简单的小数取整功能示例
2017/06/13 Javascript
jquery实现搜索框功能实例详解
2018/07/23 jQuery
nodejs微信开发之自动回复的实现
2019/03/17 NodeJs
vue实现导航标题栏随页面滚动渐隐渐显效果
2020/03/12 Javascript
python 计算数组中每个数字出现多少次--“Bucket”桶的思想
2017/12/19 Python
Sublime开发python程序的示例代码
2018/01/24 Python
Python 判断 有向图 是否有环的实例讲解
2018/02/01 Python
Python实现的维尼吉亚密码算法示例
2018/04/12 Python
python range实例用法分享
2020/02/06 Python
python实现从ftp服务器下载文件
2020/03/03 Python
VS2019+python3.7+opencv4.1+tensorflow1.13配置详解
2020/04/16 Python
Numpy ndarray 多维数组对象的使用
2021/02/10 Python
通过css3动画和opacity透明度实现呼吸灯效果
2019/08/09 HTML / CSS
button在IE6/7下的黑边去除方案
2012/12/24 HTML / CSS
认识深刻的检讨书
2014/02/16 职场文书
2015年毕业生个人自荐书
2015/03/24 职场文书
2015年城市管理工作总结
2015/05/23 职场文书
毕业设计答辩开场白
2015/05/29 职场文书
2016年小学党支部创先争优活动总结
2016/04/05 职场文书