Vue 3 聲明式渲染語法指南
本文將詳細介紹 Vue 3 中的聲明式渲染語法，涵蓋所有核心概念，并通過一個完整的案例代碼進行演示。案例代碼中包含詳細注釋，幫助初學者更好地理解每個部分的功能和用法。
目錄
- 簡介
- 聲明式渲染基礎
- 文本插值
- 屬性綁定
- 使用 JavaScript 表達式
- 指令
v-bindv-onv-modelv-if,v-else-if,v-elsev-forv-show
- 計算屬性和偵聽器
- 計算屬性
- 偵聽器
- 案例代碼：簡單的待辦事項應用
- 項目結構
- 完整代碼
- 總結
簡介
Vue 3 是一個用于構建用戶界面的漸進式 JavaScript 框架。它采用聲明式渲染，使得開發者能夠以簡潔、直觀的方式描述 UI 的狀態和變化。本文將介紹 Vue 3 中聲明式渲染的核心語法，并通過一個實際的案例幫助理解。
聲明式渲染基礎
文本插值
使用雙大括號 {{ }} 可以將數據綁定到模板中的文本節點。
<template><div><p>你好，{{ username }}！</p></div>
</template><script>
export default {data() {return {username: 'Vue 開發者'};}
};
</script>
屬性綁定
使用 v-bind 指令（或其簡寫 :）將數據綁定到 HTML 屬性上。
<template><div><img v-bind:src="imageUrl" alt="Vue Logo"><!-- 簡寫 --><img :src="imageUrl" alt="Vue Logo"></div>
</template><script>
export default {data() {return {imageUrl: 'https://vuejs.org/images/logo.png'};}
};
</script>
使用 JavaScript 表達式
在模板中可以使用 JavaScript 表達式進行簡單的計算或邏輯處理。
<template><div><p>1 + 1 = {{ 1 + 1 }}</p><p>反轉后的用戶名: {{ username.split('').reverse().join('') }}</p></div>
</template><script>
export default {data() {return {username: 'Vue 開發者'};}
};
</script>
指令
v-bind
用于動態綁定 HTML 屬性或組件的 props。
<!-- 綁定屬性 -->
<a v-bind:href="url">訪問網站</a>
<!-- 簡寫 -->
<a :href="url">訪問網站</a>
v-on
用于監聽 DOM 事件。
<!-- 監聽點擊事件 -->
<button v-on:click="handleClick">點擊我</button>
<!-- 簡寫 -->
<button @click="handleClick">點擊我</button>
v-model
用于在表單控件元素或組件上創建雙向數據綁定。
<template><div><input v-model="message" placeholder="輸入內容"><p>你輸入的內容是: {{ message }}</p></div>
</template><script>
export default {data() {return {message: ''};}
};
</script>
v-if, v-else-if, v-else
根據條件渲染元素。
<template><div><p v-if="isLoggedIn">歡迎回來！</p><p v-else>請登錄。</p></div>
</template><script>
export default {data() {return {isLoggedIn: true};}
};
</script>
v-for
用于渲染列表。
<template><div><ul><li v-for="(item, index) in items" :key="index">{{ item }}</li></ul></div>
</template><script>
export default {data() {return {items: ['蘋果', '香蕉', '橘子']};}
};
</script>
v-show
根據條件顯示或隱藏元素（通過 CSS 控制顯示）。
<template><div><p v-show="isVisible">這是一個可見的段落。</p></div>
</template><script>
export default {data() {return {isVisible: true};}
};
</script>
計算屬性和偵聽器
計算屬性
計算屬性是基于它們的依賴進行緩存的，只有在相關依賴發生改變時才會重新求值。
<template><div><p>原始消息: {{ message }}</p><p>反轉后的消息: {{ reversedMessage }}</p></div>
</template><script>
export default {data() {return {message: 'Hello Vue!'};},computed: {reversedMessage() {return this.message.split('').reverse().join('');}}
};
</script>
偵聽器
偵聽器用于在數據變化時執行異步或開銷較大的操作。
<template><div><input v-model="question" placeholder="輸入問題"><p>{{ answer }}</p></div>
</template><script>
export default {data() {return {question: '',answer: '等待輸入...'};},watch: {question(newQuestion) {if (newQuestion.trim()) {this.answer = '正在思考...';// 模擬異步操作setTimeout(() => {this.answer = `你問的問題是: ${newQuestion}`;}, 2000);} else {this.answer = '等待輸入...';}}}
};
</script>
案例代碼：簡單的待辦事項應用
下面是一個簡單的待辦事項應用示例，展示了 Vue 3 的聲明式渲染語法。該應用允許用戶添加、刪除和標記待辦事項。
項目結構
src/
│
├── components/
│ └── TodoItem.vue
│
├── App.vue
│
└── main.js
完整代碼
1. main.js
// main.js
import { createApp } from 'vue';
import App from './App.vue';createApp(App).mount('#app');
2. App.vue
<!-- App.vue -->
<template><div id="app"><h1>我的待辦事項</h1><input v-model="newTodo" @keyup.enter="addTodo" placeholder="添加待辦事項" /><button @click="addTodo">添加</button><ul><TodoItemv-for="(todo, index) in todos":key="index":todo="todo"@delete="deleteTodo(index)"@toggle="toggleTodo(index)"/></ul><p>{{ remaining }} 個待辦事項未完成。</p></div>
</template><script>
import TodoItem from './components/TodoItem.vue';export default {components: {TodoItem},data() {return {newTodo: '',todos: []};},computed: {remaining() {return this.todos.filter(todo => !todo.completed).length;}},methods: {addTodo() {const trimmedTodo = this.newTodo.trim();if (trimmedTodo) {this.todos.push({ text: trimmedTodo, completed: false });this.newTodo = '';}},deleteTodo(index) {this.todos.splice(index, 1);},toggleTodo(index) {this.todos[index].completed = !this.todos[index].completed;}}
};
</script><style>
#app {font-family: Arial, sans-serif;max-width: 600px;margin: 0 auto;padding: 20px;
}
input {padding: 8px;width: 70%;margin-right: 10px;
}
button {padding: 8px;
}
ul {list-style-type: none;padding: 0;
}
li {margin: 10px 0;display: flex;align-items: center;
}
.completed {text-decoration: line-through;color: gray;
}
</style>
3. TodoItem.vue
<!-- TodoItem.vue -->
<template><li><input type="checkbox" v-model="todo.completed" @change="toggle" /><span :class="{ completed: todo.completed }">{{ todo.text }}</span><button @click="deleteItem">刪除</button></li>
</template><script>
export default {props: {todo: {type: Object,required: true}},methods: {deleteItem() {this.$emit('delete');},toggle() {this.$emit('toggle');}}
};
</script><style scoped>
.completed {text-decoration: line-through;color: gray;
}
button {margin-left: 10px;padding: 4px;
}
</style>
代碼解析
-
主應用 (
App.vue):- 數據 (
data):newTodo: 用于存儲用戶輸入的新待辦事項。todos: 存儲所有待辦事項的數組。
- 計算屬性 (
computed):remaining: 計算未完成的待辦事項數量。
- 方法 (
methods):addTodo: 添加新的待辦事項到todos數組中。deleteTodo: 刪除指定索引的待辦事項。toggleTodo: 切換指定索引的待辦事項的完成狀態。
- 模板 (
template):- 使用
v-model實現輸入框與newTodo的雙向綁定。 - 使用
@keyup.enter監聽回車鍵事件，調用addTodo方法。 - 使用
v-for指令遍歷todos數組，渲染每個待辦事項。 - 使用
v-bind動態綁定TodoItem組件的todoprop。 - 使用
@delete和@toggle監聽子組件的delete和toggle事件，調用相應的方法。 - 顯示剩余的未完成待辦事項數量。
- 使用
- 數據 (
-
子組件 (
TodoItem.vue):- Props (
props):todo: 接收單個待辦事項對象。
- 方法 (
methods):deleteItem: 觸發delete事件，通知父組件刪除當前待辦事項。toggle: 觸發toggle事件，通知父組件切換當前待辦事項的完成狀態。
- 模板 (
template):- 使用
v-model實現復選框與todo.completed的雙向綁定。 - 使用
:class動態綁定樣式類completed，根據todo.completed的值決定是否添加。 - 使用
@click監聽刪除按鈕的點擊事件，調用deleteItem方法。
- 使用
- Props (
-
樣式 (
style):- 使用 scoped 樣式，確保樣式只作用于當前組件。
.completed類用于顯示刪除線，標識已完成的待辦事項。
總結
本文詳細介紹了 Vue 3 中的聲明式渲染語法，涵蓋了文本插值、屬性綁定、指令、計算屬性和偵聽器等核心概念。通過一個簡單的待辦事項應用示例，展示了如何將這些概念應用到實際項目中。掌握這些基礎知識后，開發者可以進一步探索 Vue 3 的其他高級特性，如組件化、路由管理、狀態管理等，以構建更復雜和功能豐富的應用。
` 函數)