Vue.js 入門前解惑篇
本篇文章將會說到 使用 Vue.js 框架的優勢，
以及它與以下關鍵字的關係 :
- Webpack
- SPA
- MVC
- 關注點分離
- MVVM
想了解這些內容，歡迎繼續瀏覽本文~
為何要選擇使用 Vue.js 作為前端開發框架?
- 直觀的語法，讓開發者輕鬆上手
- 資料和畫面雙向綁定的特性，有效減少程式碼的撰寫，讓開發者可專注在資料的管理。
- 有多樣化的延伸工具，如 Webpack、Vuex、Vue Router，可開發 SPA(Single Page Application)，同時又可以符合傳統網站需求。
什麼是 Webpack ?
Webpack 是一個開源的前端打包工具。提供了前端開發缺乏的模組化開發方式，將各種靜態資源視為模組，並從它生成最佳化過的程式碼。
簡單來說就是可以將許多不同程式語言檔案，整合成網頁中所需要的檔案。
在使用 Vue 開發時，我們會使用 Vue Cli (Vue 官方所推出的整合套件，透過 Webpack 來運行)做 ES6 的打包。同時，Webpack 也是一個很適合拿來做 SPA 的工具。
什麼是 SPA ?
SPA (Single Page Aplication) 是一種單頁式的網路應用程式，或網站的模型。
在 SPA 的概念下，當我們切換網頁時，其實是一直停留在同一個 index 頁面，透過前端來模擬後端的路由，將頁面內容替換掉。好處是，資料內容不須全部重新從伺服器取得，而是透過 Ajax 取得該頁面所需要的資料內容即可，速度會比後端路由快上許多。
Vue 框架的概念
Vue 是受到 MVVM 啟發 而生的架構。 (但並不是完全的 MVVM 架構)
在了解 MVVM 之前，我們可以先了解 MVC 架構。
什麼是 MVC ?
MVC 架構把軟體系統分為
- 模型(Model)
- 視圖(View)
- 控制器(Controller)
再加上資料庫(DB:Data Base)。
運作流程 :
- 我們所看到的網頁畫面稱為視圖(View)，它不會跟資料庫(DB)綁在一起
- 當畫面上需要呈現資料時，視圖(View)會通知控制器(Controller) 它需要哪筆資料
- 控制器(Controller)會把需求彙整後，發給模型(Model)
- 模型(Model)再跟資料庫(DB) 要資料
- 整理好之後再依序丟回給 Model、Controller、View
觀察 MVC 架構我們可以發現，資料與畫面是分開處理的，而這其實就是關注點分離的概念 。
關注點分三大重點
- 資料先定義出來
- 畫面繪製與資料處理分開執行
- 著重在資料處理的能力
這樣的概念我們可以套用在 JavaScript 以及 Vue.js 的開發上。
回頭來看什麼是 MVVM架構 ?
MVVM（Model–view–viewmodel）將軟體架構模式分為
- 模型(Model)
- 視圖(View)
- 繫結器(ViewModel)
- 模型(Model) : 資料的存取層(以資料為中心)。
- 視圖(View) : 用戶在螢幕上看到的結構、布局和外觀。
也就是說，我們在網頁畫面上看到的是 View，我們所操控的資料內容是 Model，中間負責自動綁定的就是 ViewModel。
而在撰寫程式碼，我們通常不會去動到 ViewModel，只專注於處理資料(模型 Model)和畫面(視圖 View)，尤其是資料的部分。
Vue 應用上，使用 MVVM 架構概念的範例
Vue 的特色就是以 “ 資料狀態 ”去操作 “ 畫面”。先定義出資料，再透過指令去將資料和畫面做雙向綁定，當資料或畫面有其中一方修改內容，即會反映在另一方上面。
看個簡單的範例可以更加了解其運作~
範例 :
- 在 Vue data 資料上定義資料內容。
- 在 html <input>中使用 Vue 指令去做雙向綁定 。
- 此時在畫面上 input 打字，可以直接寫進資料內。
- 相反的，如果我們去修改資料，也會反應在畫面上。
了解 Vue.js 框架運作的基本觀念後，就可以開始投入 Vue.js 基本指令的練習來小試身手囉~
