第一步：引入js库：
< src="../js/common/vue.min.js"></ > < src="../js/common/vue-resource.js"></ >
前端代码：
<!DOCTYPE html>
<html>
<head>
< charset="UTF-8">
< >vue example</ >
< rel="stylesheet" href="../my/style.css" rel="external nofollow" >
< src="../js/common/vue.min.js"></ >
< src="../js/common/vue-resource.js"></ >
</head>
<body>
<div id="app">
<input type="button" @click="get()" value="点击" />
</div>
</body>
< >
new Vue({
el : '#app',
data : {
},
methods:{
get:function(){
this.$http.get('/getData').then((response) => {
console.log(response);
alert(response.data);
},function(){
alert('请求失败！');
});
}
}
});
</ >
</html>
后端接口响应：
....
@RequestMapping("/getData")
@ResponseBody
public String getDatas() {
return "data";
}
....
效果：
以上这篇vue.js与后台数据交互的实例讲解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
继续阅读与本文标签相同的文章
上一篇 :
JS实现自定义弹窗功能
-
印度成立“社交平台”，为创企连接孵化器、投资机构等资源|海外政策
2026-05-17栏目： 教程
-
新版科技发展资金管理办法发布：支持地方基础研究和科技创新
2026-05-17栏目： 教程
-
一文读懂分布式架构知识体系（内含超全核心知识大图）
2026-05-17栏目： 教程
-
阿里云葛岱斌：让天下没有难做的安全运维
2026-05-17栏目： 教程
-
云栖PPT下载 | 破解企业数据库“疑难杂症”，最佳实践专场划重点了！
2026-05-17栏目： 教程