The cause of vuejs flicker during parsing and the method of preventing flicker _javascript skill

Reason:

When using Vuejs, ANGULARJS development, you will often encounter expressions ({{Express}}) or the flicker of a module (DIV) in a browser such as chrome that can be quickly parsed. For this problem, because JavaScript is going to manipulate the DOM, it waits for the DOM to be loaded (DOM ready). For Vuejs, Angularjs these will go back to parsing HTML view Template at the end of Dom ready, so for fast browsers like Chrome you'll see flicker. This is not the case for most cases of slow-resolution browsers such as ie7,8.

Workaround:

In Vuejs, ANGULARJS provides us with V-cloak, ng-cloak to prevent flicker of the scheme, while for Bing text ({{Express}}) We can change to V-bind, ng-bind to achieve the avoidance.

Here's an example of Vuejs:

#v-cloak

Usage:

This instruction remains on the element until the associated instance finishes compiling. When used with CSS rules such as [V-cloak] {display:none}, this instruction hides the precompiled mustache tag until the instance is ready.

Example:

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

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

Principle:

The elements with V-clock are set to Display:none, hidden, and when Vue resolves to nodes with V-clock, the attribute and class are removed at the same time, thus preventing the flicker of nodes.

Instance:

Example1:
<span>{{price}}</span>
//example2: 
<span v-bind= "Price" ></span>
//example3: 

Example 2 and Example 3 achieve the same effect, while example 1 can see the string "{{price}}" before vuejs resolves {price}}. and examples 2 and 3 do not have this flicker.

The above is a small set to introduce the Vuejs in the analysis of the reasons for the flicker and prevent flashing methods, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!