vue学习笔记-02-前端的发展历史浅谈mmvm设计理念
vue學(xué)習(xí)筆記-02-前端的發(fā)展歷史淺談mmvm設(shè)計理念
文章目錄
- 1. MVVM模式的實現(xiàn)者
- 2.第一個vue程序
- 3.什么是mvvm？
- 4.為什么要用mvvm？
- 5.mvvm的組成部分
- 7.MVVM 模式的實現(xiàn)者
- 8.為什么要使用 Vue.js
1. MVVM模式的實現(xiàn)者
-
Model:模型層，在這里表示JavaScript對象
-
View:視圖層，在這里表示DOM (HTML操作的元素)
-
ViewModel:連接視圖和數(shù)據(jù)的中間件，Vue.js 就是MVVM中的ViewModel層的實現(xiàn)者
在MVVM架構(gòu)中，是不允許數(shù)據(jù)和視圖直接通信的，只能通過ViewModel來通信,而
ViewModel就是定義了一個Observer觀察者 -
ViewModel 能夠觀察到數(shù)據(jù)的變化，并對視圖對應(yīng)的內(nèi)容進(jìn)行更新
-
ViewModel能夠監(jiān)聽到視圖的變化，并能夠通知數(shù)據(jù)發(fā)生改變
??至此，我們就明白了，Vue.js就是一個MVVM的實現(xiàn)者，他的核心就是實現(xiàn)了DOM監(jiān)聽與數(shù)
據(jù)綁定
為什么要使用Vue.js
2.第一個vue程序
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>第一個 Vue 應(yīng)用程序</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？
??一種軟件架構(gòu)模式MVVM 源自于經(jīng)典的 MVC（Model-View-Controller）模式。MVVM 的核心是 ViewModel 層，負(fù)責(zé)轉(zhuǎn)換 Model 中的數(shù)據(jù)對象來讓數(shù)據(jù)變得更容易管理和使用，其作用如下：
- 該層向上與視圖層進(jìn)行雙向綁定
- 向下與model層通過接口請求進(jìn)行數(shù)據(jù)交互
Vue.js就是一個mvvm架構(gòu)的框架
4.為什么要用mvvm？
??MVVM 模式和 MVC 模式一樣，主要目的是分離視圖（View）和模型（Model），有幾大好處：
-
低耦合： 視圖（View）可以獨立于 Model 變化和修改，一個 ViewModel 可以綁定到不同的 View 上，當(dāng) View 變化的時候 Model 可以不變，當(dāng) Model 變化的時候 View 也可以不變。
-
可復(fù)用： 你可以把一些視圖邏輯放在一個 ViewModel 里面，讓很多 View 重用這段視圖邏輯。
-
獨立開發(fā)： 開發(fā)人員可以專注于業(yè)務(wù)邏輯和數(shù)據(jù)的開發(fā)（ViewModel），設(shè)計人員可以專注于頁面設(shè)計。
-
可測試： 界面素來是比較難于測試的，而現(xiàn)在測試可以針對 ViewModel 來寫。
5.mvvm的組成部分
View
??View 是視圖層，也就是用戶界面。前端主要由 HTML 和 CSS 來構(gòu)建，為了更方便地展現(xiàn) ViewModel 或者 Model 層的數(shù)據(jù)，已經(jīng)產(chǎn)生了各種各樣的前后端模板語言，比如 FreeMarker、Thymeleaf 等等，各大 MVVM 框架如 Vue.js，AngularJS，EJS 等也都有自己用來構(gòu)建用戶界面的內(nèi)置模板語言。
Model
??Model 是指數(shù)據(jù)模型，泛指后端進(jìn)行的各種業(yè)務(wù)邏輯處理和數(shù)據(jù)操控，主要圍繞數(shù)據(jù)庫系統(tǒng)展開。這里的難點主要在于需要和前端約定統(tǒng)一的 接口規(guī)則
ViewModel
??ViewModel 是由前端開發(fā)人員組織生成和維護(hù)的視圖數(shù)據(jù)層。在這一層，前端開發(fā)者對從后端獲取的 Model 數(shù)據(jù)進(jìn)行轉(zhuǎn)換處理，做二次封裝，以生成符合 View 層使用預(yù)期的視圖數(shù)據(jù)模型。
??需要注意的是 ViewModel 所封裝出來的數(shù)據(jù)模型包括視圖的狀態(tài)和行為兩部分，而 Model 層的數(shù)據(jù)模型是只包含狀態(tài)的
- 比如頁面的這一塊展示什么，那一塊展示什么這些都屬于視圖狀態(tài)（展示）
- 頁面加載進(jìn)來時發(fā)生什么，點擊這一塊發(fā)生什么，這一塊滾動時發(fā)生什么這些都屬于視圖行為（交互）
??視圖狀態(tài)和行為都封裝在了 ViewModel 里。這樣的封裝使得 ViewModel 可以完整地去描述 View 層。由于實現(xiàn)了雙向綁定，ViewModel 的內(nèi)容會實時展現(xiàn)在 View 層，這是激動人心的，因為前端開發(fā)者再也不必低效又麻煩地通過操縱 DOM 去更新視圖。
??MVVM 框架已經(jīng)把最臟最累的一塊做好了，我們開發(fā)者只需要處理和維護(hù) ViewModel，更新數(shù)據(jù)視圖就會自動得到相應(yīng)更新，真正實現(xiàn) 事件驅(qū)動編程。
??View 層展現(xiàn)的不是 Model 層的數(shù)據(jù)，而是 ViewModel 的數(shù)據(jù)，由 ViewModel 負(fù)責(zé)與 Model 層交互，這就完全解耦了 View 層和 Model 層，這個解耦是至關(guān)重要的，它是前后端分離方案實施的重要一環(huán)。
6.Vue
??Vue (讀音 /vju?/，類似于 view) 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架，發(fā)布于 2014 年 2 月。與其它大型框架不同的是，Vue 被設(shè)計為可以自底向上逐層應(yīng)用。Vue 的核心庫只關(guān)注視圖層，不僅易于上手，還便于與第三方庫（如：vue-router，vue-resource，vuex）或既有項目整合。
7.MVVM 模式的實現(xiàn)者
- Model：模型層，在這里表示 JavaScript 對象
- View：視圖層，在這里表示 DOM（HTML 操作的元素）
- ViewModel：連接視圖和數(shù)據(jù)的中間件，Vue.js 就是 MVVM 中的 ViewModel 層的實現(xiàn)者
??在 MVVM 架構(gòu)中，是不允許 數(shù)據(jù) 和 視圖 直接通信的，只能通過 ViewModel 來通信，而 ViewModel 就是定義了一個 Observer 觀察者
- ViewModel 能夠觀察到數(shù)據(jù)的變化，并對視圖對應(yīng)的內(nèi)容進(jìn)行更新
- ViewModel 能夠監(jiān)聽到視圖的變化，并能夠通知數(shù)據(jù)發(fā)生改變
??至此，我們就明白了，Vue.js 就是一個 MVVM 的實現(xiàn)者，他的核心就是實現(xiàn)了 DOM 監(jiān)聽 與 數(shù)據(jù)綁定
8.為什么要使用 Vue.js
- 輕量級，體積小是一個重要指標(biāo)。Vue.js 壓縮后有只有 20多kb （Angular 壓縮后 56kb+，React 壓縮后 44kb+）
- 移動優(yōu)先。更適合移動端，比如移動端的 Touch 事件
- 易上手，學(xué)習(xí)曲線平穩(wěn)，文檔齊全
- 吸取了 Angular（模塊化）和 React（虛擬 DOM）的長處，并擁有自己獨特的功能，如：計算屬性
- 開源，社區(qū)活躍度高
- …
總結(jié)
以上是生活随笔為你收集整理的vue学习笔记-02-前端的发展历史浅谈mmvm设计理念的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 4.1.1网络层功能概述
- 下一篇： SQL2005结合ROW_NUMBER(