VueJS - 反應式介面：初學者指南

你好，未來的 Vue.js 超級巨星！我很高興能成為您進入 Vue.js 反應式介面世界的導遊。作為一個教編程多年的老師，我可以向您保證，Vue.js 是最適合初學者的框架之一。所以，請繫好安全帶，我們一起來探索吧！

VueJS - Reactive Interface

什麼是反應式介面？

在我們深入細節之前，讓我們先了解所謂的「反應式介面」是什麼意思。想像一下你正在玩一個當你按下按鈕時會亮起來的豪華玩具。那就是反應性的實際應用！在網頁開發的世界裡，反應式介面指的是當底層數據改變時，會自動更新的介面。酷炫吧？

Vue.js 讓創建反應式介面變得非常簡單。這就像有個神奇的助手，不需要你手動刷新所有內容，就能讓你的網頁保持最新狀態。讓我們來看看它是如何工作的！

Vue.js 基础：創建一個反應式應用

首先，讓我們創建一個簡單的 Vue.js 應用程序，看看反應性是如何工作的。別擔心，如果你現在還不能完全理解 - 我們會一步步解析。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一個 Vue 應用程序</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
<button @click="changeMessage">改變訊息</button>
</div>

<script>
new Vue({
el: '#app',
data: {
message: '你好，Vue!'
},
methods: {
changeMessage() {
this.message = 'Vue 真的很棒！'
}
}
})
</script>
</body>
</html>

讓我們分解這段代碼：

我們在 HTML 文件中引入 Vue.js 庫。
我們創建一個 ID 為 "app" 的 div - 這是我們 Vue 應用程序將要存在的位置。
在 div 內部，我們有一個顯示 {{ message }} 的 h1 和一個按鈕。
在我們的 JavaScript 中，我們創建一個新的 Vue 實例，告訴它控制 ID 為 "app" 的元素，並給它一些數據和方法。

當你運行這段代碼時，你會看到屏幕上顯示 "你好，Vue!"。點擊按鈕，就像魔法一樣，它會變成 "Vue 真的很棒！" 而你不需要做任何事情。這就是 Vue 反應性的力量！

深入探討：Vue.set 和 Vue.delete

現在我們已經濕了腳，讓我們來探討 Vue 反應性系統中的兩個重要方法：Vue.set 和 Vue.delete。

Vue.set

Vue.set 就像是你 Vue 應用程序的一個特別送餐服務。當你想要添加一個新屬性到對象中或修改數組中的一個元素，並且讓 Vue 認識到這個變化並相應更新視圖時，會使用它。

讓我們看一個例子：

<div id="app">
<ul>
<li v-for="item in items">{{ item }}</li>
</ul>
<button @click="addItem">添加項目</button>
</div>

<script>
new Vue({
el: '#app',
data: {
items: ['蘋果', '香蕉', '櫻桃']
},
methods: {
addItem() {
// 這樣不會按預期工作：
// this.items[3] = '棗'

// 相反，使用 Vue.set：
Vue.set(this.items, 3, '棗')
}
}
})
</script>

在這個例子中，如果我們試著使用 this.items[3] = '棗' 添加一個新項目到數組中，Vue 會檢測不到變化，視圖也不會更新。但當我們使用 Vue.set，Vue 就知道更新視圖以顯示新項目。

Vue.delete

Vue.delete 就像是一個神奇的橡皮擦，它會以觸發視圖更新方式從對象中刪除一個屬性或從數組中刪除一個元素。

下面是如何使用它的例子：

<div id="app">
<ul>
<li v-for="(item, index) in items">
{{ item }}
<button @click="removeItem(index)">移除</button>
</li>
</ul>
</div>

<script>
new Vue({
el: '#app',
data: {
items: ['蘋果', '香蕉', '櫻桃']
},
methods: {
removeItem(index) {
Vue.delete(this.items, index)
}
}
})
</script>

在這個例子中，點擊項目旁邊的 "移除" 按鈕會將其從列表中刪除，Vue 會自動更新視圖。

方法表

這裡是一個方便的表格，總結了我們討論過的方法：

方法	目的	語法
Vue.set	向對象添加新屬性或修改數組元素	`Vue.set(對象, 鍵, 值)` 或 `Vue.set(數組, 索引, 值)`
Vue.delete	從對象中刪除屬性或從數組中刪除元素	`Vue.delete(對象, 鍵)` 或 `Vue.delete(數組, 索引)`

結論

恭喜你！你已經踏入了 Vue.js 和反應式介面的奇妙世界。我們已經介紹了反應性的基礎，創建了一個簡單的反應式應用程序，並探討了 Vue.set 和 Vue.delete。

記住，學習編程就像學騎自行車一樣 - 起初可能會有些晃動，但隨著練習，你會很快馳騁。持續實驗，持續編碼，最重要的是，玩得開心！

在我多年的教學經驗中，我見過無數學生從完全的初學者變成自信的开发者。現在，你也走上了同樣令人興奮的道路。所以，請繼續玩轉這些例子，修改它們，破壞它們，並從中學習。這是真正理解和掌握 Vue.js 的最好方式。

編程愉快，未來的 Vue.js 專家！

Credits: Image by storyset

上一教程:

VueJS - 渲染函數