一、知識鋪墊

什麼是MVC

MVC 模式代表 Model-View-Controller（模型-檢視-控制器） 模式。這種模式用於應用程式的分層開發。

• Model（模型）- 模型代表一個存取資料的物件或 JAVA POJO。它也可以帶有邏輯，在資料變化時更新控制器。
• View（檢視）- 檢視代表模型包含的資料的視覺化。
• Controller（控制器）- 控制器作用於模型和檢視上。它控制資料流向模型物件，並在資料變化時更新檢視。它使檢視與模型分離開。

什麼是 MVVM

MVVM（Model-View-ViewModel）是一種軟體架構設計模式，MVVM 源自於經典的 MVC（Model-View-Controller）模式。MVVM 的核心是 ViewModel 層，負責轉換 Model 中的資料物件來讓資料變得更容易管理和使用，其作用如下：

• 該層向上與檢視層進行雙向資料繫結
• 向下與 Model 層通過介面請求進行資料互動
  

MVVM 已經相當成熟了，主要運用但不僅僅在網路應用程式開發中。當下流行的 MVVM 框架有Vue.js，AngularJS等。

為什麼要使用 MVVM

MVVM 模式和 MVC 模式一樣，主要目的是分離檢視（View）和模型（Model），有幾大好處

• 低耦合： 檢視（View）可以獨立於 Model 變化和修改，一個 ViewModel 可以繫結到不同的 View 上，當 View 變化的時候 Model 可以不變，當 Model 變化的時候 View 也可以不變。
• 可複用： 你可以把一些檢視邏輯放在一個 ViewModel 裡面，讓很多 View 重用這段檢視邏輯。
• 獨立開發： 開發人員可以專注於業務邏輯和資料的開發（ViewModel），設計人員可以專注於頁面設計。
• 可測試： 介面素來是比較難於測試的，而現在測試可以針對 ViewModel 來寫。

MVVM 的組成部分

• View

View 是檢視層，也就是使用者介面。前端主要由HTML和CSS來構建，為了更方便地展現ViewModel或者Model層的資料，已經產生了各種各樣的前後端模板語言，比如 FreeMarker、Thymeleaf 等等，各大 MVVM 框架如 Vue.js，AngularJS，EJS 等也都有自己用來構建使用者介面的內建模板語言。

• Model

Model 是指資料模型，泛指後端進行的各種業務邏輯處理和資料操控，主要圍繞資料庫系統展開。這裡的難點主要在於需要和前端約定統一的介面規則

• ViewModel

ViewModel 是由前端開發人員組織生成和維護的檢視資料層。在這一層，前端開發者對從後端獲取的 Model 資料進行轉換處理，做二次封裝，以生成符合 View 層使用預期的檢視資料模型。

需要注意的是 ViewModel 所封裝出來的資料模型包括檢視的狀態和行為兩部分，而 Model 層的資料模型是隻包含狀態的

• 比如頁面的這一塊展示什麼，那一塊展示什麼這些都屬於檢視狀態（展示）
• 頁面載入進來時發生什麼，點選這一塊發生什麼，這一塊滾動時發生什麼這些都屬於檢視行為（互動）

檢視狀態和行為都封裝在了 ViewModel 裡。這樣的封裝使得 ViewModel 可以完整地去描述 View 層`。由於實現了雙向繫結，ViewModel 的內容會實時展現在 View 層，這是激動人心的，因為前端開發者再也不必低效又麻煩地通過操縱 DOM 去更新檢視。

MVVM 框架已經把最髒最累的一塊做好了，我們開發者只需要處理和維護 ViewModel，更新資料檢視就會自動得到相應更新，真正實現事件驅動程式設計。

View 層展現的不是Model層的資料，而是ViewModel的資料，由ViewModel負責與Model層互動，這就完全解耦了 View 層和 Model 層，這個解耦是至關重要的，它是前後端分離方案實施的重要一環。

二、Vue

　　Vue (讀音 /vjuː/，類似於 view) 是一套用於構建使用者介面的漸進式框架，釋出於 2014 年 2 月。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注檢視層，不僅易於上手，還便於與第三方庫（如：vue-router，vue-resource，vuex）或既有專案整合。

MVVM 模式的實現者

• Model：模型層，在這裡表示 JavaScript 物件
• View：檢視層，在這裡表示 DOM（HTML 操作的元素）
• ViewModel：連線檢視和資料的中介軟體，Vue.js 就是 MVVM 中的 ViewModel 層的實現者

在 MVVM 架構中，是不允許 資料 和 檢視 直接通訊的，只能通過 ViewModel 來通訊，而 ViewModel 就是定義了一個 Observer 觀察者

• ViewModel 能夠觀察到資料的變化，並對檢視對應的內容進行更新
• ViewModel 能夠監聽到檢視的變化，並能夠通知資料發生改變

至此，我們就明白了，Vue.js 就是一個 MVVM 的實現者，他的核心就是實現了 DOM 監聽 與 資料繫結

為什麼要使用 Vue.js

• 輕量級，體積小是一個重要指標。Vue.js 壓縮後有只有 20多kb （Angular 壓縮後 56kb+，React 壓縮後 44kb+）
• 移動優先。更適合移動端，比如移動端的 Touch 事件
• 易上手，學習曲線平穩，文件齊全
• 吸取了 Angular（模組化）和 React（虛擬 DOM）的長處，並擁有自己獨特的功能，如：計算屬性
• 開源，社群活躍度高
• …

三、第一個Vue程式