编程 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获取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