Detailed explanation of the use of v-cloak in Vue

This time I will bring you a detailed explanation of the use of v-cloak in Vue. What are the precautions for using v-cloak in Vue. Here are practical cases, let’s take a look.

The role and usage of v-cloak

Usage:

This directive remains on the element until the associated instance ends compilation. When used with css rules such as [v-cloak] { display: none }, this directive can hide uncompiled Mustache tags until the instance is ready. Official API{{msg}}

setTimeout(() => {
  newVue({
    el:'#app',
    data: {
      msg:'hello'
    }
  })
},2000)

v-cloak can solve this problem. Add HTML to the css to bind the Vue instance. When the page is loaded, it will flash and then appear. Loading completed words, in order to make the effect more obvious, we can delay loading the Vue instance

[v-cloak] {
 display: none;
}

The difference between Vue1.x and v-cloak in Vue2Add v- to the loading point in html cloak can solve this problem

In Vue1, Vue instances are allowed to be mounted on the body, but Vue2 is not allowed. If you want to instantiate the entire page, you need to use another p to accommodate the entire page. Content, instantiate it

In this way, when using v-cloak, you also need to use this method

Why is the v-cloak I use invalid?

In actual projects, we often load css files through @import

@import"style.css"
@import"index.css"

In order to avoid this situation, we can write [v-cloak] in the css introduced by link , or write an inline css style, this will solve the problem. @import will not be loaded until the page DOM is fully loaded. If we write [v-cloak] in the css file loaded by @import, the page will still flicker.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Summary of methods to improve Node.js performance

JS implementation of drop-down menu login registration pop-up window

The above is the detailed content of Detailed explanation of the use of v-cloak in Vue. For more information, please follow other related articles on the PHP Chinese website!