Prevent vuejs from blinking during parsing, and vuejs will flash in parsing

Prevent vuejs from blinking during parsing, and vuejs will flash in parsing

--- ## Prevent vuejs from blinking during parsing ##

Cause:
When developing with vuejs and angularjs, expressions ({express}) or module (div) flashes frequently appear in browsers such as Chrome that can be quickly parsed. For this problem, JavaScript will wait for DOM loading to complete (DOM ready ). For vuejs and angularjs, the html view Template will be parsed only after DOM ready is complete. Therefore, for Chrome and other quick browsers, you will see flashes. For IE 7 and 8 browsers with a low resolution speed, this problem will not occur in most cases.

Solution:
In vuejs and angularjs, v-cloak and ng-cloak are provided for us to prevent flickering, and for bing text ({express }}) we can also change it to v-bind and ng-bind to avoid it.

The following uses vuejs as an example:

# V-cloak usage: This Command remains on the element until the end of the associated instance compilation. When used with CSS rules such as [v-cloak] {display: none}, this command can hide uncompiled Mustache labels until the instance is ready. Example:

1 [v-cloak] {2   display: none;3 }4 5 <div v-cloak>6   {{ message }}7 </div>

 

<Div> not displayed until the compilation is complete. Principle: The element with v-clock is set to display: none and hidden. When the vue resolves to a node with v-clock, the attribute and class are removed at the same time, in this way, the node will be prevented from blinking. Instance:

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

The effects of Example 2 and Example 3 are the same, while Example 1 is before vuejs parses {price, you can see the string "{price. The two examples do not flash.