Event Listeners 事件監聽器
在 Vue 中，我們可以使用 v-on 指令監聽 DOM 事件：

<template>
  <button v-on:click="increment">{{ count }}</button>
</template>

由於 v-on 的使用頻率很高，Vue 提供了一個簡寫語法：

<template>
  <button @click="increment">{{ count }}</button>
</template>

在這裡，increment 是在 <script setup> 中定義的一個函式：

<script setup>
import { ref } from 'vue'

// 定義響應式狀態
const count = ref(0)

// 定義函式來更新狀態
function increment() {
  // 更新組件的狀態
  count.value++
}
</script>

在函式內，我們可以透過修改 ref 的值來更新組件的狀態。

事件處理器也可以使用內聯表達式，並透過修飾符簡化常見任務。這些細節在指南 - 事件處理中有詳細說明。

現在，我們可以試著自己實作 increment 函式，並使用 v-on 將它綁定到按鈕。

<script setup>
import { ref } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

Attribute Bindings 屬性綁定
在 Vue 中，Mustache 語法只能用於文字插值。要將屬性綁定到動態值，我們需要使用 v-bind 指令：

<template>
  <div v-bind:id="dynamicId"></div>
</template>

指令是一種特殊的屬性，以 v- 前綴開頭，屬於 Vue 的模板語法的一部分。與文字插值類似，指令的值是 JavaScript 表達式，可以訪問組件的狀態。有關 v-bind 和指令語法的完整細節，請參閱官方說明指南 - 模板語法。

冒號之後的部分（:id）是指令的「參數」。在這裡，元素的 id 屬性將與組件狀態中的 dynamicId 屬性同步。

由於 v-bind 的使用頻率很高，Vue 提供了專用的簡寫語法：

<template>
  <div :id="dynamicId"></div>
</template>

我們可以試著將動態類名綁定到 <h1>，使用 titleClass 的 ref 作為值。如果綁定正確，文字應該會變成紅色！

<script setup>
import { ref } from 'vue'

const titleClass = ref('title')
</script>

<template>
  <h1 :class="titleClass">Make me red</h1> <!-- add dynamic class binding here -->
</template>

<style>
.title {
  color: red;
}
</style>

在 Vue3 我們常看到的是 Vue 單文件元件 (SFC)。SFC 是一個可重用的、獨立的程式碼區塊，它將相關的 HTML、CSS 和 JavaScript 封裝在一起，並寫在一個 .vue 文件中。

Vue 的核心特性是聲明式渲染：使用擴展 HTML 的模板語法，我們可以根據 JavaScript 的狀態描述 HTML 應該如何呈現。當狀態發生變化時，HTML 會自動更新。

可以在狀態變化時觸發更新的狀態被認為是響應式的。我們可以使用 Vue 的 reactive() API 來聲明響應式狀態。通過 reactive() 創建的對象是 JavaScript 的 Proxy，它們的行為與普通物件相同：

SFC 版本：

import { reactive } from 'vue'

const counter = reactive({
  count: 0
})

console.log(counter.count) // 0
counter.count++

html 版本：

<script type="module">
import { createApp, ref } from 'vue'

createApp({
  setup() {
    // component logic
    // declare some reactive state here.

    return {
      // exposed to template
    }
  }
}).mount('#app')
</script>

<div id="app">
  <h1>Make me dynamic!</h1>
</div>

reactive() 只能作用於物件（包括陣列和內建類型如 Map 和 Set）。另一方面，ref() 可以接受任何類型的值並創建一物件，其內部值通過 .value 屬性暴露出來：

import { ref } from 'vue'

const message = ref('Hello World!')

console.log(message.value) // "Hello World!"
message.value = 'Changed'

有關 reactive() 和 ref() 的更多細節，可以參考官方教學指南 - 響應式基礎。

在組件的 <script setup> 區塊中聲明的響應式狀態可以直接在模板中使用。我們可以基於 counter 對象和 message 的值，使用 Mustache 語法渲染動態文字：

