前言

暑假因為實習而接觸到了 Vue 這個前端框架，剛好趁著這次鐵人賽，想整理這兩個月所學習到的知識和大家分享。

在這個系列中，我們將從 Vue 的基本觀念開始逐步深入。希望透過這系列的文章，除了能幫助大家理解 Vue 的運作原理，還能讓大家透過實作學會一些實用的技能，應用於實際專案中。接下來就讓我們一起開始這個 Vue 之旅吧！

Vue.js 簡介

Vue（音同view）是一套以 JavaScript 延伸的漸進式框架，有著輕量級、簡單易學、組件化等特性。若已熟悉 HTML，CSS 及 JavaScript，更是一套很好上手的框架，因此非常適合初學者和中小型項目的開發。

接下來，我將會和大家介紹一些 Vue 的重要概念，包括漸進式框架、宣告式渲染及 MVVM 架構，將有助於更深入地理解 Vue 的核心原理。

漸進式框架

漸進式框架（Progressive Framework）是一種軟體開發框架或庫的設計理念，目的在讓開發者能夠根據項目的需求和規模選擇性地引入功能和功能模組，而不需要一次性引入全部功能。這種方法使開發過程更靈活，讓開發團隊能夠根據具體需求逐步擴展和定制應用程序。

Vue 的核心是將資料呈現在畫面上，允許使用者逐步使用其功能，無需一次性引入整個框架。因此可以選擇性地使用 Vue 的特性，例如數據綁定、組件化、路由管理和狀態管理。

宣告式渲染

宣告式渲染 vs. 指令式渲染：

• 宣告式渲染是一種用於描述應用程序界面的方式，只需宣告想要的結果，而不必關心如何實現它。
• 指令式渲染則是一種需要明確指定每個步驟的方式，需要控制每個 DOM 元素的創建、更新和刪除。

Vue.js 使用了宣告式渲染，提供了 v-for、v-if、v-model 等指令，使得開發者能夠以更直觀、更易於理解的方式來構建 Web 應用程序，同時讓數據和界面保持同步，減少了手動操作 DOM 的需求，提高了開發效率。

MVVM架構

MVVM為Model-View-ViewModel的簡稱，分別的工作內容為：

• Model（模型）負責處理數據的讀取、寫入、驗證和操作
• View（視圖）負責顯示數據給用戶，並接收用戶的輸入
• ViewModel（視圖模型）負責將Model中的數據轉換為View可以顯示的格式，並處理View中的用戶界面交互
  

圖片來源：https://012.vuejs.org/guide/

Vue.js 將 MVVM 數據綁定和可組合的組件系統結合在一起，使得開發現代 Web 應用程序變得更加簡單、高效且可維護。開發人員可以通過使用 Vue 的簡單 API，快速構建具有豐富用戶界面的應用程序。

結語

今天先讓大家認識 Vue 這個框架的核心概念，接下來幾天會繼續介紹 Vue 的基礎觀念及相關指令，讓大家更熟悉如何使用這個強大的工具！