How to deal with flickering when v-cloak is loaded in vue-JS Tutorial-php.cn

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

php中世界最好的语言

Release： 2018-06-07 10:25:24

Original

1455 people have browsed it

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>

Copy after login

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>

Copy after login

Moreover, you need to add

[v-cloak] {
  display: none;
}

Copy after login

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;
}

Copy after login

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>

Copy after login

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)

Copy after login

v-cloak can solve this problem. Add

[v-cloak] {
 display: none;
}

Copy after login

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

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

Copy after login

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"

Copy after login

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!