怎样处理vue页面加载闪烁
这次给大家带来怎样处理vue页面加载闪烁,处理vue页面加载闪烁的注意事项有哪些,下面就是实战案例,一起来看一下。
v-if 和 v-show 的区别
v-if只会在满足条件时才会编译,而v-show不管是否满足条件始终会编译,v-show的显示与隐藏只是简单的切换CSS的display属性。
也就是说,在使用v-if时,若值为false,那么页面将不会有这个html标签生成。而v-show:不论其值是false还是true,html元素都会存在,只是简单的切换css的display属性。
使用场景
一般来说,v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此,如果需要频繁切换 v-show 较好,如果在运行时条件不大可能改变 v-if 较好。
另外
1.v-if 指令可以应用于template包装元素上,而v-show不支持template
2.将v-show应用在组件上时,因为指令的优先级 v-else 会出现问题,解决办法就是用另一个 v-show 替换 v-else
// 错误 <custom-component v-show="condition"></custom-component> <p v-else>这可能也是一个组件</p> // 正确做法 <custom-component v-show="condition"></custom-component> <p v-show="!condition">这可能也是一个组件</p>
解决vue页面加载时出现{{message}}闪退
方法一:v-cloak
v-cloak指令和css规则如[v-cloak]{display:none}一起用时,这个指令可以隐藏未编译的Mustache标签直到实例准备完毕。
v-cloak 指令可以像css选择器一样绑定一套css样式然后这套css会一直生效到实例编译结束。
eg: // <p> 不会显示,直到编译结束。 [v-cloak]{ display:none; } <p v-cloak> {{ message }} </p>
方法二:v-text
vue中我们会将数据包在两个大括号中,然后放到HTML里,但是在vue内部,所有的双括号会被编译成textNode的一个v-text指令。
而使用v-text的好处就是永远更好的性能,更重要的是可以避免FOUC (Flash of Uncompiled Content) ,也就是上面与遇到的问题。
eg: <span v-text="message"></span> <!-- same as --> <span>{{message}}</span>
补充:
vue 页面加载进度条组件
页面加载进度条最初我是在youtube上看到的,后面几乎在各大网站上都能见到它的身影,可以让用户在加载页面的时候不会对着完全空白的页面发呆,提升用户体验
但是从开发角度讲,这种进度条在真实性上确实很难把握,因为在逻辑代码加载完成之前,我们都不能统计到进度,而逻辑代码自身的进度也无法统计。另外,我们不可能监控到所有资源的加载情况。
事实上,用户并不是在乎你的页面究竟加载了百分之几,而真正关心的是离加载完还有多久,以及这个空白页面是没有加载完,还是加载完就是空白的。所以没我们需要去“模拟”一个进度条,在后端数据返回前利用一个假的动画效果模拟加载,在数据返回后读完进度条并且隐藏。
// progress-bar.vue <template> <transition name="fade"> <p class="progress-bar" v-if="isShow"> </p> </transition> </template> <script type="text/babel"> export default { data() { return { isShow: true, // 是否显示进度条 val: 0, // 进度 } }, props: { /** * 每10毫秒自增幅度 */ step: { type: Number, default: 5, }, /** * 初始值 */ initVal: { type: Number, default: 0, }, /** * 到一定进度停止 */ stopVal: { type: Number, default: 80, }, /** * 进度条继续到成功 */ isOk: { type: Boolean, default: false, }, }, mounted() { // 初始化后加载进度,加载到百分之多少由stopVal决定 this.val = this.initVal let step = this.step let timer = setInterval(() => { this.val = this.val + step this.$el.style.width = this.val + '%' // 父组件数据加载完前进度条最多到stopVal的这个百分值 if (this.val >= this.stopVal) { clearInterval(timer) return } }, 10) }, watch: { /** * 监听组件props变化决定是否继续加载,一般在父组件数据加载完后改变此标志位 */ isOk() { let val = this.val let step = this.step let timer = setInterval(() => { val = val + step this.$el.style.width = val + '%' // 加载到百分百完成 if (val >= 100) { // 关闭定时器 clearInterval(timer) // 加载完成关闭进度条 this.isShow = false // 加载完成的回调 this.$emit('callback', 'load success') return } }, 10) }, }, } </script> <style lang="stylus" rel="stylesheet/stylus"> .progress-bar { position fixed top 0 height 6px width 0 background-color #999 } .fade { &-enter-active, &-leave-active { transition: all .3s } &-enter, &-leave-active { opacity: 0 } } </style>
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
以上是怎样处理vue页面加载闪烁的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

