vue学习笔记-02-前端的发展历史浅谈mmvm设计理念
vue學習筆記-02-前端的發展歷史淺談mmvm設計理念
文章目錄
- 1. MVVM模式的實現者
- 2.第一個vue程序
- 3.什么是mvvm？
- 4.為什么要用mvvm？
- 5.mvvm的組成部分
- 7.MVVM 模式的實現者
- 8.為什么要使用 Vue.js
1. MVVM模式的實現者
-
Model:模型層，在這里表示JavaScript對象
-
View:視圖層，在這里表示DOM (HTML操作的元素)
-
ViewModel:連接視圖和數據的中間件，Vue.js 就是MVVM中的ViewModel層的實現者
在MVVM架構中，是不允許數據和視圖直接通信的，只能通過ViewModel來通信,而
ViewModel就是定義了一個Observer觀察者 -
ViewModel 能夠觀察到數據的變化，并對視圖對應的內容進行更新
-
ViewModel能夠監聽到視圖的變化，并能夠通知數據發生改變
??至此，我們就明白了，Vue.js就是一個MVVM的實現者，他的核心就是實現了DOM監聽與數
據綁定
為什么要使用Vue.js
2.第一個vue程序
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>第一個 Vue 應用程序</title><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script></head><body><div id="vue">{{message}}</div><script type="text/javascript">var vm = new Vue({el: '#vue',data: {message: 'Hello Vue!'}});</script></body></html>3.什么是mvvm？
??一種軟件架構模式MVVM 源自于經典的 MVC（Model-View-Controller）模式。MVVM 的核心是 ViewModel 層，負責轉換 Model 中的數據對象來讓數據變得更容易管理和使用，其作用如下：
- 該層向上與視圖層進行雙向綁定
- 向下與model層通過接口請求進行數據交互
Vue.js就是一個mvvm架構的框架
4.為什么要用mvvm？
??MVVM 模式和 MVC 模式一樣，主要目的是分離視圖（View）和模型（Model），有幾大好處：
-
低耦合： 視圖（View）可以獨立于 Model 變化和修改，一個 ViewModel 可以綁定到不同的 View 上，當 View 變化的時候 Model 可以不變，當 Model 變化的時候 View 也可以不變。
-
可復用： 你可以把一些視圖邏輯放在一個 ViewModel 里面，讓很多 View 重用這段視圖邏輯。
-
獨立開發： 開發人員可以專注于業務邏輯和數據的開發（ViewModel），設計人員可以專注于頁面設計。
-
可測試： 界面素來是比較難于測試的，而現在測試可以針對 ViewModel 來寫。
5.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 層，這個解耦是至關重要的，它是前后端分離方案實施的重要一環。
6.Vue
??Vue (讀音 /vju?/，類似于 view) 是一套用于構建用戶界面的漸進式框架，發布于 2014 年 2 月。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫（如：vue-router，vue-resource，vuex）或既有項目整合。
7.MVVM 模式的實現者
- Model：模型層，在這里表示 JavaScript 對象
- View：視圖層，在這里表示 DOM（HTML 操作的元素）
- ViewModel：連接視圖和數據的中間件，Vue.js 就是 MVVM 中的 ViewModel 層的實現者
??在 MVVM 架構中，是不允許 數據 和 視圖 直接通信的，只能通過 ViewModel 來通信，而 ViewModel 就是定義了一個 Observer 觀察者
- ViewModel 能夠觀察到數據的變化，并對視圖對應的內容進行更新
- ViewModel 能夠監聽到視圖的變化，并能夠通知數據發生改變
??至此，我們就明白了，Vue.js 就是一個 MVVM 的實現者，他的核心就是實現了 DOM 監聽 與 數據綁定
8.為什么要使用 Vue.js
- 輕量級，體積小是一個重要指標。Vue.js 壓縮后有只有 20多kb （Angular 壓縮后 56kb+，React 壓縮后 44kb+）
- 移動優先。更適合移動端，比如移動端的 Touch 事件
- 易上手，學習曲線平穩，文檔齊全
- 吸取了 Angular（模塊化）和 React（虛擬 DOM）的長處，并擁有自己獨特的功能，如：計算屬性
- 開源，社區活躍度高
- …
總結
以上是生活随笔為你收集整理的vue学习笔记-02-前端的发展历史浅谈mmvm设计理念的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 4.1.1网络层功能概述
- 下一篇： SQL2005结合ROW_NUMBER(