编程 Javascript

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与后台数据交互的实例讲解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

vue.js与后台数据交互的实例讲解

- Author -

祥灬子

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript得到XML某节点的子节点个数的脚本

Oct 11 Javascript

点击按钮或链接不跳转只刷新页面的脚本整理

Oct 22 Javascript

ajax提交表单实现网页无刷新注册示例

May 08 Javascript

JS+CSS实现分类动态选择及移动功能效果代码

Oct 19 Javascript

JavaScript实现复制文章自动添加版权

Aug 02 Javascript

详解jQuery中的DOM操作

Dec 23 Javascript

js实现五星评价功能

Mar 08 Javascript

JS和jQuery通过this获取html标签中的属性值(实例代码)

Sep 11 jQuery

JavaScript类数组对象转换为数组对象的方法实例分析

Jul 24 Javascript

初探Vue3.0 中的一大亮点Proxy的使用

Dec 06 Javascript

Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)

Nov 21 Javascript

不刷新网页就能链接新的js文件方法总结

Mar 01 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