How to prevent Vue from flashing in small projects

Summary

HTML: element plus v-cloak

CSS: [v-cloak]{display: none}

process

The mustache syntax will be displayed when the page is first loaded.

v-cloak is a simple and important way to improve user experience in small VueJS projects.

usage

In HTML, add v-cloak to the tag you need to prevent flashing

<div id="app">  
 <nav>blabla</nav>  
 <main v-cloak>{{text}}</main>  
</div>

Set a style for v-cloak in CSS. This style is only applied before the vue instance is compiled.

[v-cloak]{  
 display: none;  
}

principle

I haven't finished reading the source code, but I roughly understand the principle of v-cloak :

First is the CSS selector. [target] selects "all elements with the target attribute.". You can click here to review selectors.

Then [v-cloak] selects all elements with the v-cloak attribute.

After the instance is initialized, VueJS will remove the Vue-specific attributes. Before the instance is initialized, the HTML code for main written above actually looks like this:

<main id="main" class="row" v-cloak="">

Then add CSS to set all elements with v-cloak display: block .

In fact, it’s not just v-cloak. You can try using v-if. Use [v-if]{display:none} in CSS, and the effect looks the same. Like v-cloak , v-if is also removed after the instance is compiled.

Source code

Then I just read the source code, which is roughly this paragraph. Those who are interested can search and read it to understand it.

if (isRealElement) {  
 // mounting to a real element  
 // check if this is server-rendered content and if we can perform  
 // a successful hydration.  
 if (oldVnode.nodeType === 1 && oldVnode.hasAttribute(SSR_ATTR)) {  
 oldVnode.removeAttribute(SSR_ATTR);  
 hydrating = true;  
 }  
}

This is the end of this article about how to prevent Vue from flashing in small projects. For more related content about Vue flashing in small projects, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!