解决html页面或vue页面初始进入时页面闪烁。出现{{}}数据的现象

已于 2022-07-08 11:43:48 修改
阅读量3.3k 收藏 19
点赞数 15
分类专栏： Vue 文章标签： html javascript vue
于 2020-07-10 11:24:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44463883/article/details/107246912
版权

在html页面引用vue.js时出现闪烁{{}}未加载数据以及默认样式，初始一进来闪动太丑了，使用v-cloak完全不起作用，找了很久，发现下面这个方法可行

在页面最外层div上加上下面这段语句：

<div id='app'  style="display: none;" :style="{display: 'block'}">

可以生效的原因是：:style只有vue渲染的时候才识别，在此之前style=“display: none;” 让页面不显示。vue渲染后，:style="{display: ‘block’}"又让页面显示出来。亲测有效。

vue项目页面一闪一闪的问题解决办法（v-if闪屏、花括号闪屏）
qq_37635012的博客
01-16 1732
今天遇到一个vue项目的问题，就是在一个弹窗里如果用了v-if与v-else造成页面一闪一闪的，如下视频所示：vue项目页面用了v-if与v-else后一闪一闪的代码如下所示：当弹窗显示时，前台调后端接口后根据后端返回值来确定isShowPreviewForm变量的值，最开始我是用的v-if与v-else就会导致页面一闪一闪的，这是因为销毁dom元素后导致的闪屏，于是换成v-show来解决了这个闪屏问题。
Vue 组件中 data 为什么必须是函数、vue生命周期钩子函数、解决非工程化项目，网速慢时初始化页面闪动问题、vue等单页面应用及其优缺点、解决跨域问题
欢迎观看我的前端知识合集~
12-06 287
Vue 组件中 data 为什么必须是函数、vue生命周期钩子函数、解决非工程化项目，网速慢时初始化页面闪动问题、vue等单页面应用及其优缺点、解决跨域问题
前端Vue篇之vue初始化页面闪动问题
星辰迷上大海的博客
03-03 1712
Vue初始化页面闪动问题通常是因为页面加载时数据还未完全渲染，导致看到类似 {{message}} 的模板标记。解决方法包括使用v-cloak指令在 CSS 中设置隐藏样式，或者在根元素上加上 style="display: none;"，再使用:style="{display: 'block'}"确保页面加载前隐藏元素。这样可避免页面闪动问题。
解决html页面闪烁,前端页面闪烁的问题解决方案
weixin_33110431的博客
06-03 5477
平时遇见使圈是的编小久据直请结未屏屏会气机页实应高用VUE遇见页面闪烁的问题，总结了三点希望对以后大家开发有帮助能调页代事求都学是功发解开宗这维视如间请前框来总在行回断元随来以4移和泉果：遇见在如Chrome这类能够快速解析的浏览器上出现表达式({{ express }} ),或者是模块(div)的闪烁。对于这个问题由于JavaScript去操作DOM，都会等待DOM加载完成(DOM ready)...
vue 本地出现闪烁index.html
m0_62018311的博客
06-02 85
vue2首次加载屏幕闪烁
weixin_51780751的博客
03-28 1663
先看我的bug动图：我想要的动图：vue项目中影响组件渲染和挂载有这几个文件：index.html、main.js、App.vue、路由配置，那么它们之间的关系是如何呢？答：1.index.html是项目入口2.main.js是入口文件（值得关注的是main.js的render函数,下面会详细的讲）3.App.vue根组件4.路由配置(作用是：将路由名字和组件映射并渲染到App.vue)执行顺序：index.html、main.js、App.vue、路由配置index.js、具体vue组件①想要项目打包体积
vue刷新页面时去闪烁提升用户体验效果的实现方法
10-17
这种闪烁现象会影响用户体验，特别是当应用需要处理大量数据或进行复杂计算时更为明显。Vue提供了多种策略来解决这个问题，以提高刷新页面时的用户体验。以下是基于给定的标题和描述实现的方法： 1. 使用`v-if`和...
vuejs在解析时出现闪烁的原因及防止闪烁的方法
10-21
总之，理解和运用`v-cloak`指令以及`v-bind`指令可以大幅改善Vue.js应用程序的初始渲染性能，减少页面闪烁问题，从而提供更加稳定和专业的用户体验。希望本文所述内容能对使用Vue.js进行开发的读者有所帮助，如有更...
Vue.js中的倒计时刷新页面问题：解决方案与实践技巧
[Vue.js中的倒计时刷新页面问题：解决方案与实践技巧](https://asia-1.console.stringee.com/upload/IMG_66DMGIOD08H0E7T4.png) # 摘要 本文系统地探讨了Vue.js框架下实现倒计时功能的多种方法及其实践技巧。文章...
解决vue语法会有延迟加载显现{{xxx}}的问题
10-15
在Vue.js开发过程中，我们可能会遇到这样一个问题：在页面加载初期，由于数据尚未获取到，Vue模板中的`{{xxx}}`双括号会被浏览器解析为纯文本，导致页面上短暂出现未编译的Mustache标签。这不仅影响用户体验，也可能...
解决html+vue方式开发时页面加载时闪过{{页面标签}}等现象
weixin_43734732的博客
11-12 720
<el-form-item :label=`选项${index+1}_描述` prop="idec"> <span v-cloak>{{item.describes}}</span> </el-form-item> <el-form-item :label=`选项${ind...
防止vue加载的时候页面会出现标签闪现
欢迎来到我的频道~
07-03 1219
先来看下问题复现： 图片描述：刷新页面，会看到 {{begin_date}}至{{end_date}} 闪现一下，然后等数据加载完之后再显示数据，虽然闪一下，但是看着不是那么的好，那么要如何才能解决呢？ 解决办法：使用vue的一个标签 v-cloak ，就是给页面添加一个标签。 eg: （1）<div class="time_ranges select_style" v-cl...
解决vue 初始化页面闪动问题
Cshaosun的博客
08-01 677
使用 vue 开发时， 在 vue 初始化之前， 由于 div 是不归 vue 管的， 所以我们写的代码在还没有解析的情况下会容易出现花屏现象， 看到类似于{{message}}的字样， 虽然一般情况下这个时间很短暂， 但是还是有必要让解决这个问题的。
3、面试题：端午的倒计时，冒号闪烁
乔的博客
05-11 514
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>端午倒计时</title> </head> <body> <p></p> </body> <script&...
vue教程2-02 vue防止花括号{{}}闪烁，v-text和v-html、v-cloak
weixin_34104341的博客
04-27 158
vue教程2-02 vue防止花括号{{}}闪烁，v-text和v-html、v-cloak 一、v-text和v-html &lt;span&gt;{{msg}}&lt;/span&gt;  --&gt;     v-text{{{msg}}}      --&gt;    v-html &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head..
解决js控制元素背景图片切换时的闪屏问题
总柴的博客
12-28 3231
解决js控制元素背景图片切换时的闪屏问题 看一个例子： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>
解决html页面闪烁,解决前端页面闪烁问题（转载）
weixin_39786706的博客
06-03 1829
修改 Class 而不是 Style我在不久前做过一个导航栏，要求其滚动到屏幕顶端后固定。很常见。开始的时候没问题，很快就可以搞定。nav {position: absolute;top: 60px;}var scroll=0;var nav=$("nav");var navST=60; //该元素距离网页顶端60px$(window).scroll(function(){if($(documen...
VUE项目初加载页面闪烁问题
Ride_The_Wind的博客
03-24 9753
一、前言 写项目的会经常使用到v-if进行判断，但是因为加载或编译原因会导致页面最初加载的时候出现闪烁问题； 二、解决办法 使用v-cloak，我的理解是：只有编译没完成时才有，用了css将它隐藏，这样编译成功后才显示，所以解决了闪烁问题；大佬给出的解答是：v-cloak指令和css规则如[v-cloak]{display:none}一起用时，这个指令可以隐藏未编译的Mustache标签直到实例准备完毕。v-cloak 指令可以像css选择器一样绑定一套css样式然后这套css会一直生效到实例编译结束。 用
vue中插值表达式闪烁问题怎么解决？
m0_51631761的博客
05-24 471
vue插值表达式闪烁问题 当页面加载或是刷新的时候，会出现这样一种现象：{{插值表达式}}先出现在页面中，虽然只有一瞬间，但是会影响到用户的体验，尤其是在网络较慢是尤其明显。造成这种现象的原因是vue要在HTML dom加载之后再去执行js 代码。 解决办法如下： 在style标签中设置样式，将绑定了v-clock指令的元素隐藏，直到js代码执行 <style> [v-clock] { display:none; } </style> <div v-clock&gt
vue页面跳转后在触发那些生命周期
最新发布
01-12
### Vue 页面跳转触发的生命周期钩子 当使用 `Vue Router` 进行页面跳转时，会涉及到一系列组件的销毁与创建过程，在这个过程中多个生命周期钩子会被调用。对于即将离开的组件而言，`beforeDestroy` 和 `destroyed` 钩子会在导航完成前被触发[^3]。 而对于新进入的目标组件来说，则依次经历如下几个阶段： - **beforeCreate**: 实例刚被初始化之后立即同步调用此钩子之前的数据观测 (data observer) 及事件配置已经生效，此时还没有挂载节点，也没有访问到 `$el` 属性。 - **created**: 完成数据观测、属性和方法初始化后立刻调用该钩子；如果要操作 DOM 或者发起网络请求获取初始数据通常在此处处理，不过需要注意的是此刻依然无法直接访问DOM元素因为视图尚未渲染出来。 - **beforeMount**: 在挂载开始之前被调用：相关的 render 函数首次被调用。这时模板编译完毕但是还未真正插入文档流内，因此可以修改虚拟DOM而不会引起闪烁现象。 - **mounted**: 当实例完成了挂载至真实DOM上并更新了对应的界面显示以后就会触发 mounted() 方法，意味着现在可以在浏览器环境中通过 this.$el 访问到了实际存在的 HTML 结构体，并且能够安全地执行依赖于原生 JavaScript 的逻辑代码片段[^2]。 另外值得注意的一点是在单页应用(SPA)环境下切换不同路径下的视图容器中的活跃组件时除了上述标准流程外还存在特有的路由守卫机制来增强控制力，比如全局前置守卫(` beforeEach`)可用于拦截所有的导航动作从而实现权限验证等功能特性。 ```javascript // 示例代码展示如何监听特定路由变化以及相应周期内的行为响应 const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, beforeEnter(to, from, next){ console.log('准备进入 foo 组件'); next(); } }, // ...其他路由定义... ] }); new Vue({ el: '#app', router, }); ```
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值