是否要复制MicrosoftWord中的页面,并保持格式不变?这是一个聪明的想法,因为当您想要创建特定文档布局或格式的多个副本时,在Word中复制页面可能是一种有用的节省时间的技术。本指南将逐步引导您在Word中复制页面的过程,无论是创建模板还是复制文档中的特定页面。这些简单的说明旨在帮助您轻松地重新制作页面,省去从头开始的麻烦。为什么要在MicrosoftWord中复制页面?在Word中复制页面非常有益的原因有以下几点:当您有一个具有特定布局或格式的文档要复制时。与从头开始重新创建整个页面不同
![在Illustrator中加载插件时出错[修复]](https://img.php.cn/upload/article/000/465/014/170831522770626.jpg?x-oss-process=image/resize,m_fill,h_207,w_330)
启动AdobeIllustrator时是否会弹出加载插件时出错的消息?一些Illustrator用户在打开该应用程序时遇到了此错误。消息后面紧跟着一系列有问题的插件。该错误提示表明已安装的插件存在问题,但也可能是由于VisualC++DLL文件损坏或首选项文件受损等其他原因引起。如果遇到此错误,我们将在本文中指导您修复问题,请继续阅读以下内容。在Illustrator中加载插件时出错如果您在尝试启动AdobeIllustrator时收到“加载插件时出错”的错误消息,您可以使用以下用途:以管理员身

字幕在你的WindowsPC上不能在Stremio上运行吗?一些Stremio用户报告说,视频中没有显示字幕。许多用户报告说遇到了一条错误消息,上面写着“加载字幕时出错”。以下是与此错误一起显示的完整错误消息:加载字幕时出错加载字幕失败:这可能是您正在使用的插件或您的网络有问题。正如错误消息所说,可能是您的互联网连接导致了错误。因此,请检查您的网络连接,并确保您的互联网工作正常。除此之外,这个错误的背后可能还有其他原因,包括字幕加载项冲突、特定视频内容不支持字幕以及Stremio应用程序过时。如

升级到Win10正式版并进入Windows桌面后,发现屏幕一直不断的闪烁,此时无法执行任务操作。小编最近在升级到Win10正式版后才遇到了这个问题,后台经过反复思考和探索,终于解决了问题,现小编就与大家分享一下具体的解决方法。升级到Win10正式版后,绝大部分使用Win10系统的用户都碰到过屏幕闪烁的问题,这通常是因为运行了不兼容的软件或者显卡驱动出现了故障。那么Win10屏幕闪烁是什么原因呢?该怎么办呢?以下是Win10电脑屏幕闪烁解决办法。Win10电脑屏幕一直闪烁怎么办右键点击桌面上的“此

随着互联网的发展,越来越多的网页需要支持滚动加载,而无限滚动加载是其中的一种。它可以让页面不断加载新的内容,使用户可以更流畅地浏览网页。在这篇文章中,我们将介绍如何使用PHP实现无限滚动加载。一、什么是无限滚动加载?无限滚动加载是一种基于滚动条的网页内容加载方式。它的原理是当用户滚动至页面底部时,通过AJAX异步调取后台数据,实现不断加载新的内容。这种加载方

《处理Laravel页面无法正确显示CSS的方法,需要具体代码示例》在使用Laravel框架开发Web应用时,有时候会遇到页面无法正确显示CSS样式的问题,这可能会导致页面呈现不正常的样式,影响用户体验。本文将介绍一些处理Laravel页面无法正确显示CSS的方法,并提供具体的代码示例,帮助开发者解决这一常见问题。一、检查文件路径首先要检查CSS文件的路径是

标题:3秒跳转页面实现方法:PHP编程指南在网页开发中,页面跳转是常见的操作,一般情况下我们使用HTML中的meta标签或者JavaScript的方法进行页面跳转。不过,在某些特定的情况下,我们需要在服务器端进行页面跳转。本文将介绍如何使用PHP编程实现一个在3秒内自动跳转到指定页面的功能,同时会给出具体的代码示例。PHP实现页面跳转的基本原理PHP是一种在

待机是iOS17更新中的一项新功能,它提供了一种新的增强方式,可以在手机快速闲置时访问信息。通过StandBy,您可以方便地查看时间、查看即将发生的事件、浏览日历、获取您所在位置的天气更新等等。激活后,iPhone在充电时设置为横向时会直观地进入待机模式。此功能非常适合床头柜等无线充电点,或者在日常任务中离开iPhone充电时。它允许您轻扫待机中显示的各种小部件,以访问来自各种应用程序的不同信息集。但是,您可能希望根据您的偏好和您经常需要的信息修改这些小部件,甚至删除一些小部件。因此,让我们深入
