vue+Springboot前后端交互问题

本文探讨了在Vue应用中遇到的与SpringBoot后端交互的问题。首先解释了Vue框架中`__ob__: Observer`数据监控器的作用。接着讨论了如何在Vue中实现先请求数据再渲染DOM,通过在`created`和`mounted`钩子函数中恰当使用`$nextTick`来确保DOM更新的正确顺序。最后提到了axios在前后端交互中的应用,包括在vue.config.js和main.js中的配置,以及SpringBoot控制器的相关设置。
摘要由CSDN通过智能技术生成
1. Vue ob: Observer

ob_: Observer这些数据是vue这个框架对数据设置的监控器,一般都是不可枚举的。
假设list里面存放的就是那些带有__ob__: Observer的可以用下面代码解决

JSON.parse(JSON.stringify(this.list)
2. vue中实现先请求数据再渲染dom

按照 请求数据—>渲染dom—>获取dom的顺序执行,把请求数据写在了created函数中,把渲染dom的操作写在mounted函数中,竟然还是先执行渲染dom的操作。
this.$nextTick()将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它,然后等待DOM更新。它跟全局方法vue.nextTick一样,不同的是回调的this自动绑定到调用它的实例上。

  • this.nextTick()和this.$nextTick()的区别

    this.nextTick(callback)是当数据发生变化,更新后执行回调;
    this.$nextTick(callback)是当DOM发生变化,更新后执行的回调;

在获取数据的操作中添加this.$nextTick()函数,在其回调函数中可以对这些数据进行DOM操作。

axios.post('/api/scene/getSceneData', {
   Diagram_id: this
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值