Solution to the flickering problem of vue page loading
This article mainly introduces the solution to the flashing problem of vue page loading. The article mentions the difference between v-if and v-show, and two methods to solve the problem of {{message}} crashing when the vue page is loading. For those who are interested, let’s take a look.
The difference between v-if and v-show
v-if will only work when the conditions are met It will be compiled only when the condition is met, while v-show will always compile regardless of whether the conditions are met. The display and hiding of v-show is just a simple switch of the display attribute of CSS.
In other words, when using v-if, if the value is false, then the page will not have this html tag generated. And v-show: regardless of whether its value is false or true, the html element will exist, just simply switch the display attribute of the css.
Usage scenarios
Generally speaking, v-if has a higher switching cost and v-show has a higher initial rendering cost . Therefore, v-show is better if you need to switch frequently, and v-if is better if conditions are unlikely to change at runtime.
In addition
1. The v-if directive can be applied to the template packaging element, but v-show does not support template
2. When applying v-show to a component, there will be a problem because of the priority of the instruction v-else. The solution is to replace v-else with another v-show
// 错误 <custom-component v-show="condition"></custom-component> <p v-else>这可能也是一个组件</p> // 正确做法 <custom-component v-show="condition"></custom-component> <p v-show="!condition">这可能也是一个组件</p>
Solution to {{message}} crash when vue page is loading
Method one: v- cloak
When the v-cloak directive is used with css rules such as [v-cloak]{display:none}, this directive can hide uncompiled Mustache tags until the instance is ready.
The v-cloak directive can bind a set of css styles like a css selector, and then this set of css will take effect until the instance is compiled.
eg: // <p> 不会显示,直到编译结束。 [v-cloak]{ display:none; } <p v-cloak> {{ message }} </p>
Method 2: v-text
In vue we will wrap the data in two curly brackets , and then put it into HTML, but inside vue, all double brackets will be compiled into a v-text directive of textNode.
The advantage of using v-text is always better performance, and more importantly, it can avoid FOUC (Flash of Uncompiled Content), which is the problem encountered above.
eg: <span v-text="message"></span> <!-- same as --> <span>{{message}}</span>
Supplement:
vue page loading progress bar component
I first saw the page loading progress bar on YouTube, and later it can be seen on almost all major websites, so that users will not face a completely blank space when loading the page. The page is in a daze to improve the user experience
But from a development perspective, it is really difficult to grasp the authenticity of this kind of progress bar, because we cannot count the progress before the logic code is loaded, and the logic code It is also impossible to count your own progress. In addition, it is impossible for us to monitor the loading of all resources.
In fact, users don’t care what percentage of your page is loaded, but what they really care about is how long it is until it is fully loaded, and whether the blank page has not been fully loaded or is blank after it is loaded. of. So we don't need to "simulate" a progress bar, use a fake animation effect to simulate loading before the back-end data is returned, and read the progress bar and hide it after the data is returned.
// 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>
The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
AJAX processing method for XML returned by the server
AJAX simple asynchronous communication example analysis
JavaScript is based on Ajax to dynamically display file content on the web page without refreshing
##
The above is the detailed content of Solution to the flickering problem of vue page loading. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

Steam is a world-renowned gaming platform that allows users to purchase, download and play games. However, sometimes users may encounter some problems when using Steam, such as error code 118. In this article, we will explore this problem and how to solve it. First, let’s understand what error code 118 means. Error code 118 appears when you try to log into Steam, which means your computer cannot connect to the Steam servers. This may be due to network issues, firewall settings, proxy settings, or

Solution to the problem that Win11 system cannot install Chinese language pack With the launch of Windows 11 system, many users began to upgrade their operating system to experience new functions and interfaces. However, some users found that they were unable to install the Chinese language pack after upgrading, which troubled their experience. In this article, we will discuss the reasons why Win11 system cannot install the Chinese language pack and provide some solutions to help users solve this problem. Cause Analysis First, let us analyze the inability of Win11 system to

When using Steam to download, update or install games, you often encounter various error codes. Among them, a common error code is E20. This error code usually means that the Steam client is having trouble trying to update the game. Fortunately, though, it's not that difficult to fix this problem. First, we can try the following solutions to fix error code E20. 1. Restart the Steam client: Sometimes, directly restarting the Steam client can solve this problem. In the Steam window

As smartphone technology continues to develop, mobile phones play an increasingly important role in our daily lives. As a flagship phone focusing on gaming performance, the Black Shark phone is highly favored by players. However, sometimes we also face the situation that the Black Shark phone cannot be turned on. At this time, we need to take some measures to solve this problem. Next, let us share five tips to teach you how to solve the problem of Black Shark phone not turning on: Step 1: Check the battery power. First, make sure your Black Shark phone has enough power. It may be because the phone battery is exhausted

With the continuous development of social media, Xiaohongshu has become a platform for more and more young people to share their lives and discover beautiful things. Many users are troubled by auto-save issues when posting images. So, how to solve this problem? 1. How to solve the problem of automatically saving pictures when publishing on Xiaohongshu? 1. Clear the cache First, we can try to clear the cache data of Xiaohongshu. The steps are as follows: (1) Open Xiaohongshu and click the "My" button in the lower right corner; (2) On the personal center page, find "Settings" and click it; (3) Scroll down and find the "Clear Cache" option. Click OK. After clearing the cache, re-enter Xiaohongshu and try to post pictures to see if the automatic saving problem is solved. 2. Update the Xiaohongshu version to ensure that your Xiaohongshu

Everyone knows that if the computer cannot load the driver, the device may not work properly or interact with the computer correctly. So how do we solve the problem when a prompt box pops up on the computer that the driver cannot be loaded on this device? The editor below will teach you two ways to easily solve the problem. Unable to load the driver on this device Solution 1. Search for "Kernel Isolation" in the Start menu. 2. Turn off Memory Integrity, and it will prompt "Memory Integrity has been turned off. Your device may be vulnerable." Click behind to ignore it, and it will not affect the use. 3. The problem can be solved after restarting the machine.

The Linux Chinese garbled problem is a common problem when using Chinese character sets and encodings. Garbled characters may be caused by incorrect file encoding settings, system locale not being installed or set, and terminal display configuration errors, etc. This article will introduce several common workarounds and provide specific code examples. 1. Check the file encoding setting. Use the file command to view the file encoding. Use the file command in the terminal to view the encoding of the file: file-ifilename. If there is "charset" in the output

Title: How to solve the problem that PyCharm cannot be opened. PyCharm is a powerful Python integrated development environment, but sometimes we may encounter the problem that PyCharm cannot be opened. In this article, we'll share some common workarounds and provide specific code examples. Hope this helps those who encounter this problem. Method 1: Clear the cache Sometimes PyCharm’s cache files may cause the program to fail to open normally. We can try clearing the cache to solve this problem. Tool
