vue 之dom层刷新 但不刷新浏览器

最新推荐文章于 2024-04-16 16:30:00 发布
最新推荐文章于 2024-04-16 16:30:00 发布
阅读量657 收藏 1
点赞数 1
分类专栏： vue2.0
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40442981/article/details/96862747
版权

当我点击刷新按钮时只是刷新中间的main的主体，不刷新浏览器 ，如何实现呢

其实控制<router-view></router-view>的显示与否，在全局组件注册一个方法，该方法控制router-view的显示与否，在子组件调用即可：使用了 provide/inject这对用例 

首先app.vue 就是全局组件 先在全局组件中控制router-view的显示隐藏 然后将方法放到全局变量中 传递给其他组件

然后用其他组件使用时inject接受刷新方法

 

RGirl8080
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决vue项目F5刷新mounted里的函数不执行问题
10-16
虽然DOM树会被重建，但Vue实例的生命周期钩子并不会按照上次的顺序再次调用，特别是`mounted`钩子，因为它依赖于组件实例的创建和挂载，而在刷新后，这些操作都是重新开始的。 在这种情况下，如果在`mounted`中放置...
vue数据更新但视图（DOM）不刷新解决办法
weixin_49315886的博客
04-10 9651
对此有什么疑问 或者 其它前端面临的问题都可以来欢迎评论 在下知道的定会帮你回答希望能够帮到你 (#^.^#)第二种：vue.$set(要操作的对象或数组, 对象key/索引, 修改后的值)第三种： vue.$forceUpdate()第一种：强制更新dom； vue数据更新但视图不刷新解决办法
VUE强制刷新渲染DOM
li_stone_123的博客
03-28 2706
VUE 赋值后强制刷新渲染DOM
Vue中如何处理异步更新DOM?
最新发布
有我更精彩的博客
04-16 643
在Vue中，异步更新DOM通常涉及到两种场景：一种是在组件生命周期钩子函数中异步更新DOM，另一种是在异步操作完成后更新数据并触发重新渲染。下面我将结合示例代码来详细介绍Vue中如何处理异步更新DOM的方法。
js实现强制刷新DOM对象
有幸
03-02 2174
js实现强制刷新DOM对象
Vue 强制重新渲染子组件
ai_xy的博客
12-17 545
方法一： 通过 :key 值变更触发DOM重新渲染 方法二： 通过 v-if 重新渲染DOM
vue 重新渲染dom
中老年程序员
03-19 623
如果需要强制重新渲染一个组件，可以使用key属性。当key改变时，Vue会认为这是一个不同的元素，并且会创建一个新的DOM节点替换旧的节点。 下面是一个简单的例子，在这个例子中，每当你点击按钮时，componentKey的值会增加，因此key属性会变化，Vue会认为需要被重新渲染。这种方法可以强制Vue去重新渲染一个组件，从而更新其DOM。
Javascript下拉刷新的简单实现
10-20
当用户在浏览器窗口的顶部向下滚动到一定程度时，触发一个刷新或加载新数据的事件。这个过程通常伴随着视觉反馈，例如显示一个“正在加载”的指示器。在JavaScript中，我们可以通过监听滚动事件、计算滚动距离以及...
探究Vue.js 2.0新增的虚拟DOM
11-29
当我们使用 JavaScript 来改变页面的时候，浏览器不得不做一些工作来找到需要的DOM节点，并且做出类似这样的改变： document.getElementById('myId').appendChild(myNewNode); 在如今的应用程序的DOM中大概有...
详解Vue之事件处理
10-15
Vue.js 是一款流行的前端框架，其事件处理机制是开发者日常工作中不可或缺的一部分。本文将深入探讨Vue事件处理，包括事件监听、事件处理方法、内联处理器、事件修饰符等多个方面。 首先，Vue使用`v-on`指令来监听...
基于jQuery实现滚动刷新效果
10-20
同时，随着前端框架的发展，如React、Vue和Angular，现在更常见的是使用它们提供的生命周期钩子和虚拟DOM来实现滚动刷新，这能更好地处理复杂的UI更新和性能优化。但jQuery的滚动刷新方案对于理解滚动刷新的基本原理...
JavaScript DOM 操作 局部刷新
11-17
实现使用JavaScript DOM　操作实现网页局部刷新
JavaScript--更新DOM
天行健 君子以自强不息，地势坤 君子以厚德载物。
07-14 2636
1. 更新DOM 1.1 更新节点 拿到一个DOM节点后，我们可以对它进行更新。 可以直接修改节点的文本，方法有两种： 一种是修改 innerHTML 属性，这个方式非常强大，不但可以修改一个DOM节点的文本内容，还可以直接通过HTML片段修改DOM节点内部的子树： 使用innerHTML设置文本 <body> <div id="item"></div> </body> <script> let item = documen
前端vue里面点击加载更多_vue 项目， 父组件中每次点击按钮重新加载子组件，（重新生成dom 元素）...
weixin_33324399的博客
02-05 837
vue是组件化开发的项目，很多情况下会把公共组件提取出来，来减少代码量，提高开发效率，和以后更好的可维护性。很多情况下，父组件中都会引用子组件这种情况。通过给在父组件中引用的子组件标签上添加属性，来渲染可以拥有不同数据的子组件。但是vue 的组件有个特点，如果我们这一次和上一次传过去的属性值一样的话，watch 监听的属性因为没有新的变化(这次的值和上一次的值一样watch 中调用的函数不执行)，...
「Vue系列」之Vue2实现当前组件重新加载
热门推荐
码农的博客
04-03 5万+
Vue实现当前组件重新加载 遇到问题的场景： 需要把当前组件完全还原成初始化状态，不要页面全部刷新 例如：重置按钮，只刷新当前加载组件 其他办法： 使用vue-router重新定向到当前页面，页面不刷新 使用window-reload（） 页面全部刷新，用户体验太差 解决方法： 使用v-if provide inject和this.$nextTick()【版本限制 vue2.2.0】 原理： ...
vue中的ref和$refs的使用
舒小罗
09-03 650
前言：有的时候你仍可能需要在 JavaScript 里直接访问一个子组件。为了达到这个目的，你可以通过 ref 为子组件赋予一个 ID 引用，类似于html中的id， ref ref 被用来给DOM元素或子组件注册引用信息 $refs $refs是一个对象，持有已注册过ref的所有的子组件 下面一起来看下几种用法： (1)获取本页面的DOM元素 <template> <div> <h3 ref="getDom">1234&lt
事件里面元素怎么立即刷新dom(页面)，而不是等所有代码运行完再刷新。（强制刷新DOM）
我只是个很菜的前端
07-26 2553
事件里面元素怎么立即刷新dom(页面)，而不是等所有代码运行完再刷新。（强制刷新DOM）
dom刷新局部元素_前端性能优化之dom编程
weixin_39762464的博客
12-06 866
写在前面总所周知，在前端的日常里面，采用JS操作DOM节点的情况占据了大多数。虽然现在有MVVM主流框架代替我们做了这些事情，但充分理解在DOM操作各种损耗问题，将有助于让我们更加理解和优化问题。DOM简介DOM，全称文档对象模型。是一个独立于语言的，用于操作XML和HTML文档的程序接口。在浏览器中，主要用来与HTML文档打交道，同样也用在Web程序上获取XML文档上，并使用DOM API用来访...
vue更换dom后重新挂载
jerryyang_2017的博客
05-27 1504
场景是这样的： 我们挂载的dom的节点手后台返回来的 但是返回来的dom字符串渲染后里面的方法不起作用 ，如果想起作用的话就需要用到事件代理 ，最优的方法是用组件模板来写 实在不行的话就用我下面的办法在重新new一个vue的实例 <body> <div id="app"> <input type="text" v-model="name" /> <button onclick="qh()">切换&lt...
vue怎么获取dom元素与浏览器顶部的距离
04-26
你可以使用Element.getBoundingClientRect()方法来获取DOM元素与浏览器视口的距离。具体来说，可以使用以下代码来获取DOM元素的顶部距离浏览器视口顶部的距离： ``` var element = document.getElementById('yourElementId'); var rect = element.getBoundingClientRect(); var topDistance = rect.top; ``` 其中，'yourElementId' 是要获取距离的DOM元素的ID。获取的距离值是相对于浏览器视口顶部的距离。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值