Vue.js 介紹 - 漸進式 JavaScript 框架入門指南

深入了解 Vue.js 的核心概念、特色與優勢，從基礎語法到實際應用，適合初學者的完整入門教學。

Mike Lin

@zenzenlin

一個優秀的 JavaScript 框架

➤ 以往只有 HTML、CSS、Javascript 時有什麼問題？

難以維護
專案結構龐大時 HTML、CSS、Javascript 彼此之間的設計、邏輯、維護難度會成幾何式上升，各式各樣的邏輯都集中在 Javascript 裡面，導致程式可讀性非常低
效能低落
透過 Javascript 頻繁操作 DOM 元素，會不斷觸發 Reflow & Repaint 的流程，而頁面重複渲染的過程會消耗大量效能，造成網頁體驗極差

➤ 框架的優勢

資料與 UI 分離
過去 Javascript 要動態的去更新 DOM 來動態塞入、移除資料，但框架透過與資料的雙向綁定，讓我們可以更專注在處理資料的邏輯面
模組化的 UI
一個網站會有許多重複出現的元素(按鈕、表單、表格…)，在框架中可以將這些常用的元素組合設計成單一個 component，要使用時再根據實際需求傳入資料或參數，大幅提升理解與維護的任務
更好的效能
採用 Virtual DOM 的概念，每當資料變動時會先計算好要變動的地方再一次做真實節點的處理，藉此避免無意義的變更，並且重複使用已存在的 DOM 元素

Vue 是

Vue (發音類似 view) 是一個用來方便打造前端畫面的 JavaScript 框架。提供了一系列高度整合封裝的 API，幫助我們高效地開發前端界面。

下面是一個基本的範例：

app.js

Usage.vue

Preview

import { createApp, ref } from 'vue'

createApp({
  setup() {
    return {
      count: ref(0)
    }
  }
}).mount('#app')

上面的例子展示了 Vue 的兩個核心功能：

聲明式渲染：Vue 擁有自己的一套模板語法，我們可以聲明式地描述最終輸出的 HTML 和 JavaScript 狀態之間的關係
響應式：Vue 會自動追蹤 JavaScript 狀態並在其發生變化時響應式地更新用到該資料的 DOM

漸進式

Vue 除了作為框架，也發展出一個生態，覆蓋了大部分前端開發常見的需求，可以透過其生態系，完成你的開發。Vue 注重靈活性和“可以被逐步集成”。根據需求可以採用不同的方式使用，像是常見的 單頁應用(SPA)、伺服器渲染(SSR)、靜態站點生成(SSG)，甚至 Web Components。

單文件元件

使用 Vue 開發時，大多時候是使用一種類似 HTML 格式來編寫 Vue 元件，稱為單文件元件 (*.vue 檔，Single-File Components，縮寫為 SFC)。這個單文件元件會將一個元件的邏輯 (JavaScript)，模板 (HTML) 和 樣式 (CSS) 封裝在同一個文件裡。