YouTipOnline Tutorial -- Learn not only technology, but also dreams!
- Home
- HTML
- JavaScript
- CSS
- Vue
- React
- Python3
- Java
- C
- C++
- C#
- AI
- Go
- SQL
- Linux
- VS Code
- Bootstrap
- Git
- Local Bookmarks
Vue3 Tutorial
Vue3 TutorialVue3 IntroductionVue3 InstallationVSCode VueVue3 BuildVue3 Create ProjectVue3 Project IntroductionVite TutorialVue3 Directory StructureVue3 Getting StartedVue3 Basic SyntaxVue3 Declarative RenderingVue3 DirectivesVue3 Template SyntaxVue3 Conditional StatementsVue3 Loop StatementsVue3 ComponentsVue3 Computed PropertiesVue3 Watch PropertiesVue3 Style BindingVue3 Event HandlingVue3 FormsVue3 Custom DirectivesVue3 RoutingVue3 MixinsVue3 Ajax(axios)Vue3 Composition APIVue3 Single File ComponentsVue3 Pinia
Reference Manual
Vue3 Built-in AttributesVue3 Built-in ComponentsVue Component InstanceVue3 Built-in DirectivesVue Instance OptionsVue3 Lifecycle HooksVue3 Tailwind CSSVue3 Global APIVue3 Options APIVue3 Quiz
Practical Case 1
Vue3 Task Management SystemEnvironment SetupCore Business DevelopmentComponent SplittingState Management and Data PersistenceRouting SystemLogic Reuse and Performance OptimizationProject Deployment
Practical Case 2
Vue3 Blog ProjectTemplate Syntax RenderingReactive DataSplitting ComponentsRouting NavigationLifecycle and Data Requestswatch and Search FunctionalityComposable — Encapsulating Reusable LogicPinia — Global State ManagementBuild and Deploy — Deploy to Vercel
Vue3 v-cloak Directive
Vue3 Built-in DirectivesThe v-cloak directive is used to hide uncompiled templates until the component instance is ready.
Basic Description
The v-cloak directive is used to solve the "uncompiled template flicker" problem when using DOM templates. When users visit a page, they may see raw {{ }} mustache tags until the Vue component mounts and renders content.
v-cloak remains on the element until the associated component instance finishes mounting. Combined with CSS rules, the original template can be hidden during this period.
- Expected Type: None (does not accept expressions)
- Function: Hides uncompiled templates until the component is ready.
Note: This directive is only needed in setups without a build step.
Basic Usage
When using v-cloak, CSS rules need to be combined:
Example
/* CSS rule: hide elements with v-cloak */
{
display:none;
}
Example
<div v-cloak>
{{ message }}
</div>
When compilation is complete, the v-cloak attribute is automatically removed from the element, and the element will be displayed.
Usage Scenarios
v-cloak is mainly used in the following scenarios:
1. Using CDN to Introduce Vue
When using CDN to introduce Vue without a build step, during the brief period between page loading and Vue script execution, the template may not yet be compiled:
Example
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<style>
{
display: none;
}
</style>
</head>
<body>
<div id="app">
<div v-cloak>
{{ message }}
</div>
</div>
<script>
const { createApp } = Vue
createApp({
data() {
return {
message: 'Hello Vue!'
}
}
}).mount('#app')
</script>
</body>
</html>