VueJS 教學：Vue.js 入門

Hello, 有志於網頁開發的您！我很高興能夠成為您進入 Vue.js 世界的導遊。作為一個教了十多年計算機科學的人，我可以告訴您，Vue.js 是目前最適合初學者的框架之一。那麼，我們一起來創造一些魔法吧！

VueJS - Home

Vue.js 是什麼？

Vue.js 是一個進步的 JavaScript 框架，用於建立用戶界面。但是這用白話來說是什麼意思呢？想像一下你正在蓋房子。Vue.js 就像是一套預製的牆壁和房間，你可以輕鬆地組合它們來創造你的夢想之家。它讓建立複雜的網頁應用程序變得像組裝樂高積木一樣簡單！

為什麼選擇 Vue.js？

容易學習
灵活且可擴展
出色性能
精彩的社群支持

預備知識

在我們開始之前，讓我們確保我們已經有了所需的一切：

HTML 和 CSS 的基本理解
熟悉 JavaScript（如果你不是專家也沒關係！）
一個現代的網頁瀏覽器（我推薦 Chrome 或 Firefox）
一個文本編輯器（VS Code 是我個人的最愛）

創建你的第一個 Vue.js 專案

讓我們從創建一個簡單的 "Hello, Vue!" 應用程序開始。首先，我們需要在專案中引入 Vue.js。我們可以通过在 HTML 文件中添加一個 script 標籤來做到這點。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>
new Vue({
el: '#app',
data: {
message: 'Hello, Vue!'
}
})
</script>
</body>
</html>

讓我們來解析一下：

我們使用 CDN 链接引入 Vue.js 库。
我們創建一個 id 為 "app" 的 <div>。這就是我們 Vue 應用程序將存在的地方。
在 <div> 內部，我們使用 {{ message }}。這被稱為插值，我們用它來在 Vue 中顯示數據。
在我們的 <script> 標籤中，我們創建一個新的 Vue 实例，告訴它目標是 id 為 "app" 的元素。
我們定義一個 data 对象，其中有一個 message 属性。這是 Vue 在我們應用程序中將使用的數據。

如果你保存這個文件並在瀏覽器中打開它，你应该會看到 "Hello, Vue!" 顯示在頁面上。恭喜你！你已經創建了你的第一個 Vue.js 應用程序！

Vue 指令：讓事物更具互動性

現在我們已經掌握了基礎知識，讓我們讓應用程序更具互動性。Vue 提供了我們指令 - 特殊的屬性，它們給 Vue 提供了行為指導。讓我們看看一些常見的指令：

v-model：雙向數據綁定

v-model 在表單輸入和應用程序狀態之間建立了雙向绑定。讓我們更新我們的應用程序以包含一個輸入字段：

<div id="app">
<input v-model="message">
<p>消息是：{{ message }}</p>
</div>

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

現在，當你在輸入字段中輸入時，你會看到消息實時更新。這就像魔法一樣，不是嗎？

v-if 和 v-else：條件渲染

有時我們想根據條件來顯示或隱藏元素。這時 v-if 和 v-else 就派上用場了：

<div id="app">
<button @click="toggleVisibility">切換消息</button>
<p v-if="isVisible">現在你看得到我！</p>
<p v-else>現在你看不到我！</p>
</div>

<script>
new Vue({
el: '#app',
data: {
isVisible: true
},
methods: {
toggleVisibility() {
this.isVisible = !this.isVisible
}
}
})
</script>

在這個例子中，我們使用 v-if 和 v-else 在兩個消息之間切換。@click 指令是 v-on:click 的簡寫，它聽取點擊事件。

v-for：列表渲染

當我們需要顯示一個項目列表時，v-for 是我們的首選指令：

<div id="app">
<ul>
<li v-for="fruit in fruits">{{ fruit }}</li>
</ul>
</div>

<script>
new Vue({
el: '#app',
data: {
fruits: ['蘋果', '香蕉', '櫻桃', '榴蓮']
}
})
</script>

這將渲染一個水果列表。就是這麼簡單！

Vue 方法

方法是我們可以添加到 Vue 实例中以增加行為的函數。讓我們創建一個簡單的計數器：

<div id="app">
<p>計數：{{ count }}</p>
<button @click="increment">增加</button>
<button @click="decrement">減少</button>
</div>

<script>
new Vue({
el: '#app',
data: {
count: 0
},
methods: {
increment() {
this.count++
},
decrement() {
this.count--
}
}
})
</script>

在這裡，我們定義了兩個方法：increment 和 decrement。當相應的按鈕被點擊時，這些方法會被調用，更新我們的 count 數據屬性。

計算屬性：智能計算

計算屬性就像是超強大的數據屬性。它們可以進行複雜的計算，並根據它們的依賴關係進行緩存。讓我們看一個例子：

<div id="app">
<input v-model="firstName">
<input v-model="lastName">
<p>全名：{{ fullName }}</p>
</div>

<script>
new Vue({
el: '#app',
data: {
firstName: '',
lastName: ''
},
computed: {
fullName() {
return this.firstName + ' ' + this.lastName
}
}
})
</script>

在這裡，fullName 是一個計算屬性，它將 firstName 和 lastName 組合起來。當它的任何依賴關係發生變化時，它會自動更新。

Vue 方法的總結

這裡是一個我們已經介紹的 Vue.js 方法的總結表：

方法	描述	示例
data	持有 Vue 实例的數據	`data: { message: 'Hello' }`
methods	包含用於添加行為的函數	`methods: { greet() { alert('Hi!') } }`
computed	基於依賴關係緩存的屬性，當依賴關係變化時更新	`computed: { fullName() { return this.firstName + ' ' + this.lastName } }`
el	指定要挂载 Vue 实例的元素	`el: '#app'`

總結

恭喜你！你已經踏出了進入 Vue.js 奇妙世界的第一步。我們已經介紹了創建 Vue 实例的基本知識，使用指令來增加互動性，以及使用方法和計算屬性來添加行為。

記住，學習編程就像學習一門新語言 - 它需要練習和耐心。如果一切不會立即明朗，請不要氣餒。持續實驗，持續建造，最重要的是，樂在其中！

在我們的下一課中，我們將深入探討组件，這是構建大型 Vue 應用程序的積木。在此之前，祝你編程愉快！

Credits: Image by storyset

下一教程:

VueJS - 概覽