Vue.js 簡介

Jia-Yin2025年4月8日大约 1 分鐘

學習目標

了解 Vue.js 的基本概念與核心功能
學會使用 Vue 進行宣告式渲染
理解 Vue 的響應式原理
掌握單文件組件(SFC)的基本使用
比較 Options API 與 Composition API 的差異

教學錄影

核心概念

1. Vue 是什麼？

Vue (發音類似"view")是一個用於構建用戶界面的 JavaScript 框架。它基於標準 HTML、CSS 和 JavaScript，並提供：

宣告式渲染：使用模板語法描述 HTML 輸出
響應式：自動追蹤 JavaScript 狀態變化並更新 DOM

2. 宣告式渲染

Vue 擴展了標準 HTML，讓你可以直接將數據綁定到 DOM：

<div id="app">
  <button @click="count++">點擊次數: {{ count }}</button>
</div>

import { createApp } from "vue"

createApp({
  data() {
    return {
      count: 0,
    }
  },
}).mount("#app")

3. 單文件組件(SFC)

Vue 組件將邏輯、模板和樣式封裝在單一.vue 文件中：

<script>
export default {
  data() {
    return {
      count: 0,
    }
  },
}
</script>

<template>
  <button @click="count++">點擊次數: {{ count }}</button>
</template>

<style scoped>
button {
  font-weight: bold;
}
</style>

4. API 風格比較

Vue 提供兩種編寫組件的方式：

Options API (選項式 API):

<script>
export default {
  data() {
    return { count: 0 }
  },
  methods: {
    increment() {
      this.count++
    },
  },
}
</script>

Composition API (組合式 API):

<script setup>
import { ref } from "vue"
const count = ref(0)
function increment() {
  count.value++
}
</script>