How to use v-cloak in vue to solve the problem of flashing when refreshing or loading

This time I will show you how to use v-cloak in vue to solve the problem of flashing when refreshing or loading, and how to use v-cloak in vue to solve the problem of flashing when refreshing or loading. What are the precautions?, here is the actual combat Let’s take a look at the case.

<p class="#app">
  <p>{{value.name}}</p>
</p>

When loading, you will see

{{value.name}}

appear on the page. It will take a few seconds. Rendering data, there is an instruction in vue that can solve this problem, v-cloak

So, where should v-cloak be placed? Should this instruction be added to every tag that needs to render data? After experiments, it was found that v-cloak does not need to be added to every tag. It only needs to be added to the tag mounted by el.

<p class="#app" v-cloak>
  <p>{{value.name}}</p>
</p>

Moreover,

[v-cloak] {
  display: none;
}

should be added to the css like this This will prevent the page from flickering.

But sometimes it doesn’t work. There are two possible reasons:

1. The display attribute of v-cloak is overwritten by a higher level one. , so we need to increase the level

[v-cloak] {
  display: none !important;
}

2. The style is placed in the css file introduced by @import

The style of v-cloak does not work if it is placed in the css file introduced by @import. It can be placed in the css file introduced by link or in the inline style

Supplement:

Let’s take a look at v in Vue -cloak interpretation

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

<p id="app">
  {{msg}}
</p>

HTML is bound to the Vue instance. When the page is loaded, it will flash

and then the word "loading completed" will appear. In order to make the effect more obvious, we can delay loading the Vue instance

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

v-cloak can solve this problem. Add

[v-cloak] {
 display: none;
}

to the css and add v-cloak to the loading point in the html.

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

The difference between v-cloak in Vue1. You need to use another p to accommodate the entire page content and instantiate it

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

Why do I use it v-cloak not working?

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

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

And @import will not be loaded until the page DOM is fully loaded. If we will [ v-cloak] is written in the css file loaded by @import, which will cause the page to 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.

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:

How to use Vue to implement a countdown button

How to use Vue to write a two-way data binding

The above is the detailed content of How to use v-cloak in vue to solve the problem of flashing when refreshing or loading. For more information, please follow other related articles on the PHP Chinese website!