How to deal with flickering when v-cloak is loaded in vue

This time I will show you how to deal with the flickering of v-cloak when loading in vue. What are the precautions for v-cloak to flicker when loading in vue. The following is a practical case, let's take a look.

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

{{value when loading. .name}}

appears on the page, and it will take a few seconds before the data is rendered. There is an instruction in vue that can solve this problem, v-cloak

Then, v Where should -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. It only needs to be added to the label mounted by el. Yes,

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

Moreover, you need to add

[v-cloak] {
  display: none;
}

in 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, so you 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 when placed in the css file introduced by @import. It can be placed in the css file introduced by link. css file or inline style

Supplement:

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

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 itIn 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 bootstrap in the vue-cli project

Node.Js to generate a Bitcoin address ( Code attached)

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