vue.js与后台数据交互的实例讲解
更新时间：2018年08月08日 10:00:07 作者：祥灬子
今天小编就为大家分享一篇vue.js与后台数据交互的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
第一步：引入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与后台数据交互的实例讲解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
vue3的defineExpose宏函数是如何暴露方法给父组件使用
当子组件使用setup后,父组件就不能像vue2那样直接就可以访问子组件内的属性和方法,这个时候就需要在子组件内使用defineExpose宏函数来指定想要暴露出去的属性和方法,本文介绍vue3的defineExpose宏函数是如何暴露方法给父组件使用,需要的朋友可以参考下2024-05-05
cesium开发之如何在vue项目中使用cesium,使用离线地图资源
这篇文章主要介绍了cesium开发之如何在vue项目中使用cesium,使用离线地图资源问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要介绍了vue如何给组件动态绑定不同的事件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
webpack dev-server代理websocket问题
这篇文章主要介绍了webpack dev-server代理websocket问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
Vue中使用Element UI的Table组件实现嵌套表格功能
这篇文章主要介绍了Vue中使用Element UI的Table组件实现嵌套表格功能,演示如何在Vue中使用Element UI的Table组件实现嵌套表格,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-01-01
由于 Vue 会在初始化实例时进行双向数据绑定，使用Object.defineProperty()对属性遍历添加 getter/setter 方法，所以属性必须在 data 对象上存在时才能进行上述过程 ，这样才能让它是响应的，这篇文章主要介绍了Vue中$set()的使用方法场景分析,需要的朋友可以参考下2023-02-02
下面小编就为大家带来一篇使用mint-ui开发项目的一些心得(分享)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要介绍了vue 绑定对象,数组之数据无法动态渲染案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-09-09
这篇文章主要介绍了vue+vant实现商品列表批量倒计时功能,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2020-01-01
这篇文章主要介绍了Vue在数据发生变化后是如何更新页面的，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2022-10-10
最新评论