The reason why vuejs flashes during parsing and the method to prevent flickering, vuejs flashes

The reason why vuejs flashes during parsing and the method to prevent flickering, vuejs flashes

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 associated instance finishes compiling. When used with CSS rules such as [v-cloak] {display: none}, this command can hide uncompiled Mustache labels until the instance is ready.

Example:

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

<Div> not displayed until the compilation is complete.

Principle:

Set the element with v-clock to display: none and hide it. 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.

The above is the reason why vuejs flash occurs during parsing and the method to prevent flash. I hope it will help you. If you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!