How to deal with v-cloak flickering when refreshing and loading in vue

This time I will show you how to deal with v-cloak flickering when refreshing and loading in vue. How to deal with v-cloak flickering during refreshing and loading in vue. What are the precautions. Here is the actual combat. Let’s take a look at the case.

When using vue to bind data, variables will flash when rendering the page. For example,

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

will see

when loading. {{value.name}}

appears on the page, and the data will be rendered after a few seconds. There is an instruction in vue to solve this problem, v-cloak

So, where should v-cloak be placed? Should this instruction be added to every label that needs to render data? After experiments, it was found that v-cloak does not need to be added to every label, as long as it is hung in el Just add

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

to the loaded tag, and add

[v-cloak] {
  display: none;
}

to the css to 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 completely 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:

Detailed explanation of the use of JS decorator functions

##vue.js element-ui implements tree structure

The above is the detailed content of How to deal with v-cloak flickering when refreshing and loading in vue. For more information, please follow other related articles on the PHP Chinese website!