Vue.js 模板語法全解析：從基礎到實戰應用

引言

在 Vue.js 的開發體系中，模板語法是構建用戶界面的核心要素，它讓開發者能夠高效地將數據與 DOM 進行綁定，實現動態交互效果。通過對《Vue.js 快速入門實戰》中關于 Vue 項目部署章節（實際圍繞 Vue 模板語法展開）的深入研讀，我們將全面剖析 Vue 項目結構、應用程序實例、生命周期、插值、指令以及自定義指令等關鍵內容，并通過實戰案例加深理解。

1. Vue 項目詳解

項目目錄結構

以常見的vite - app項目為例，其目錄結構清晰且分工明確，各部分協同支撐起整個 Vue 項目的開發與運行。

public 目錄：如同項目的公共資源庫，存放那些無需經過構建處理的文件，如index.html、favicon.ico等。其中index.html作為項目的入口頁面，為整個 Vue 應用提供了基礎的 HTML 結構，所有 Vue 組件最終都會被掛載到該頁面的特定元素上。
src 目錄：這是項目源代碼的核心存儲地，是開發者編寫業務邏輯、組件、樣式等代碼的主要區域。
- assets 子目錄：專門用于存放靜態資源，如圖片、字體、音頻等。例如，項目中用到的產品圖片可以存放在此目錄下，在組件中通過相對路徑引用，如<img src="@/assets/product.jpg" alt="產品圖片">，這里的@是 Vite 等構建工具設置的指向src目錄的別名，方便開發者引用資源。
- components 子目錄：是組件的 “家園”，各種可復用的 Vue 組件都在此定義和存放。比如一個用于展示商品列表的ProductList.vue組件，包含了商品列表的展示邏輯、樣式以及與用戶交互的功能。在其他組件中可通過import ProductList from '@/components/ProductList.vue'導入并使用。
- App.vue：作為項目的入口組件，它是整個 Vue 應用的根組件，負責構建應用的整體結構，通常會引入并組合其他子組件，形成完整的用戶界面。例如，在App.vue中可能會引入ProductList.vue和Header.vue等組件，通過<template>標簽將它們組合在一起展示給用戶。
node_modules 目錄：這個目錄由包管理工具（如 npm、yarn、pnpm）自動生成，用于存放項目依賴的第三方包。當在項目中執行npm install安裝axios（用于發起 HTTP 請求的庫）時，axios及其依賴的其他包就會被下載并存儲在node_modules目錄下。項目運行時，構建工具會從這里讀取相關包的代碼并進行打包處理。

應用程序實例

Vue 項目本質上是一個單頁面應用程序（SPA），每個 Vue 應用都有一個核心的應用程序實例。通過 Vue 提供的createApp()方法可以輕松創建這個實例。在典型的main.ts文件（如果是 TypeScript 項目，JavaScript 項目則是main.js）中，代碼const app = createApp(App)，這里的App是前面提到的App.vue組件，它作為參數傳遞給createApp()方法，從而創建了一個以App.vue為根組件的 Vue 應用實例。

創建實例后，還需要指定一個 DOM 元素作為掛載點，讓 Vue 應用能夠在網頁中展示。使用app.mount('#app')語句，它會在 HTML 頁面中找到id為app的元素，并將 Vue 應用掛載到該元素上。例如，在public/index.html中存在<div id="app"></div>，Vue 應用的所有內容就會渲染在這個div元素內部。此時，Vue 的數據雙向綁定機制開始生效，組件中的數據變化會實時反映在 DOM 上，用戶對 DOM 的操作也能同步更新到數據中。比如在App.vue組件中有一個數據變量message，在模板中通過{{ message }}進行插值顯示，當message的值發生變化時，頁面上顯示的內容也會隨之改變。

2. Vue 生命周期

生命周期圖示

Vue 組件從誕生到銷毀的過程被稱為生命周期，通過一張詳細的生命周期圖，可以清晰地看到其完整的生命周期流程。圖中展示了從beforeCreate開始，到unmounted結束的各個階段，其中beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeUnmount、unmounted等階段尤為關鍵，這些階段對應的陰影框標注的就是生命周期鉤子函數。這些鉤子函數為開發者提供了在組件不同生命周期階段執行自定義邏輯的機會。

鉤子函數詳解及示例

beforeCreate：在 Vue 實例初始化之前被調用，此時組件的data變量還未被初始化為響應式變量，組件的methods、computed等屬性也尚未被創建。例如，在一個自定義組件MyComponent.vue中定義該鉤子函數：

