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

Source: Internet
Author: User

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!

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.