<template>
  <h1>{{ message }}</h1>
  <p>Count is: {{ counter.count }}</p>
</template>

注意，當在模板中訪問 message 的 ref 值時，我們不需要使用 .value：它會自動取值，以提供更簡潔的用法。

Mustache {{ }} 中的內容不限於標識符或路徑 —— 我們可以使用任何有效的 JavaScript 表達式：

<template>
  <h1>{{ message.split('').reverse().join('') }}</h1>
</template>

現在，試著自己創建一些響應式狀態，並使用它來為模板中的 <h1> 渲染動態文本內容吧！

<script setup>
import { reactive, ref } from 'vue'

const counter = reactive({ count: 0 })
const message = ref('Hello World!')
</script>

<template>
  <h1>{{ message }}</h1>
  <p>Count is: {{ counter.count }}</p>
</template>

總結​

Vue.js 3 提供了更好的性能、更靈活的 API 和更簡潔的開發體驗。無論是使用 Composition API 還是 Options API，都能快速上手並構建強大的前端應用。

根據官方文件的說明，一般來說 Vue 元件可以用兩種不同的 API 風格來撰寫：Options API 和 Composition API。

Options API

使用 Options API 時，我們透過一個包含 data、methods 和 mounted 等選項的物件來定義元件邏輯。選項中定義的屬性會在函式內透過 this 曝露，this 指向的是元件實例。

<script>
export default {
  // 從 data() 返回的屬性成為響應式狀態，
  // 並會透過 `this` 曝露。
  data() {
    return {
      count: 0
    }
  },

  // Methods 是變更狀態並觸發更新的函式，
  // 可作為模板中的事件處理程序綁定。
  methods: {
    increment() {
      this.count++
    }
  },

  // 生命週期鉤子會在組件的不同階段被調用。
  // 此函式會在組件掛載時調用。
  mounted() {
    console.log(`初始計數值為 ${this.count}。`)
  }
}
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

Composition API

使用 Composition API 時，我們透過導入的 API 函式來定義組件邏輯。在單文件組件 (SFC) 中，Composition API 通常搭配 <script setup> 使用。setup 屬性是一個提示，它讓 Vue 執行編譯時轉換，從而減少樣板代碼。舉例來說，在 <script setup> 中宣告的導入、第一層變數和函式可直接用於模板中。

以下是相同的組件，模板保持不變，但改用 Composition API 和 <script setup>：

<script setup>
import { ref, onMounted } from 'vue'

// 響應式狀態
const count = ref(0)

// 改變狀態並觸發更新的函式
function increment() {
  count.value++
}

// 生命週期鉤子
onMounted(() => {
  console.log(`初始計數值為 ${count.value}。`)
})
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

該選擇哪種風格？

這兩種 API 風格都能滿足常見的使用場景。它們是基於相同底層系統的不同介面。實際上，Options API 是基於 Composition API 實現的！Vue 的核心概念和知識在兩種風格中是共通的。

1. Options API

   • 圍繞「組件實例」（如範例中的 this）進行設計，對於來自 OOP 語言背景的使用者，這種風格通常更符合以類為基礎的思維模型。
   • 初學者友好，通過選項分組的方式隱藏了響應式細節，簡化程式碼組織。

2. Composition API

   • 在函式作用域中直接宣告響應式狀態變數，並透過組合多個函式來管理複雜性。
   • 更加靈活，但需要對 Vue 的響應式機制有深入理解才能有效使用。
   • 適合組織和重用邏輯的更強大模式。

學習上的建議

• 新手學習：選擇對您來說更容易理解的風格。大多數核心概念在兩種風格中是共通的，您之後可以再學習另一種風格。
• 生產使用：
  • 如果不使用建構工具，或計畫主要用於低複雜度場景（如漸進式增強），建議使用 Options API。
  • 如果計畫使用 Vue 構建完整應用，建議使用 Composition API + 單文件組件。

在學習階段，我們也不需要僅限於某一種風格。可以根據適合的情境使用適合的 API 風格。