# 什么是 Vue.js？ Vue.js 是一款用于構建用戶界面的 JavaScript 框架。它基于標準 HTML、CSS 和 JavaScript 構建，并提供了一套聲明式的、組件化的編程模型，幫助你高效地開發用戶界面。 # Vue.js 是解決什么問題的？ 1. 頁面局部刷新，響應速度快，不需要每次加載所有的css/js。 1. 前后端分離。 1. 單頁面應用。 單頁應用的精髓是點擊任何鏈接都不會引起頁面的整體刷新，只會通過JavaScript替換頁面的局部內容。 # Vue.js 的兩個核心 * **聲明式渲染**：Vue 基于標準 HTML 拓展了一套模板語法，使得我們可以聲明式地描述最終輸出的 HTML 和 JavaScript 狀態之間的關系。 * **響應性**：Vue 會自動跟蹤 JavaScript 狀態并在其發生變化時響應式地更新 DOM。 # Vue.js 是漸進式框架 Vue 是一個框架，也是一個生態。其功能覆蓋了大部分前端開發常見的需求。但 Web 世界是十分多樣化的，不同的開發者在 Web 上構建的東西可能在形式和規模上會有很大的不同。考慮到這一點，Vue 的設計非常注重靈活性和“可以被逐步集成”這個特點。根據你的需求場景，你可以用不同的方式使用 Vue： * 無需構建步驟，漸進式增強靜態的 HTML * 在任何頁面中作為 Web Components 嵌入 * 單頁應用 (SPA) * 全棧 / 服務端渲染 (SSR) * Jamstack / 靜態站點生成 (SSG) * 開發桌面端、移動端、WebGL，甚至是命令行終端中的界面 # 單文件組件 在大多數啟用了構建工具的 Vue 項目中，我們可以使用一種類似 HTML 格式的文件來書寫 Vue 組件，它被稱為**單文件組件**(也被稱為`*.vue`文件，英文 Single-File Components，縮寫為**SFC**)。顧名思義，Vue 的單文件組件會將一個組件的邏輯 (JavaScript)，模板 (HTML) 和樣式 (CSS) 封裝在同一個文件里。下面我們將用單文件組件的格式重寫上面的計數器示例： # Vue.js 的兩種代碼方式（API風格） vue.js 3 有兩種代碼方式：Option API 和Composition API。 ## 選項式 API (Options API) 使用選項式 API，我們可以用包含多個選項的對象來描述組件的邏輯，例如`data`、`methods`和`mounted`。選項所定義的屬性都會暴露在函數內部的`this`上，它會指向當前的組件實例。 ## 組合式 API (Composition API) 通過組合式 API，我們可以使用導入的 API 函數來描述組件邏輯。在單文件組件中，組合式 API 通常會與[`<script setup>`](https://cn.vuejs.org/api/sfc-script-setup.html)搭配使用。這個`setup`attribute 是一個標識，告訴 Vue 需要在編譯時進行一些處理，讓我們可以更簡潔地使用組合式 API。比如，`<script setup>`中的導入和頂層變量/函數都能夠在模板中直接使用。 # Webpack 的安裝 npm install --save-dev webpack