Function and principle of v-cloak in vue
1. Function
The v-cloak directive is often used in labels of interpolation expressions and is used to solve the situation where the page displays source code when the network loads very slowly or when the page is rendered frequently.
Therefore, in order to improve user experience, the command v-cloak is used with CSS to hide the mounted content when loading, and then display the rendered data after loading.
2. Principle
First hide the mount content through the style. After the data rendering is completed, the v-cloak attribute will be automatically removed and the page will display the final effect.
3. Use of v-cloak
① Add the v-cloak instruction to the label where the interpolation syntax is located
<h1 v-cloak>{{ name }}</h1>② Set the property of v-cloak in css to display: none
<style type="text/css">
[v-cloak] {
display: none;
}
</style>Extension: Use of v-cloak directive
Use scenarios of v-cloak
The v-cloak directive is often used in labels of interpolation expressions because it can solve the situation where the page will display the source code when the network is loading slowly or when it is rendered frequently.
Use of v-cloak
First, add the v-cloak instruction to the label where the difference syntax is located
<h3 v-cloak>{{name}}</h3>Then, set the property of v-cloak to display to none in css
<style type="text/css">
[v-cloak]{
display: none;
}
</style>Principle of v-cloak
The principle of v-cloak is to hide the content through styles first, then replace the value in memory, and then feed the replaced content to the interface. After the data is rendered, the v-cloak attribute will be automatically removed.
This is the end of this article about the role and principle of v-cloak in vue. For more related content on vue v-cloak, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!