Shulou(Shulou.com)05/31 Report--

This article mainly introduces the "vue v-cloak how to solve refresh or load flashing problems" related knowledge, editor through the actual case to show you the process of operation, the method of operation is simple and fast, practical, hope that this "vue v-cloak how to solve refresh or load flashing problems" article can help you solve the problem.

When using vue to bind data, variables flicker when rendering the page, such as

{{value.name}}

When you load, you will see

{{value.name}}

It appears on the page, and it takes a few seconds to render the data. 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 tag that needs to render data? after experiments, it is found that v-cloak does not need to be added to every tag, just add it to the tag mounted by el.

{{value.name}}

Also, you need to add in css

[v-cloak] {display: none;}

This prevents the page from flickering.

But sometimes it doesn't work for two possible reasons:

1. The display attribute of v-cloak is overridden by higher-level ones, so raise the level.

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

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

This style of v-cloak does not work in the css file introduced by @ import, but can be placed in the css file introduced by link or in the inline style

Add:

Let's take a look at the interpretation of v-cloak in Vue.

The function and usage of v-cloak

Usage:

This instruction remains on the element until the associated instance is compiled. When used with CSS rules such as [v-cloak] {display: none}, this directive hides uncompiled Mustache tags until the instance is ready. Official API

{{msg}}

HTML binds the Vue instance, which flashes when the page is loaded

Then the word "load is complete" will appear. For more obvious results, we can postpone the loading of the Vue instance.

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

V-cloak can solve this problem by adding to css

[v-cloak] {display: none;}

Adding v-cloak to the load point in html can solve this problem.

{{msg}}

The difference between Vue1.x and v-cloak in Vue2

In Vue1, Vue instances are allowed to be mounted on body, but Vue2 is not allowed. If you want to instantiate the entire page, you need to instantiate the entire page content with another div.

So when using v-cloak, you also need to use this method.

Why is the v-cloak I use invalid?

In real projects, we often use @ import to load css files

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

@ import is not loaded until the page DOM is fully loaded, and if we write [v-cloak] in the css file loaded by @ import, it will cause the page to still flash.

To avoid this, we can write [v-cloak] in the css introduced by link, or write an inline css style, which is solved.

This is the end of the content about "how to solve the problem of flashing when refreshing or loading v-cloak in vue". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.