Vue中v-cloak和v-pre指令使用詳解
更新時(shí)間：2026年01月12日 11:23:04 作者：北辰alk
在 Vue.js 中,v-cloak 和 v-pre 是兩個(gè)比較特殊但非常有用的指令,它們主要用于處理模板編譯和顯示相關(guān)的問(wèn)題,本文就來(lái)詳細(xì)的介紹一下Vue中v-cloak和v-pre指令使用,感興趣的可以了解一下
在 Vue.js 中，v-cloak 和 v-pre 是兩個(gè)比較特殊但非常有用的指令。它們主要用于處理模板編譯和顯示相關(guān)的問(wèn)題。
一、v-cloak 指令：解決閃爍問(wèn)題
1. 作用與問(wèn)題場(chǎng)景
問(wèn)題：當(dāng)使用 Vue 管理 DOM 時(shí)，在 Vue 實(shí)例完全加載并編譯模板之前，原始的模板語(yǔ)法（如 {{ }}）可能會(huì)短暫地顯示在頁(yè)面上，造成內(nèi)容閃爍。
v-cloak 的作用：防止未編譯的 Vue 模板在頁(yè)面加載時(shí)閃爍顯示。
2. 基本使用
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
/* 關(guān)鍵：使用屬性選擇器隱藏所有帶有 v-cloak 的元素 */
[v-cloak] {
display: none !important;
}
/* 或者更具體的選擇器 */
#app[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<!-- 這些內(nèi)容在 Vue 編譯完成前不會(huì)顯示 -->
<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)絡(luò)延遲，更容易看到閃爍效果
setTimeout(() => {
new Vue({
el: '#app',
data: {
title: '歡迎頁(yè)面',
message: 'Hello Vue!',
showContent: true,
dynamicContent: '這是動(dòng)態(tài)內(nèi)容'
},
mounted() {
// Vue 實(shí)例掛載完成后，v-cloak 屬性會(huì)自動(dòng)移除
console.log('Vue 已加載，v-cloak 已移除');
}
});
}, 1000); // 延遲 1 秒加載 Vue
</script>
</body>
</html>
3. 實(shí)際應(yīng)用場(chǎng)景
場(chǎng)景 1：完整的單頁(yè)應(yīng)用
<!-- 大型應(yīng)用中的使用 -->
<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>
/* 防止整個(gè)應(yīng)用閃爍 */
[v-cloak] > * {
display: none;
}
</style>
場(chǎng)景 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>
<!-- 實(shí)際內(nèi)容 -->
<div v-else>
<header>{{ pageTitle }}</header>
<main>{{ content }}</main>
</div>
</div>
<style>
/* 基礎(chǔ)隱藏 */
[v-cloak] {
opacity: 0;
}
/* 骨架屏樣式 */
.skeleton {
/* 骨架屏動(dòng)畫(huà)樣式 */
}
.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: '頁(yè)面標(biāo)題',
content: '頁(yè)面內(nèi)容...'
});
}, 1500);
});
}
}
});
</script>
場(chǎng)景 3：多個(gè)獨(dú)立組件
<div>
<!-- 多個(gè)獨(dú)立組件使用 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>
/* 可以針對(duì)不同組件設(shè)置不同的隱藏效果 */
#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. 進(jìn)階使用技巧
配合 CSS 動(dòng)畫(huà)實(shí)現(xiàn)平滑過(guò)渡
<style>
/* 使用 CSS 過(guò)渡效果 */
[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>
服務(wù)端渲染（SSR）環(huán)境下的優(yōu)化
<!-- SSR 場(chǎng)景 -->
<div id="app" v-cloak>
<!--#ifdef SSR-->
<!-- 服務(wù)端渲染的內(nèi)容 -->
<h1>服務(wù)器渲染的標(biāo)題</h1>
<!--#endif-->
<!-- 客戶端激活后的內(nèi)容 -->
</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 指令：跳過(guò)編譯
1. 作用與使用場(chǎng)景
作用：跳過(guò)這個(gè)元素和它的子元素的編譯過(guò)程，保持原始內(nèi)容。
適用場(chǎng)景：
- 顯示原始 Mustache 標(biāo)簽
- 展示 Vue 模板代碼示例
- 提高大量靜態(tài)內(nèi)容的渲染性能
2. 基本用法
<div id="app">
<!-- 這個(gè)元素不會(huì)被編譯 -->
<div v-pre>
<!-- 這里的 {{ }} 會(huì)原樣顯示 -->
<p>{{ 這行文本會(huì)原樣顯示 }}</p>
<span>這個(gè)也不會(huì)被編譯: {{ rawContent }}</span>
</div>
<!-- 正常編譯的元素 -->
<div>
<p>{{ compiledContent }}</p> <!-- 這里會(huì)顯示 data 中的值 -->
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
compiledContent: '這是編譯后的內(nèi)容',
rawContent: '原始內(nèi)容'
}
});
</script>
3. 實(shí)際應(yīng)用場(chǎng)景
場(chǎng)景 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">點(diǎn)擊我</button>
<span v-if="show">條件渲染</span>
</div>
</code></pre>
</div>
<!-- 實(shí)際運(yùn)行的部分 -->
<div class="demo">
<h3>運(yùn)行結(jié)果：</h3>
<p>{{ message }}</p>
<button @click="handleClick">點(diǎn)擊我</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>
場(chǎng)景 2：性能優(yōu)化 - 大量靜態(tài)內(nèi)容
<!-- 博客文章詳情頁(yè) -->
<div id="app">
<!-- 動(dòng)態(tài)部分 -->
<header>
<h1>{{ article.title }}</h1>
<div class="meta">
作者: {{ article.author }} |
發(fā)布時(shí)間: {{ article.publishTime }}
</div>
</header>
<!-- 靜態(tài)內(nèi)容部分使用 v-pre 跳過(guò)編譯 -->
<article v-pre>
<!-- 大量靜態(tài) HTML 內(nèi)容 -->
<p>在計(jì)算機(jī)科學(xué)中，Vue.js 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。</p>
<p>與其他大型框架不同的是，Vue 被設(shè)計(jì)為可以自底向上逐層應(yīng)用。</p>
<p>Vue 的核心庫(kù)只關(guān)注視圖層，不僅易于上手，還便于與第三方庫(kù)或既有項(xiàng)目整合。</p>
<!-- 更多靜態(tài)段落... -->
<p>Vue.js 使用了基于 HTML 的模板語(yǔ)法，允許開(kāi)發(fā)者聲明式地將 DOM 綁定至底層 Vue 實(shí)例的數(shù)據(jù)。</p>
<!-- 包含其他 HTML 標(biāo)簽 -->
<div class="highlight">
<pre><code>const app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})</code></pre>
</div>
<blockquote>
<p>這是一段引用內(nèi)容，也會(huì)原樣顯示。</p>
</blockquote>
</article>
<!-- 動(dòng)態(tài)評(píng)論區(qū) -->
<section class="comments">
<h3>評(píng)論 ({{ 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 入門(mén)指南',
author: '張三',
publishTime: '2024-01-15'
},
comments: [
{ id: 1, user: '李四', content: '很好的文章！' },
{ id: 2, user: '王五', content: '受益匪淺' }
]
}
});
</script>
場(chǎng)景 3：與其他模板引擎共存
<!-- 項(xiàng)目中同時(shí)使用 Vue 和其他模板引擎 -->
<div id="app">
<!-- 服務(wù)器端模板內(nèi)容（如 PHP、JSP 等生成的內(nèi)容） -->
<div v-pre>
<?php echo $serverContent; ?>
<!-- JSP 標(biāo)簽 -->
<c:out value="${jspVariable}" />
<!-- 其他模板語(yǔ)法 -->
[[ 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 的進(jìn)階用法
配合動(dòng)態(tài)屬性
<div id="app">
<!-- v-pre 內(nèi)部的內(nèi)容不會(huì)編譯，但屬性仍可綁定 -->
<div
v-pre
:class="dynamicClass"
:style="dynamicStyle"
@click="handleClick"
>
<!-- 這里的內(nèi)容不會(huì)編譯 -->
{{ rawContent }} <!-- 會(huì)顯示 "{{ rawContent }}" -->
</div>
<!-- v-pre 可以應(yīng)用于單個(gè)元素 -->
<span v-pre>{{ notCompiled }}</span>
正常文本
</div>
<script>
new Vue({
el: '#app',
data: {
dynamicClass: 'highlight',
dynamicStyle: {
color: 'red'
}
},
methods: {
handleClick() {
console.log('雖然內(nèi)容沒(méi)編譯，但事件可以觸發(fā)');
}
}
});
</script>
<style>
.highlight {
background-color: yellow;
padding: 10px;
}
</style>
條件性跳過(guò)編譯
<div id="app">
<!-- 根據(jù)條件跳過(guò)編譯 -->
<template v-if="skipCompilation">
<div v-pre>
編譯跳過(guò)模式：
{{ rawTemplateSyntax }}
<span v-if="false">這個(gè) v-if 不會(huì)生效</span>
</div>
</template>
<template v-else>
<div>
正常編譯模式：
{{ compiledContent }}
<span v-if="true">這個(gè) v-if 會(huì)生效</span>
</div>
</template>
<button @click="toggleMode">切換模式</button>
</div>
<script>
new Vue({
el: '#app',
data: {
skipCompilation: false,
compiledContent: '編譯后的內(nèi)容',
rawTemplateSyntax: '{{ 原始語(yǔ)法 }}'
},
methods: {
toggleMode() {
this.skipCompilation = !this.skipCompilation;
}
}
});
</script>
三、v-cloak 與 v-pre 的比較
| 特性 | v-cloak | v-pre |
|---|---|---|
| 主要目的 | 防止模板閃爍 | 跳過(guò)編譯過(guò)程 |
| 編譯階段 | 編譯前隱藏，編譯后顯示 | 完全跳過(guò)編譯 |
| 性能影響 | 無(wú)性能優(yōu)化作用 | 可以提高性能 |
| 使用場(chǎng)景 | 解決顯示問(wèn)題 | 代碼展示、性能優(yōu)化 |
| CSS 依賴 | 必須配合 CSS | 不需要 CSS |
| 移除時(shí)機(jī) | Vue 編譯后自動(dòng)移除 | 一直存在 |
四、綜合應(yīng)用示例
一個(gè)完整的技術(shù)文檔頁(yè)面
<!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 防止初始閃爍 -->
<!-- 側(cè)邊欄導(dǎo)航 -->
<div class="container">
<aside class="sidebar">
<h3>導(dǎo)航</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)內(nèi)容使用 v-pre -->
<div v-pre class="info-box">
<p><strong>注意：</strong></p>
<p>這個(gè)側(cè)邊欄的部分內(nèi)容是靜態(tài)的。</p>
<p>使用 v-pre 指令可以避免不必要的編譯。</p>
</div>
</aside>
<!-- 主內(nèi)容區(qū)域 -->
<main class="content">
<h1>{{ pageTitle }}</h1>
<!-- 加載狀態(tài) -->
<div v-if="loading" class="loading-placeholder"></div>
<!-- 內(nèi)容部分 -->
<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>
<!-- 實(shí)時(shí)演示區(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 請(qǐng)求延遲
await new Promise(resolve => setTimeout(resolve, 800));
this.sections = [
{
id: 'v-cloak',
title: 'v-cloak 指令',
description: '用于防止未編譯的 Mustache 標(biāo)簽在頁(yè)面加載時(shí)顯示。',
codeExample: `<div id="app" v-cloak>\n {{ message }}\n</div>\n\n<style>\n[v-cloak] {\n display: none;\n}\n</style>`,
demo: '<div>編譯后的內(nèi)容會(huì)在這里顯示</div>'
},
{
id: 'v-pre',
title: 'v-pre 指令',
description: '跳過(guò)這個(gè)元素和它的子元素的編譯過(guò)程。',
codeExample: `<div v-pre>\n <!-- 這里的內(nèi)容不會(huì)編譯 -->\n {{ rawContent }}\n <span v-if="false">這個(gè)不會(huì)顯示</span>\n</div>`,
demo: '{{ 這行代碼不會(huì)編譯 }}'
}
];
this.loading = false;
}
}
});
}, 500);
</script>
</body>
</html>
五、最佳實(shí)踐總結(jié)
v-cloak 的最佳實(shí)踐：
- 始終配合 CSS 使用：必須定義
[v-cloak]的樣式 - 作用范圍控制：可以應(yīng)用于整個(gè)應(yīng)用或特定部分
- 考慮用戶體驗(yàn)：可以結(jié)合骨架屏或加載動(dòng)畫(huà)
- SSR 場(chǎng)景：在服務(wù)端渲染中特別有用
v-pre 的最佳實(shí)踐：
- 靜態(tài)內(nèi)容優(yōu)化：對(duì)大量靜態(tài) HTML 使用 v-pre 提升性能
- 代碼展示：在文檔、教程中展示原始模板代碼
- 混合環(huán)境：當(dāng) Vue 與其他模板引擎共存時(shí)
- 避免濫用：只在確實(shí)需要跳過(guò)編譯時(shí)使用
通用建議：
- 性能考慮：對(duì)于復(fù)雜頁(yè)面，合理使用這兩個(gè)指令可以提升用戶體驗(yàn)
- 漸進(jìn)增強(qiáng)：確保頁(yè)面在 JavaScript 禁用時(shí)仍有基本功能
- 測(cè)試驗(yàn)證：在不同網(wǎng)絡(luò)條件下測(cè)試閃爍問(wèn)題
- 保持簡(jiǎn)潔：不要過(guò)度使用指令，保持代碼可讀性
通過(guò)合理使用 v-cloak 和 v-pre，可以顯著改善 Vue 應(yīng)用的用戶體驗(yàn)和性能表現(xiàn)。
到此這篇關(guān)于Vue中v-cloak和v-pre指令使用詳解的文章就介紹到這了,更多相關(guān)Vue v-cloak和v-pre內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
淺談vue實(shí)現(xiàn)雙向事件綁定v-model的原理
vue使用v-model實(shí)現(xiàn)數(shù)據(jù)的雙向綁定，它會(huì)根據(jù)控件類型自動(dòng)選取正確的方法來(lái)更新元素，本文就詳細(xì)的介紹一下原理，感興趣的可以了解一下2021-08-08
vue-router 路由傳參問(wèn)題(路由傳參方式)
路由傳參主要有兩種方式一種是路徑傳參一種是參數(shù)傳遞,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-11-11
這篇文章主要介紹了vue中的inject用法及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue+vant使用圖片預(yù)覽功能ImagePreview的問(wèn)題解決
這篇文章主要介紹了vue+vant使用圖片預(yù)覽功能ImagePreview的問(wèn)題解決，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
vue3+ts 兄弟組件之間傳值的實(shí)現(xiàn)
Vue3是一款流行的前端框架,它支持多種傳值方式,包括兄弟組件之間的傳值,本文主要介紹了vue3+ts 兄弟組件之間傳值的實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下2023-11-11
新版vue-cli模板下本地開(kāi)發(fā)環(huán)境使用node服務(wù)器跨域的方法
這篇文章主要介紹了新版vue-cli模板下本地開(kāi)發(fā)環(huán)境使用node服務(wù)器跨域的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04
Vue3 使用Vuex和router的注意事項(xiàng)及操作方法
在vue2中 使用的?this.$route?和?this.$router?this.$store的使用在vue3中完全適用，這篇文章主要介紹了Vue3 使用Vuex和router的注意事項(xiàng)及操作方法,需要的朋友可以參考下2022-12-12
淺談Vuejs中nextTick()異步更新隊(duì)列源碼解析
本篇文章主要介紹了淺談Vuejs中nextTick()異步更新隊(duì)列源碼解析，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
這篇文章主要介紹了Vue3實(shí)戰(zhàn)之插槽封裝與懶加載的相關(guān)資料,過(guò)插槽實(shí)現(xiàn)組件的結(jié)構(gòu)分離、復(fù)用性和語(yǔ)義清晰,通過(guò)懶加載實(shí)現(xiàn)圖片的按需加載,減少首屏加載時(shí)間和資源浪費(fèi),文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下2025-04-04
vue.js實(shí)現(xiàn)請(qǐng)求數(shù)據(jù)的方法示例
這篇文章主要給大家介紹了vue.js實(shí)現(xiàn)請(qǐng)求數(shù)據(jù)的方法示例，文中分別介紹了vue1.0和vue2.0的示例方法，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-02-02