Vue中v-cloak和v-pre指令使用詳解
更新時間：2026年01月12日 11:23:04 作者：北辰alk
在 Vue.js 中,v-cloak 和 v-pre 是兩個比較特殊但非常有用的指令,它們主要用于處理模板編譯和顯示相關的問題,本文就來詳細的介紹一下Vue中v-cloak和v-pre指令使用,感興趣的可以了解一下
在 Vue.js 中，v-cloak 和 v-pre 是兩個比較特殊但非常有用的指令。它們主要用于處理模板編譯和顯示相關的問題。
一、v-cloak 指令：解決閃爍問題
1. 作用與問題場景
問題：當使用 Vue 管理 DOM 時，在 Vue 實例完全加載并編譯模板之前，原始的模板語法（如 {{ }}）可能會短暫地顯示在頁面上，造成內容閃爍。
v-cloak 的作用：防止未編譯的 Vue 模板在頁面加載時閃爍顯示。
2. 基本使用
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
/* 關鍵：使用屬性選擇器隱藏所有帶有 v-cloak 的元素 */
[v-cloak] {
display: none !important;
}
/* 或者更具體的選擇器 */
#app[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<!-- 這些內容在 Vue 編譯完成前不會顯示 -->
<h1>{{ title }}</h1>
<p>{{ message }}</p>
<div v-if="showContent">
{{ dynamicContent }}
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
// 模擬網(wǎng)絡延遲，更容易看到閃爍效果
setTimeout(() => {
new Vue({
el: '#app',
data: {
title: '歡迎頁面',
message: 'Hello Vue!',
showContent: true,
dynamicContent: '這是動態(tài)內容'
},
mounted() {
// Vue 實例掛載完成后，v-cloak 屬性會自動移除
console.log('Vue 已加載，v-cloak 已移除');
}
});
}, 1000); // 延遲 1 秒加載 Vue
</script>
</body>
</html>
3. 實際應用場景
場景 1：完整的單頁應用
<!-- 大型應用中的使用 -->
<div id="app" v-cloak>
<nav>
<span>{{ appName }}</span>
<span v-if="user">{{ user.name }}</span>
</nav>
<main>
<router-view></router-view>
</main>
<footer>
{{ footerText }}
</footer>
</div>
<style>
/* 防止整個應用閃爍 */
[v-cloak] > * {
display: none;
}
</style>
場景 2：配合骨架屏（Skeleton Screen）
<!-- index.html -->
<div id="app" v-cloak>
<!-- 骨架屏 -->
<div class="skeleton" v-if="loading">
<div class="skeleton-header"></div>
<div class="skeleton-content"></div>
</div>
<!-- 實際內容 -->
<div v-else>
<header>{{ pageTitle }}</header>
<main>{{ content }}</main>
</div>
</div>
<style>
/* 基礎隱藏 */
[v-cloak] {
opacity: 0;
}
/* 骨架屏樣式 */
.skeleton {
/* 骨架屏動畫樣式 */
}
.skeleton-header {
width: 100%;
height: 60px;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: loading 1.5s infinite;
}
@keyframes loading {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
</style>
<script>
// App.vue 或 main.js
new Vue({
el: '#app',
data: {
loading: true,
pageTitle: '',
content: ''
},
async created() {
// 模擬數(shù)據(jù)加載
try {
const data = await this.fetchData();
this.pageTitle = data.title;
this.content = data.content;
} catch (error) {
console.error('加載失敗:', error);
} finally {
this.loading = false;
}
},
methods: {
fetchData() {
return new Promise(resolve => {
setTimeout(() => {
resolve({
title: '頁面標題',
content: '頁面內容...'
});
}, 1500);
});
}
}
});
</script>
場景 3：多個獨立組件
<div>
<!-- 多個獨立組件使用 v-cloak -->
<div id="header" v-cloak>
{{ siteName }} - {{ currentPage }}
</div>
<div id="sidebar" v-cloak>
<ul>
<li v-for="item in menuItems" :key="item.id">
{{ item.name }}
</li>
</ul>
</div>
<div id="content" v-cloak>
<article>
<h2>{{ articleTitle }}</h2>
<div v-html="articleContent"></div>
</article>
</div>
</div>
<style>
/* 可以針對不同組件設置不同的隱藏效果 */
#header[v-cloak] {
height: 60px;
background: #f5f5f5;
}
#sidebar[v-cloak] {
min-height: 300px;
background: #f9f9f9;
}
#content[v-cloak] {
min-height: 500px;
background: linear-gradient(180deg, #f8f8f8 0%, #f0f0f0 100%);
}
</style>
4. 進階使用技巧
配合 CSS 動畫實現(xiàn)平滑過渡
<style>
/* 使用 CSS 過渡效果 */
[v-cloak] {
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.vue-loaded [v-cloak] {
opacity: 1;
}
/* 或者使用自定義屬性 */
:root {
--vue-loading: block;
}
[v-cloak] {
display: var(--vue-loading, none);
}
</style>
<script>
// 在 Vue 加載完成后添加類名
document.addEventListener('DOMContentLoaded', function() {
new Vue({
// ... Vue 配置
}).$nextTick(() => {
document.body.classList.add('vue-loaded');
});
});
</script>
服務端渲染（SSR）環(huán)境下的優(yōu)化
<!-- SSR 場景 -->
<div id="app" v-cloak>
<!--#ifdef SSR-->
<!-- 服務端渲染的內容 -->
<h1>服務器渲染的標題</h1>
<!--#endif-->
<!-- 客戶端激活后的內容 -->
</div>
<style>
/* SSR 特殊處理 */
[v-cloak] [data-ssr] {
display: block;
}
[v-cloak] [data-client] {
display: none;
}
/* Vue 加載完成后 */
#app:not([v-cloak]) [data-ssr] {
display: none;
}
#app:not([v-cloak]) [data-client] {
display: block;
}
</style>
二、v-pre 指令：跳過編譯
1. 作用與使用場景
作用：跳過這個元素和它的子元素的編譯過程，保持原始內容。
適用場景：
- 顯示原始 Mustache 標簽
- 展示 Vue 模板代碼示例
- 提高大量靜態(tài)內容的渲染性能
2. 基本用法
<div id="app">
<!-- 這個元素不會被編譯 -->
<div v-pre>
<!-- 這里的 {{ }} 會原樣顯示 -->
<p>{{ 這行文本會原樣顯示 }}</p>
<span>這個也不會被編譯: {{ rawContent }}</span>
</div>
<!-- 正常編譯的元素 -->
<div>
<p>{{ compiledContent }}</p> <!-- 這里會顯示 data 中的值 -->
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
compiledContent: '這是編譯后的內容',
rawContent: '原始內容'
}
});
</script>
3. 實際應用場景
場景 1：展示代碼示例
<div id="app">
<h2>Vue 指令示例</h2>
<!-- 顯示 Vue 模板代碼 -->
<div class="code-example" v-pre>
<h3>模板代碼：</h3>
<pre><code>
<div>
<p>{{ message }}</p>
<button @click="handleClick">點擊我</button>
<span v-if="show">條件渲染</span>
</div>
</code></pre>
</div>
<!-- 實際運行的部分 -->
<div class="demo">
<h3>運行結果：</h3>
<p>{{ message }}</p>
<button @click="handleClick">點擊我</button>
<span v-if="show">條件渲染</span>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
show: true
},
methods: {
handleClick() {
this.show = !this.show;
}
}
});
</script>
<style>
.code-example {
background: #f5f5f5;
padding: 15px;
border-radius: 5px;
border-left: 4px solid #42b983;
margin-bottom: 20px;
}
.demo {
padding: 15px;
border: 1px solid #ddd;
border-radius: 5px;
}
</style>
場景 2：性能優(yōu)化 - 大量靜態(tài)內容
<!-- 博客文章詳情頁 -->
<div id="app">
<!-- 動態(tài)部分 -->
<header>
<h1>{{ article.title }}</h1>
<div class="meta">
作者: {{ article.author }} |
發(fā)布時間: {{ article.publishTime }}
</div>
</header>
<!-- 靜態(tài)內容部分使用 v-pre 跳過編譯 -->
<article v-pre>
<!-- 大量靜態(tài) HTML 內容 -->
<p>在計算機科學中，Vue.js 是一套用于構建用戶界面的漸進式框架。</p>
<p>與其他大型框架不同的是，Vue 被設計為可以自底向上逐層應用。</p>
<p>Vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。</p>
<!-- 更多靜態(tài)段落... -->
<p>Vue.js 使用了基于 HTML 的模板語法，允許開發(fā)者聲明式地將 DOM 綁定至底層 Vue 實例的數(shù)據(jù)。</p>
<!-- 包含其他 HTML 標簽 -->
<div class="highlight">
<pre><code>const app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})</code></pre>
</div>
<blockquote>
<p>這是一段引用內容，也會原樣顯示。</p>
</blockquote>
</article>
<!-- 動態(tài)評論區(qū) -->
<section class="comments">
<h3>評論 ({{ comments.length }})</h3>
<div v-for="comment in comments" :key="comment.id" class="comment">
<strong>{{ comment.user }}:</strong>
<p>{{ comment.content }}</p>
</div>
</section>
</div>
<script>
new Vue({
el: '#app',
data: {
article: {
title: 'Vue.js 入門指南',
author: '張三',
publishTime: '2024-01-15'
},
comments: [
{ id: 1, user: '李四', content: '很好的文章！' },
{ id: 2, user: '王五', content: '受益匪淺' }
]
}
});
</script>
場景 3：與其他模板引擎共存
<!-- 項目中同時使用 Vue 和其他模板引擎 -->
<div id="app">
<!-- 服務器端模板內容（如 PHP、JSP 等生成的內容） -->
<div v-pre>
<?php echo $serverContent; ?>
<!-- JSP 標簽 -->
<c:out value="${jspVariable}" />
<!-- 其他模板語法 -->
[[ serverTemplateVariable ]]
</div>
<!-- Vue 控制的部分 -->
<div class="vue-component">
<button @click="loadMore">加載更多</button>
<div v-for="item in vueData" :key="item.id">
{{ item.name }}
</div>
</div>
</div>
4. v-pre 的進階用法
配合動態(tài)屬性
<div id="app">
<!-- v-pre 內部的內容不會編譯，但屬性仍可綁定 -->
<div
v-pre
:class="dynamicClass"
:style="dynamicStyle"
@click="handleClick"
>
<!-- 這里的內容不會編譯 -->
{{ rawContent }} <!-- 會顯示 "{{ rawContent }}" -->
</div>
<!-- v-pre 可以應用于單個元素 -->
<span v-pre>{{ notCompiled }}</span>
正常文本
</div>
<script>
new Vue({
el: '#app',
data: {
dynamicClass: 'highlight',
dynamicStyle: {
color: 'red'
}
},
methods: {
handleClick() {
console.log('雖然內容沒編譯，但事件可以觸發(fā)');
}
}
});
</script>
<style>
.highlight {
background-color: yellow;
padding: 10px;
}
</style>
條件性跳過編譯
<div id="app">
<!-- 根據(jù)條件跳過編譯 -->
<template v-if="skipCompilation">
<div v-pre>
編譯跳過模式：
{{ rawTemplateSyntax }}
<span v-if="false">這個 v-if 不會生效</span>
</div>
</template>
<template v-else>
<div>
正常編譯模式：
{{ compiledContent }}
<span v-if="true">這個 v-if 會生效</span>
</div>
</template>
<button @click="toggleMode">切換模式</button>
</div>
<script>
new Vue({
el: '#app',
data: {
skipCompilation: false,
compiledContent: '編譯后的內容',
rawTemplateSyntax: '{{ 原始語法 }}'
},
methods: {
toggleMode() {
this.skipCompilation = !this.skipCompilation;
}
}
});
</script>
三、v-cloak 與 v-pre 的比較
| 特性 | v-cloak | v-pre |
|---|---|---|
| 主要目的 | 防止模板閃爍 | 跳過編譯過程 |
| 編譯階段 | 編譯前隱藏，編譯后顯示 | 完全跳過編譯 |
| 性能影響 | 無性能優(yōu)化作用 | 可以提高性能 |
| 使用場景 | 解決顯示問題 | 代碼展示、性能優(yōu)化 |
| CSS 依賴 | 必須配合 CSS | 不需要 CSS |
| 移除時機 | Vue 編譯后自動移除 | 一直存在 |
四、綜合應用示例
一個完整的技術文檔頁面
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue 指令文檔</title>
<style>
/* v-cloak 樣式 */
[v-cloak] {
display: none;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: #333;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.container {
display: grid;
grid-template-columns: 250px 1fr;
gap: 30px;
}
.sidebar {
position: sticky;
top: 20px;
height: fit-content;
}
.content {
padding: 20px;
background: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.code-block {
background: #282c34;
color: #abb2bf;
padding: 15px;
border-radius: 6px;
overflow-x: auto;
margin: 20px 0;
}
.demo-area {
border: 1px solid #e1e4e8;
padding: 20px;
border-radius: 6px;
margin: 20px 0;
}
.loading-placeholder {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: loading 1.5s infinite;
height: 100px;
border-radius: 4px;
}
@keyframes loading {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
</style>
</head>
<body>
<div id="app" v-cloak>
<!-- 使用 v-cloak 防止初始閃爍 -->
<!-- 側邊欄導航 -->
<div class="container">
<aside class="sidebar">
<h3>導航</h3>
<ul>
<li v-for="section in sections" :key="section.id">
<a :href="'#' + section.id" rel="external nofollow" >{{ section.title }}</a>
</li>
</ul>
<!-- 靜態(tài)內容使用 v-pre -->
<div v-pre class="info-box">
<p><strong>注意：</strong></p>
<p>這個側邊欄的部分內容是靜態(tài)的。</p>
<p>使用 v-pre 指令可以避免不必要的編譯。</p>
</div>
</aside>
<!-- 主內容區(qū)域 -->
<main class="content">
<h1>{{ pageTitle }}</h1>
<!-- 加載狀態(tài) -->
<div v-if="loading" class="loading-placeholder"></div>
<!-- 內容部分 -->
<template v-else>
<section v-for="section in sections" :key="section.id" :id="section.id">
<h2>{{ section.title }}</h2>
<p>{{ section.description }}</p>
<!-- 代碼示例使用 v-pre -->
<div class="code-block" v-pre>
<pre><code>{{ section.codeExample }}</code></pre>
</div>
<!-- 實時演示區(qū)域 -->
<div class="demo-area">
<h4>演示：</h4>
<!-- 這里是編譯執(zhí)行的 -->
<div v-html="section.demo"></div>
</div>
</section>
</template>
</main>
</div>
</div>
<!-- 模擬 Vue 延遲加載 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
setTimeout(() => {
new Vue({
el: '#app',
data: {
pageTitle: 'Vue 指令詳解',
loading: true,
sections: []
},
created() {
// 模擬異步加載數(shù)據(jù)
this.loadData();
},
methods: {
async loadData() {
// 模擬 API 請求延遲
await new Promise(resolve => setTimeout(resolve, 800));
this.sections = [
{
id: 'v-cloak',
title: 'v-cloak 指令',
description: '用于防止未編譯的 Mustache 標簽在頁面加載時顯示。',
codeExample: `<div id="app" v-cloak>\n {{ message }}\n</div>\n\n<style>\n[v-cloak] {\n display: none;\n}\n</style>`,
demo: '<div>編譯后的內容會在這里顯示</div>'
},
{
id: 'v-pre',
title: 'v-pre 指令',
description: '跳過這個元素和它的子元素的編譯過程。',
codeExample: `<div v-pre>\n <!-- 這里的內容不會編譯 -->\n {{ rawContent }}\n <span v-if="false">這個不會顯示</span>\n</div>`,
demo: '{{ 這行代碼不會編譯 }}'
}
];
this.loading = false;
}
}
});
}, 500);
</script>
</body>
</html>
五、最佳實踐總結
v-cloak 的最佳實踐：
- 始終配合 CSS 使用：必須定義
[v-cloak]的樣式 - 作用范圍控制：可以應用于整個應用或特定部分
- 考慮用戶體驗：可以結合骨架屏或加載動畫
- SSR 場景：在服務端渲染中特別有用
v-pre 的最佳實踐：
- 靜態(tài)內容優(yōu)化：對大量靜態(tài) HTML 使用 v-pre 提升性能
- 代碼展示：在文檔、教程中展示原始模板代碼
- 混合環(huán)境：當 Vue 與其他模板引擎共存時
- 避免濫用：只在確實需要跳過編譯時使用
通用建議：
- 性能考慮：對于復雜頁面，合理使用這兩個指令可以提升用戶體驗
- 漸進增強：確保頁面在 JavaScript 禁用時仍有基本功能
- 測試驗證：在不同網(wǎng)絡條件下測試閃爍問題
- 保持簡潔：不要過度使用指令，保持代碼可讀性
通過合理使用 v-cloak 和 v-pre，可以顯著改善 Vue 應用的用戶體驗和性能表現(xiàn)。
到此這篇關于Vue中v-cloak和v-pre指令使用詳解的文章就介紹到這了,更多相關Vue v-cloak和v-pre內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
vue使用v-model實現(xiàn)數(shù)據(jù)的雙向綁定，它會根據(jù)控件類型自動選取正確的方法來更新元素，本文就詳細的介紹一下原理，感興趣的可以了解一下2021-08-08
路由傳參主要有兩種方式一種是路徑傳參一種是參數(shù)傳遞,本文結合示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-11-11
這篇文章主要介紹了vue中的inject用法及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
vue+vant使用圖片預覽功能ImagePreview的問題解決
這篇文章主要介紹了vue+vant使用圖片預覽功能ImagePreview的問題解決，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-04-04
Vue3是一款流行的前端框架,它支持多種傳值方式,包括兄弟組件之間的傳值,本文主要介紹了vue3+ts 兄弟組件之間傳值的實現(xiàn),具有一定的參考價值,感興趣的可以了解一下2023-11-11
新版vue-cli模板下本地開發(fā)環(huán)境使用node服務器跨域的方法
這篇文章主要介紹了新版vue-cli模板下本地開發(fā)環(huán)境使用node服務器跨域的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
在vue2中 使用的?this.$route?和?this.$router?this.$store的使用在vue3中完全適用，這篇文章主要介紹了Vue3 使用Vuex和router的注意事項及操作方法,需要的朋友可以參考下2022-12-12
本篇文章主要介紹了淺談Vuejs中nextTick()異步更新隊列源碼解析，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
這篇文章主要介紹了Vue3實戰(zhàn)之插槽封裝與懶加載的相關資料,過插槽實現(xiàn)組件的結構分離、復用性和語義清晰,通過懶加載實現(xiàn)圖片的按需加載,減少首屏加載時間和資源浪費,文中給出了詳細的代碼示例,需要的朋友可以參考下2025-04-04
vue.js實現(xiàn)請求數(shù)據(jù)的方法示例
這篇文章主要給大家介紹了vue.js實現(xiàn)請求數(shù)據(jù)的方法示例，文中分別介紹了vue1.0和vue2.0的示例方法，需要的朋友可以參考借鑒，下面來一起看看吧。2017-02-02