摘要:前言上一篇講到了但其實一直還對中的部分存在一些理解問題敲了一遍的之后,加深了對的理解例子現(xiàn)在需求如下,有一個按鈕,點擊之后,發(fā)送請求,并將接收到的結(jié)果更新到中傳統(tǒng)寫法在上綁定點擊事件一旦捕獲到點擊事件,向后臺發(fā)送一條請求得到后臺返回的數(shù)據(jù)操
前言
例子上一篇講到了MVC/MVP/MVVM, 但其實一直還對MVVM中的VM部分存在一些理解問題, 敲了一遍vue的demo之后,加深了對VM的理解
現(xiàn)在需求如下,有一個按鈕,點擊之后,發(fā)送ajax請求,并將接收到的結(jié)果更新到
中 傳統(tǒng)寫法ajax btn
在#btn上綁定點擊事件
一旦捕獲到點擊事件,向后臺發(fā)送一條ajax請求
得到后臺返回的數(shù)據(jù)response
操作#msg,將最新的response填進去
VM寫法ajax btn {{ response }}
聲明一個vm(viewModel)作用域
(vue將dom的視圖和你定義的data進行一個數(shù)據(jù)綁定)
將#btn通過指令綁定一個點擊事件
一旦捕獲到點擊事件,向后臺發(fā)送ajax請求
得到后臺返回的數(shù)據(jù)response
更新data
(vue監(jiān)聽到data的變化,于是更新對應的視圖)
對比傳統(tǒng)的操作dom的方式和vm的方式,很容易看出來,vm只做了一件事情就是
將視圖和數(shù)據(jù)綁定起來,免去了獲取視圖數(shù)據(jù)和根據(jù)新數(shù)據(jù)更新視圖的繁瑣操作,這樣能使你更專注你的業(yè)務邏輯,而不用為了如何進行dom操作傷腦筋
以前我們要獲取視圖的源數(shù)據(jù),采用的是$dom.val()/$dom.text()等操縱dom節(jié)點的方式. 但是有了vm, 我們獲取視圖數(shù)據(jù)的時候不用再去操縱dom節(jié)點了,而是通過v-model等指令直接獲取視圖上的數(shù)據(jù) (感謝Vue的封裝)
以前我們根據(jù)新數(shù)據(jù)更新視圖的時候,采用的是$dom.text()/$dom.html()等操縱dom節(jié)點的方式,但是有了vm, 我們根據(jù)新數(shù)據(jù)更新視圖的時候不用再去操縱dom節(jié)點了,因為我們只要更改data的值,視圖就會自動被更新 (感謝Vue的封裝)
以上是切圖崽對viewModel的一些粗淺的認知,如果對viewModel特別是狀態(tài)管理/數(shù)據(jù)綁定相關(guān)技術(shù)感興趣的同學,請移步React/Angular2/Vue
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.hztianpu.com/yun/50158.html
摘要:前言上一篇講到了但其實一直還對中的部分存在一些理解問題敲了一遍的之后,加深了對的理解例子現(xiàn)在需求如下,有一個按鈕,點擊之后,發(fā)送請求,并將接收到的結(jié)果更新到中傳統(tǒng)寫法在上綁定點擊事件一旦捕獲到點擊事件,向后臺發(fā)送一條請求得到后臺返回的數(shù)據(jù)操 前言 上一篇講到了MVC/MVP/MVVM, 但其實一直還對MVVM中的VM部分存在一些理解問題, 敲了一遍vue的demo之后,加深了對VM的理...
摘要:前言上一篇講到了但其實一直還對中的部分存在一些理解問題敲了一遍的之后,加深了對的理解例子現(xiàn)在需求如下,有一個按鈕,點擊之后,發(fā)送請求,并將接收到的結(jié)果更新到中傳統(tǒng)寫法在上綁定點擊事件一旦捕獲到點擊事件,向后臺發(fā)送一條請求得到后臺返回的數(shù)據(jù)操 前言 上一篇講到了MVC/MVP/MVVM, 但其實一直還對MVVM中的VM部分存在一些理解問題, 敲了一遍vue的demo之后,加深了對VM的理...
摘要:在沒有環(huán)境下對進行單元測試的時候,應用邏輯正確性是無法驗證的更新的時候,無法對的更新操作進行斷言。對是通過接口進行,在對進行不依賴環(huán)境的單元測試的時候。這里根據(jù)上面的例子給出了的單元測試樣例。年微軟工程師在自己的博客上首次公布了模式。 前言 做客戶端開發(fā)、前端開發(fā)對MVC、MVP、MVVM這些名詞不了解也應該大致聽過,都是為了解決圖形界面應用程序復雜性管理問題而產(chǎn)生的應用架構(gòu)模式。網(wǎng)上...
閱讀 1743·2021-10-12 10:11
閱讀 3906·2021-09-03 10:35
閱讀 1542·2019-08-30 15:55
閱讀 2230·2019-08-30 15:54
閱讀 1065·2019-08-30 13:07
閱讀 1133·2019-08-30 11:09
閱讀 688·2019-08-29 13:21
閱讀 2732·2019-08-29 11:32