Problems encountered by v-cloak and their solutions

Problem

When using vue, HTML binds the Vue instance, and a message similar to {{msg}} will flash when the page is loaded. It may lead to poor user experience.

Use v-cloak

v-cloak can solve this problem.

(1) Usage

This directive remains on the element until the associated instance is compiled. When used with CSS rules such as [v-cloak] { display: none }, this directive hides uncompiled Mustache tags until the instance is ready.

Official API

We can add:

[v-cloak] {
  display: none;
}

to the css and then add v-cloak to the loading point in the html, that’s it To solve this problem:

<div id="app" v-cloak>
    {{msg}}
</div>

(2) The difference between v-cloak in Vue1.x and Vue2

In Vue1, Vue instances are allowed to be mounted on the body , but Vue2 does not allow it. If you want to instantiate the entire page, you need to use another div to accommodate the entire page content and instantiate it.

This method also needs to be used when using v-cloak.

(3)Why is the v-cloak I use invalid?

In actual projects, we often use @import to load css files

@import "style.css?1.1.11"
@import "index.css?1.1.11"

and @import is completely in the page DOM It will be loaded after loading. If we write [v-cloak] in the css file loaded by @import, the page will still flicker.

In order to avoid this situation, we can write [v-cloak] in the css introduced by link, or write an inline css style, which is solved.

The above is the detailed content of Problems encountered by v-cloak and their solutions. For more information, please follow other related articles on the PHP Chinese website!