點擊上方的語言選單以切換語言

HTML 與 Vue 的結構差異說明（含四種架構示意圖）

前言

傳統 HTML 是單一靜態檔案，而 Vue 採用「組件化 (Component-based)」的動態架構。 Vue 又可分為兩種主要開發形式：多檔案的標準專案架構，以及單一檔案的 Vue 組件（SFC）。

一、HTML：單檔式靜態結構

傳統 HTML 把所有內容都放在同一個檔案中，簡單但不易維護。

▲ 傳統 HTML：所有內容集中在單一檔案中。

二、Vue 專案：組件化、多檔結構

Vue 將畫面切成多個「組件 (Component)」，每個組件有自己的 <template>、<script>、<style> 區塊。

▲ Vue 標準專案架構：App.vue 為主組件，下方有多個子組件。

三、單檔 Vue 組件（Single File Component, SFC）

Vue 也能以「單一檔案」的方式存在，即一個 .vue 檔中同時包含 HTML、CSS、與 JavaScript，方便快速展示或教學使用。

▲ 單檔 Vue 組件 (SFC)：結構、邏輯與樣式集中於同一檔案。

在單頁應用 (SPA) 架構中，傳統的 <a href="#id"> 行為會被 Vue Router 劫持，用於處理路由，而非簡單的頁面內跳轉。這要求必須使用程式碼（如 scrollIntoView() 或 Vue Router 的 scrollBehavior）來手動處理滾動。

功能	傳統 HTML 行為	Vue SPA 行為 (需解決)
錨點跳轉	使用 `<a href="#ID">`，瀏覽器原生支持，自動滾動。	`#ID` 被 Vue Router 視為路由 Hash；需要透過 Vue 方法 (如 `scrollIntoView()`) 或 Router 配置手動實現滾動。

🛠️ Vue 中錨點跳轉的實作範例

在 Vue 組件中，需移除 href="#ID"，改用 @click 呼叫方法來驅動滾動。


// 1. 在 Template 中綁定點擊事件
<span @click="scrollTo('target-id')">跳轉到目標區塊</span>

// 2. 在 Script 中定義滾動方法
<script setup>
import { nextTick } from 'vue';

const scrollTo = (id) => {
  // nextTick 確保 DOM 已經準備好
  nextTick(() => {
    const targetElement = document.getElementById(id);
    if (targetElement) {
      targetElement.scrollIntoView({
        behavior: 'smooth', // 啟用平滑滾動
        block: 'start'
      });
    }
  });
};
</script>

五、三種開發模式比較（已更新錨點導航）

類型	檔案結構	錨點導航	特性	適用情境
傳統 HTML	單一檔案	原生支持 (`href="#ID"`)	靜態、簡單、無狀態綁定	靜態頁面、簡單展示
Vue 標準專案	多檔案（App.vue + main.js + components）	需程式碼實現 (Router 或 JS)	模組化、支援 reactivity、維護性高	正式開發專案
單檔 Vue 組件 (SFC)	單一 .vue 檔	需程式碼實現 (JS)	簡潔、可展示、支援 Vue 語法	教學、範例、Demo

✅ 總結：
- HTML 是靜態文件導向，強調結構；
- Vue 標準專案 是組件化開發，強調模組化與資料驅動；
- 單檔 Vue 組件 則是簡化版的 Vue，用於快速展示與教學。