How to prevent Vue’s flashing screen effect in small projects

One sentence summary

HTML: element plus v-cloak

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

process

Beard syntax will be displayed when the page first loads.

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

usage

In HTML, add v-cloak to the tags you need to organize the flashing

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

Set the 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 :

The first is the CSS selector. Using [target] selects "all elements with the target attribute.". You can review selectors here.

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

After the instance initialization is completed, VueJS will remove the attributes unique to Vue. Before the instance initialization is completed, the main HTML code written above actually looks like this:

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

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

In fact, it’s not just v-cloak. You can try it with v-if. Use [v-if]{display:none} in CSS, and the effect will look 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 probably this paragraph. Those who are interested can search and read to understand.

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 concludes this article on how to prevent Vue’s flashing screen effect in small projects. For more related content on Vue’s flashing screen in small projects, please search previous articles on downcodes.com or continue to browse the following related articles. I hope you all Please support downcodes.com more in the future!