export default {beforeCreate() {console.log('beforeCreate()');}
}

在組件初始化時，控制臺會輸出beforeCreate()。這個階段通常用于一些初始化操作，如在這個階段設置一些全局的配置信息，但由于此時無法訪問組件的data和methods，所以能做的操作相對有限。

created：當 Vue 實例初始化完成后，該鉤子函數被調用。此時，data已經變成響應式變量，methods也已被創建，開發者可以訪問組件的data和methods。在實際開發中，這個階段常用于發起數據請求來獲取初始數據。例如：

export default {data() {return {userInfo: null};},created() {// 假設這里使用axios發起請求獲取用戶信息axios.get('/api/userInfo').then(response => {this.userInfo = response.data;});}
}

mounted：組件掛載到 DOM 并渲染完成后調用此鉤子函數。此時，組件的所有內容都已在頁面中呈現，開發者可以訪問組件的全部內容，包括 DOM 元素。例如，在一個需要操作 DOM 元素的場景中：

export default {mounted() {const element = document.getElementById('myElement');if (element) {element.style.color ='red';}console.log('mounted()');}
}

在模板中存在<div id="myElement">這是一個元素</div>，當組件掛載完成后，該元素的文本顏色會變為紅色，同時控制臺輸出mounted()。

beforeUpdate：當組件的數據發生變化后，DOM 重新渲染之前調用此鉤子函數。在這個階段，數據已經更新，但 DOM 還未更新，開發者可以在此進行一些數據更新前的準備工作，如記錄數據變化前的狀態。例如：

export default {data() {return {count: 0};},methods: {increment() {this.count++;}},beforeUpdate() {console.log('數據即將更新，當前count值為', this.count);}
}

當調用increment方法使count值增加時，控制臺會輸出數據更新前count的值。

updated：DOM 重新渲染完成后調用此鉤子函數。在這個階段，數據和 DOM 都已經更新完成，開發者可以在此對更新后的 DOM 進行操作。例如：

export default {data() {return {text: '初始文本'};},methods: {changeText() {this.text = '新的文本';}},updated() {const updatedElement = document.querySelector('span');if (updatedElement) {console.log('更新后的DOM元素文本為', updatedElement.textContent);}}
}

在模板中有<span>{{ text }}</span>，當調用changeText方法后，updated鉤子函數會輸出更新后 DOM 元素的文本內容。

activated：當被keep - alive緩存的組件被激活時調用。keep - alive是 Vue 提供的一個組件，用于緩存組件實例，避免組件重復創建和銷毀。例如，在一個多頁面切換的應用中，有一個PageComponent組件被keep - alive包裹，當用戶再次切換到該頁面時，activated鉤子函數會被調用。

export default {activated() {console.log('組件被激活');}
}

deactivated：當被keep - alive緩存的組件失活時調用。例如，當用戶從被keep - alive緩存的PageComponent組件所在頁面切換到其他頁面時，deactivated鉤子函數會被觸發。

export default {deactivated() {console.log('組件失活');}
}

3. Vue 的插值

Mustache 語法插值

在 Vue 的 HTML 模板中，Mustache 語法（雙大括號）是實現數據綁定的常用方式。

例如，在一個組件的模板中存在{{ message }}，這里的message是組件實例中的一個數據變量。假設在組件的data選項中定義了message: 'Hello, Vue!'，那么在頁面渲染時，{{ message }}會被自動替換為Hello, Vue!。并且，當message的值發生變化時，插值的內容也會實時更新。

比如在組件的methods中有一個方法updateMessage：

export default {data() {return {message: 'Hello, Vue!'};},methods: {updateMessage() {this.message = 'New message';}}
}

當調用updateMessage方法后，頁面上原本顯示的Hello, Vue!會立即變為New message。

HTML 文本插值

當需要在模板中渲染包含 HTML 標簽的文本時，如果直接使用雙大括號綁定，這些 HTML 標簽會被當作文本原樣顯示。

例如，有一個變量htmlMessage = '<p>這是一段HTML文本</p>'，在模板中使用{{ htmlMessage }}，頁面上會顯示<p>這是一段HTML文本</p>，而不是將其渲染為一個段落。

為了正確渲染 HTML 內容，需要使用v - html指令。

如<span v - html="htmlMessage"></span>，此時頁面上會正確顯示一個包含 “這是一段 HTML 文本” 的段落。但使用v - html時要格外注意安全問題，因為它可能會引入跨站腳本攻擊（XSS）風險。如果htmlMessage是用戶輸入的內容且未經過嚴格過濾，惡意用戶可能會輸入惡意腳本代碼，如<script>alert('惡意代碼')</script>，一旦渲染，就會在頁面上執行惡意腳本，所以在使用v - html渲染用戶輸入內容時，一定要進行嚴格的輸入驗證和過濾。

4. Vue 的指令

內置指令

v - text

該指令用于更新 DOM 元素的textContent屬性。

例如，在模板中有<span v - text="textMessage"></span>，假設在組件的data中定義了textMessage = '這是通過v - text指令設置的文本'，那么在頁面渲染時，<span>標簽內的文本會被設置為這是通過v - text指令設置的文本，其效果等同于在 JavaScript 中執行span.textContent = '這是通過v - text指令設置的文本'。

與 Mustache 語法插值不同的是，v - text不會對插值內容進行解析，只是單純地設置textContent。

v - htm

用于更新 DOM 元素的innerHTML屬性，能夠將包含 HTML 標簽的字符串正確渲染為 HTML 結構。例如<div v - html="richHtml"></div>，其中richHtml = '<h1>標題</h1><p>段落內容</p>'，在頁面上會顯示一個包含標題和段落的 HTML 結構。但如前文所述，使用時要注意防止 XSS 攻擊，避免渲染惡意 HTML 代碼。

v - show

通過切換元素的display?CSS 屬性來控制元素的顯示或隱藏。

例如<div v - show="showValue">這是一個根據v - show顯示或隱藏的元素</div>，在組件的data中定義showValue = true時，該div元素正常顯示；當showValue = false時，元素的display屬性會被設置為none，從而在頁面上隱藏。

與v - if不同，v - show只是通過 CSS 控制元素的顯示狀態，元素始終存在于 DOM 中，而v - if在條件為false時，元素根本不會被創建。

v - if

根據傳入的布爾值判斷是否渲染當前元素。

例如<div v - if="isLoggedIn">歡迎登錄</div>，當組件的data中isLoggedIn = true時，<div>元素會被渲染到頁面上；當isLoggedIn = false時，該<div>元素及其內部內容不會被創建，在 DOM 中不存在。

這種方式適用于在某些條件下完全不需要渲染某個元素的場景，相比v - show，它不會在 DOM 中保留元素，因此在性能上更優，尤其是在條件判斷頻繁切換且元素結構復雜的情況下。

v - else和v - else - if

這兩個指令必須與v - if或v - else - if連用，用于實現復雜的邏輯判斷和元素渲染。例如：

<div v - if="score >= 90">優秀</div>
<div v - else - if="score >= 60">及格</div>
<div v - else>不及格</div>

在組件的data中定義score = 80時，頁面上會顯示 “及格”。

v - for

主要用于遍歷數組、對象等數據結構來渲染多個元素。

例如<div v - for="item in items">{{ item }}</div>，假設在組件的data中定義items = ['蘋果', '香蕉', '橘子']，頁面上會渲染出三個div，分別顯示 “蘋果”“香蕉”“橘子”。

此外，還可以獲取遍歷的索引或對象的鍵，如v - for="(item, index) in items"，在模板中可以通過index獲取當前項的索引；對于對象遍歷v - for="(value, key) in object"，可以通過key獲取對象的鍵。

v - pre

使用該指令可以跳過這個元素和它的子元素的編譯過程，直接顯示原始的 Mustache 標簽。

例如<span v - pre>{{ message }}</span>，頁面上會直接顯示{{ message }}，而不會將其解析為數據綁定進行渲染，常用于展示一些不需要 Vue 編譯的純文本內容，如一些包含特殊占位符的模板示例展示。

v - once

只渲染元素和組件一次，之后即使其內部綁定的數據發生變動，也不會重新渲染。

例如<div v - once>{{ initialValue }}</div>，在組件初始化時，initialValue的值會被渲染到div中，后續initialValue的值無論如何變化，div中的內容都不會更新，這種方式適用于一些數據在初始渲染后不會再改變的場景，能提高一定的性能。

v - cloak

通常與 CSS 規則[v - cloak] { display: none; }一起使用。在 Vue 組件實例加載過程中，未編譯的 Mustache 標簽可能會短暫顯示在頁面上，影響用戶體驗。使用v - cloak指令后，在組件實例準備好之前，帶有v - cloak指令的元素會根據 CSS 規則隱藏，當 Vue 完成編譯，v - cloak指令會從 DOM 中移除，元素正常顯示。例如<div v - cloak>{{ message }}</div>，在 Vue 加載過程中，該div元素是隱藏的，加載完成后，div中正確顯示message的值。

v - on

用于綁定事件監聽器。例如<button v - on:click="onClick">點擊</button>，在組件的methods中定義onClick方法，當用戶點擊按鈕時，onClick方法會被調用。

v - on有簡寫形式@，上述代碼可簡寫為<button @click="onClick">點擊</button>。

此外，v - on還支持修飾符，如.stop修飾符，<button @click.stop="onClick">點擊</button>，當按鈕被點擊時，會調用event.stopPropagation()方法，阻止事件冒泡；.prevent修飾符，<a @click.prevent="handleClick" href="#">鏈接</a>，點擊鏈接時，會調用event.preventDefault()方法，阻止鏈接的默認跳轉行為。

v - bind

用于動態綁定一個或多個 DOM 元素屬性。例如<input v - bind:placeholder="placeholderMessage" :id="bindId">，這里v - bind:placeholder將placeholderMessage變量的值綁定到輸入框的placeholder屬性上，

:id是v - bind:id的簡寫形式，將bindId變量的值綁定到輸入框的id屬性上。假設在組件的data中定義placeholderMessage = '請輸入內容'，bindId = 'input - 1'，則在頁面上輸入框的placeholder屬性值為 “請輸入內容”，id屬性值為 “input - 1”。

v-model

v-model是 Vue 中實現表單雙向綁定的強大指令，它極大地簡化了表單元素與 Vue 實例數據之間的同步操作。其核心特性是能夠根據表單控件的類型，自動選擇最合適的更新方式來保持數據的一致性。

對于<input>元素，當使用v-model指令時，輸入框的值會與 Vue 實例中的對應數據實時同步。

例如，在模板中有<input v-model="userInput">，在 Vue 組件的data選項中定義了userInput: ''。當用戶在輸入框中輸入內容時，userInput的值會立即更新；反之，當通過 JavaScript 代碼修改userInput的值時，輸入框中的顯示內容也會相應改變。這一過程無需開發者手動監聽input事件并更新數據，v-model會自動處理。

在<textarea>元素上，v-model同樣適用。

如<textarea v-model="textAreaContent"></textarea>，假設textAreaContent初始值為'請輸入一些文本'，用戶在文本區域內進行的任何編輯操作都會同步更新textAreaContent，并且當textAreaContent在其他地方被修改時，文本區域的顯示內容也會更新。

對于<select>元素，v-model用于綁定選中的選項。例如：

<select v-model="selectedOption"><option value="option1">選項1</option><option value="option2">選項2</option><option value="option3">選項3</option>
</select>

?在組件的data中定義selectedOption: 'option1'，頁面加載時，select元素會默認選中值為option1的選項。當用戶選擇其他選項時，selectedOption的值會自動更新為所選選項的值；

若在 JavaScript 代碼中修改selectedOption的值，select元素也會自動切換到對應的選項。

?此外，v-model還支持修飾符，如.lazy修飾符。默認情況下，v-model在input事件觸發時更新數據，但使用.lazy修飾符后，會在change事件觸發時更新數據。

例如<input v-model.lazy="userInput">，這樣只有當用戶完成輸入并失去焦點（或按下回車鍵）時，userInput才會更新，適用于一些對實時性要求不高、希望減少數據更新頻率的場景。

v-slot

v-slot主要用于在組件中提供具名插槽或接收prop的插槽，它為組件的內容分發提供了更靈活的方式。

具名插槽允許在一個組件的模板中定義多個插槽，并通過名稱來區分。

例如，在一個BaseLayout組件中，可能有header、content和footer三個不同的插槽：

<!-- BaseLayout.vue -->
<template><div><slot name="header"></slot><slot name="content"></slot><slot name="footer"></slot></div>
</template>

?在使用BaseLayout組件時，可以這樣填充這些具名插槽：

<BaseLayout><template v-slot:header><h1>頁面標題</h1></template><template v-slot:content><p>這是頁面的主要內容。</p></template><template v-slot:footer><p>版權所有 ? 2024</p></template>
</BaseLayout>

?v-slot還可以接收prop，用于在插槽內容中動態傳遞數據。

比如有一個ListComponent組件，它渲染一個列表，并允許在每個列表項的插槽中接收額外的信息：

<!-- ListComponent.vue -->
<template><ul><li v-for="(item, index) in listItems" :key="index">{{ item.text }}<slot :itemData="item" name="extraInfo"></slot></li></ul>
</template>
<script>
export default {data() {return {listItems: [{ text: '項目1', extra: '額外信息1' },{ text: '項目2', extra: '額外信息2' }]};}
};
</script>

?在使用ListComponent組件時，可以這樣利用接收prop的插槽：

<ListComponent><template v-slot:extraInfo="{ itemData }"><span style="color: blue;">{{ itemData.extra }}</span></template>
</ListComponent>

?這樣，每個列表項的extra信息就會以藍色文本顯示在插槽位置。

自定義指令

全局自定義指令

全局自定義指令可以在整個 Vue 應用中使用。在main.ts文件中，通過app.directive('指令名', { /* 指令定義對象 */ })來注冊。例如：

// main.ts
import { createApp } from 'vue';
import App from './App.vue';const app = createApp(App);app.directive('globalText', {mounted(el) {el.innerHTML = '全局注冊自定義指令';}
});app.mount('#app');

?在模板中，任何組件都可以使用這個全局自定義指令：

<p v-globalText></p>

?當頁面渲染到這個<p>元素時，其內容會被替換為 “全局注冊自定義指令”。全局自定義指令常用于一些通用的 DOM 操作場景，比如添加特定的樣式、行為等，且在多個組件中都可能用到的情況。

局部自定義指令

? 局部自定義指令是在組件內部通過directives選項進行注冊的，只在當前組件及其子組件中生效。例如，在一個MyComponent.vue組件中：

<template><div><p v-componentText></p></div>
</template>
<script>
export default {directives: {componentText: {mounted(el) {el.innerHTML = '組件內注冊自定義指令';}}}
};
</script>

? 在MyComponent.vue組件的模板中，<p>元素使用v-componentText指令，當該組件渲染時，<p>元素的內容會被設置為 “組件內注冊自定義指令”。局部自定義指令適用于僅在特定組件中使用的一些特殊 DOM 操作邏輯，避免了全局指令可能帶來的命名沖突等問題，同時也增強了組件的封裝性。

實戰：制作一個便簽程序

便簽程序是一個很好的 Vue.js 模板語法實踐案例，它綜合運用了前面所學的諸多知識。

?首先，在 HTML 結構上，需要一個輸入框用于記錄信息。通過v-model指令將輸入框的值與 Vue 實例中的數據進行雙向綁定。例如

<input v-model="newNote" placeholder="輸入便簽內容">

?在 Vue 組件的data選項中定義newNote: ''，這樣用戶在輸入框中輸入的內容會實時反映在newNote變量中。

?還需要一個按鈕來生成筆記。通過v-on指令綁定點擊事件，將newNote添加到筆記列表中。假設在組件的methods中有一個addNote方法：

<button @click="addNote">添加便簽</button>

export default {data() {return {newNote: '',notes: []};},methods: {addNote() {if (this.newNote.trim()!== '') {this.notes.push(this.newNote);this.newNote = '';}}}
};

?對于展示筆記的列表，使用v-for指令遍歷notes數組，將每一條筆記渲染出來：

<ul><li v-for="(note, index) in notes" :key="index">{{ note }}<button @click="deleteNote(index)">刪除</button></li>
</ul>

?這里的deleteNote方法用于從notes數組中刪除指定索引的筆記：

methods: {// 其他方法...deleteNote(index) {this.notes.splice(index, 1);}
}

?通過這樣一個便簽程序的實現，讀者可以更深入地理解 Vue.js 模板語法中的數據綁定（如v-model）、事件監聽（如v-on）、列表渲染（如v-for）等知識在實際項目中的應用，將理論知識與實踐相結合，提升對 Vue.js 開發的掌握程度。

總結

本文深入探討了 Vue.js 模板語法相關的各個關鍵方面。

從項目的基礎架構，如清晰的目錄結構以及應用程序實例的創建與掛載，為 Vue 項目搭建起穩固的基石。Vue 組件生命周期鉤子函數為開發者提供了在不同階段執行特定邏輯的時機，極大地增強了開發的靈活性。插值與指令是 Vue.js 模板語法的核心亮點，Mustache 語法插值簡潔直觀地實現數據綁定，各類內置指令豐富了對 DOM 元素的操作手段，自定義指令又為特定需求提供了定制化解決方案。

通過便簽程序這一實戰案例，更是將所學的 Vue.js 模板語法知識融會貫通，讓讀者切實體會到如何運用這些知識來構建一個具有實際功能的應用程序。

總之，熟練掌握這些 Vue.js 模板語法內容，對于高效開發優質的 Vue 項目具有至關重要的意義，能夠幫助開發者更好地實現復雜的用戶界面交互邏輯，提升開發效率與應用質量。

喜歡就點點贊和關注一起進步吧