Reasons and Prevention Methods for Flashing in vuejs Parsing

Reason:

When developing with vuejs, angularjs, it is common to encounter flickering of expressions ({{ express }}) or modules (div) on browsers that can quickly parse, such as Chrome. This is because JavaScript operates on DOM and waits for the DOM to be fully loaded (DOM ready). For vuejs, angularjs, they will parse the html view Template only after the DOM is ready, so on fast browsers like Chrome, you will see flickering. As for IE7,8Most browsers with slower parsing won't have this problem in most cases.

Solution:

In vuejs, angularjs, it provides v for us-cloak, ng-A solution to prevent flicker using cloak, and for bing text ({{ express }}), we can also change it to v-bind, ng-bind to avoid.

The following takes vuejs as an example:

#v-cloak

Usage:

This directive remains on the element until the associated instance is finished compiling. And CSS rules like [v-cloak] { display: none } used together, this directive can hide the uncompiled Mustache tags until the instance is ready.

Example:

[v-cloak] {
display: none;
} 
<div v-cloak>
{{ message }}
</div> 

<div> will not be displayed until the compilation is completed.

Principle:

with v-The element of clock is set to display:none, hidden, and then wait until vue parses the element with v-When the clock node is removed, both the attribute and the class will be removed at the same time, so as to achieve the effect of preventing node flickering.

Example:

//example1:
<span>{{price}}</span>
//example2: 
<span v-bind="price"></span>
//example3: 
<span v-cloak>{{price}}</span> 

example2and examples3The effect is the same as the example1Before vuejs parses {{price}}, users can see the string "{{price}}".2and examples3There will be no such flickering situation.

The above is the cause and prevention method of flickering when vuejs is parsed, and I hope it will be helpful to everyone. If you have any questions, please leave a message, and I will reply to everyone in time. I also want to express my sincere gratitude to everyone for their support of the Nahan tutorial website!

Statement: The content of this article is from the network, the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#w3Please report any violations by email to codebox.com (replace # with @), and provide relevant evidence. Once verified, this site will immediately delete the infringing content.