第 1 課：介紹 Vue.js - 漸進式框架

Vue.js 和 Nuxt：從基礎到高級

第 1 部分：Vue.js 基礎知識

亞洲開發網

1.什麼是Vue.js？

Vue.js 就是其中之一 漸進框架 用於建立使用者介面。 「漸進」意味著您可以從簡單開始，然後逐漸擴展——從一個小型庫到 Nuxt 的全端框架。

特點	維埃	反應	角	斯韋爾特
類型	進步的	圖書館	完整框架	編譯器
反應性	基於代理	虛擬DOM	區域.js	編譯時
範本	基於 HTML	JSX	HTML + 指令	類似 HTML
狀態	松屬	Redux/Zustand	RxJS/NGRx	商店
固態繼電器	努克斯特	Next.js	角度通用	苗條套件
學習曲線	簡單	平均	困難	簡單

2. Vite設定

# Tạo project Vue + TypeScript
npm create vue@latest my-app

# Options:
# ✔ TypeScript? Yes
# ✔ JSX Support? No
# ✔ Vue Router? Yes
# ✔ Pinia? Yes
# ✔ Vitest? Yes
# ✔ ESLint? Yes
# ✔ Prettier? Yes

cd my-app
npm install
npm run dev

3. 單一檔案元件（SFC）

<!-- HelloWorld.vue -->
<script setup lang="ts">
import { ref } from 'vue'

const message = ref('Xin chào Vue.js!')
const count = ref(0)

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

<template>
  <div class="container">
    <h1>{{ message }}</h1>
    <p>Count: {{ count }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

<style scoped>
.container {
  padding: 1rem;
}
button {
  padding: 0.5rem 1rem;
  cursor: pointer;
}
</style>

4. 模板語法

<template>
  <!-- Text interpolation -->
  <p>{{ message }}</p>
  <p>{{ count * 2 }}</p>

  <!-- Attribute binding -->
  <a :href="url">Link</a>
  <img :src="imageUrl" :alt="title" />

  <!-- Event handling -->
  <button @click="handleClick">Click</button>
  <button @click="count++">+1</button>
  <input @keydown.enter="submit" />

  <!-- Two-way binding -->
  <input v-model="name" />
  <p>Xin chào, {{ name }}!</p>

  <!-- Conditional rendering -->
  <p v-if="count > 10">Lớn hơn 10</p>
  <p v-else-if="count > 5">Lớn hơn 5</p>
  <p v-else>Nhỏ hơn hoặc bằng 5</p>

  <!-- List rendering -->
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.name }}
    </li>
  </ul>
</template>

5.Vue開發工具

安裝 Vue 開發工具 Chrome/Firefox 上的調試擴充功能：

• 查看組件樹和狀態
• 追蹤 Pinia 商店
• 檢查 Vue 路由器
• 時間軸事件
• 性能分析

六、項目結構

my-app/
├── src/
│   ├── assets/         # Static assets
│   ├── components/     # Reusable components
│   ├── composables/    # Custom composables
│   ├── layouts/        # Layout components
│   ├── pages/          # Page components (if using vue-router)
│   ├── router/         # Vue Router config
│   ├── stores/         # Pinia stores
│   ├── types/          # TypeScript types
│   ├── App.vue         # Root component
│   └── main.ts         # Entry point
├── public/             # Static files
├── index.html
├── vite.config.ts
└── tsconfig.json

下一篇： 反應系統和成分 API — 參考、反應、計算、觀察。