VueJS - 實例

你好，有志於網頁開發的夢想者們！今天，我們將要進入 Vue.js 實例的奇妙世界。別擔心你對編程還是新手——我會一步步引導你，就像這些年來我對無數學生所做的一樣。所以，來一杯咖啡（或者如果你喜歡，來一杯茶），我們開始吧！

VueJS - Instances

Vue 實例是什麼？

在我們進入代碼之前，讓我們先了解一下 Vue 實例是什麼。想像你正在蓋一個房子。Vue 實例就像是這個房子的基礎——一切從這裡開始。它是控制你的整個 Vue 應用程序的核心。

語法

創建一個 Vue 實例非常直接。這裡是基本的語法：

new Vue({
// options
})

就是這麼簡單！我們使用 new 關鍵字，然後是 Vue()，並在括號內傳遞一個含有各種選項的對象。這些選項就像是我們房子的設計圖——它們告訴 Vue 我們希望應用程序如何運行。

你的第一個 Vue 實例

讓我們一起創建我們的第一個 Vue 實例。別擔心你一下子不能理解所有東西——我們會一點一滴解析。

示例 1

<!DOCTYPE html>
<html>
<head>
<title>我的第一個 Vue App</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>

<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello, Vue!'
}
})
</script>
</body>
</html>

輸出

Hello, Vue!

現在，讓我們分解這個過程：

我們在 HTML 文件中包含了 Vue.js 的庫。
我們創建了一個 id 為 "app" 的 <div>。這是我們 Vue 應用程序將存在的地方。
在 <div> 內，我們使用 {{ message }}。這叫做插值——這是我們如何在 Vue 中顯示數據。
在我們的 <script> 標籤中，我們創建了一個新的 Vue 實例。
我們使用 el: '#app' 來告訴 Vue 它應該控制哪個元素（我們 id 為 "app" 的 div）。
在 data 對象中，我們定義了一個 message 屬性，並將其值設為 'Hello, Vue!'。

當 Vue 在我們的 HTML 中看到 {{ message }} 時，它會用我們數據中的 message 值來替換它。神奇，對吧？

數據和方法

Vue 實例不僅可以包含數據，它們還可以包含方法——可以執行操作或計算的函數。

示例 2

<!DOCTYPE html>
<html>
<head>
<title>Vue 方法示例</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反轉信息</button>
</div>

<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello, Vue!'
},
methods: {
reverseMessage: function() {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
</body>
</html>

輸出

最初，你會看到 "Hello, Vue!" 和一個按鈕。當你點擊按鈕時，信息會反轉為 "!euV ,olleH"。

在這個示例中：

我們添加了一個按鈕，並使用 v-on:click="reverseMessage"。這告訴 Vue 在按鈕被點擊時調用 reverseMessage 方法。
在我們的 Vue 實例中，我們添加了一個 methods 對象，並包含了一個 reverseMessage 函數。
函數將信息拆分成字符數組，將其反轉，然後重新組合成字符串。
我們使用 this.message 來訪問和修改 message 數據屬性。

生命周期鉤子

Vue 實例有一個生命周期——它被創建、挂载到 DOM、更新，最終被銷毀。Vue 提供了鉤子，讓你可以在這個生命周期的特定階段運行代碼。

示例

<!DOCTYPE html>
<html>
<head>
<title>Vue 生命周期鉤子</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>

<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello, Vue!'
},
created: function() {
console.log('Vue 實例已創建！')
},
mounted: function() {
console.log('Vue 實例已挂载到 DOM！')
this.message = '歡迎來到 Vue!'
}
})
</script>
</body>
</html>

輸出

在瀏覽器中，你會看到 "Welcome to Vue!"。在控制台，你會看到兩條消息：

Vue instance created!
Vue instance mounted to the DOM!

這裡發生了什麼：

created 鉤子在 Vue 實例被創建時運行。我們在控制台輸出了一条消息。
mounted 鉤子在 Vue 實例挂载到 DOM 時運行。我們輸出另一條消息並更改 message 數據屬性。

這些鉤子對於在應用程序生命周期的特定點運行代碼非常有用。

Vue 實例屬性和方法

Vue 實例還帶有內置的屬性和方法。讓我們看一些：

示例

<!DOCTYPE html>
<html>
<head>
<title>Vue 實例屬性和方法</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<button v-on:click="updateMessage">更新信息</button>
</div>

<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello, Vue!'
},
methods: {
updateMessage: function() {
this.$data.message = '信息已更新！'
console.log(this.$el)
this.$nextTick(function() {
console.log('DOM 已更新！')
})
}
}
})

console.log(app.$data)
</script>
</body>
</html>

在這個示例中：

我們使用 this.$data 直接訪問數據對象。
我們使用 this.$el 輸出 Vue 實例的根 DOM 元素。
我們使用 this.$nextTick 在 DOM 更新後運行一個函數。
在 Vue 實例外部，我們可以使用 app.$data 訪問其屬性。

以下是一些常見的 Vue 實例屬性和方法的表格：

屬性/方法	描述
$data	Vue 實例正在觀察的數據對象
$el	Vue 實例管理的元素
$watch	觀察 Vue 實例的屬性變化
$set	在對象上設置屬性，觸發視圖更新
$nextTick	延遲調用，直到下一次 DOM 更新周期

記住，這些只是幾個例子。Vue.js 有許多其他功能和能力，我們將在將來的課程中探索。

希望這個對 Vue 實例的介紹對你有幫助！記住，學習編程就像學習一門新語言——它需要時間和練習。如果你不能立即理解所有內容，不要氣餒。繼續實驗，繼續編碼，最重要的是，享受樂趣！在下一課見！

Credits: Image by storyset