成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

切圖崽的自我修養(yǎng)－[MVVM] 進(jìn)一步認(rèn)知viewModel

iKcamp / 1460人閱讀

摘要：前言上一篇講到了但其實(shí)一直還對(duì)中的部分存在一些理解問題敲了一遍的之后，加深了對(duì)的理解例子現(xiàn)在需求如下，有一個(gè)按鈕，點(diǎn)擊之后，發(fā)送請(qǐng)求，并將接收到的結(jié)果更新到中傳統(tǒng)寫法在上綁定點(diǎn)擊事件一旦捕獲到點(diǎn)擊事件，向后臺(tái)發(fā)送一條請(qǐng)求得到后臺(tái)返回的數(shù)據(jù)操

前言 
上一篇講到了MVC/MVP/MVVM, 但其實(shí)一直還對(duì)MVVM中的VM部分存在一些理解問題, 敲了一遍vue的demo之后，加深了對(duì)VM的理解
例子

現(xiàn)在需求如下，有一個(gè)按鈕

在#btn上綁定點(diǎn)擊事件

一旦捕獲到點(diǎn)擊事件，向后臺(tái)發(fā)送一條ajax請(qǐng)求

得到后臺(tái)返回的數(shù)據(jù)response

操作#msg,將最新的response填進(jìn)去

VM寫法 
    

        
        
{{ response }}

聲明一個(gè)vm(viewModel)作用域

(vue將dom的視圖和你定義的data進(jìn)行一個(gè)數(shù)據(jù)綁定)

將#btn通過指令綁定一個(gè)點(diǎn)擊事件

一旦捕獲到點(diǎn)擊事件，向后臺(tái)發(fā)送ajax請(qǐng)求

得到后臺(tái)返回的數(shù)據(jù)response

更新data

(vue監(jiān)聽到data的變化，于是更新對(duì)應(yīng)的視圖)

對(duì)比傳統(tǒng)的操作dom的方式和vm的方式，很容易看出來，vm只做了一件事情就是
將視圖和數(shù)據(jù)綁定起來,免去了獲取視圖數(shù)據(jù)和根據(jù)新數(shù)據(jù)更新視圖的繁瑣操作，這樣能使你更專注你的業(yè)務(wù)邏輯,而不用為了如何進(jìn)行dom操作傷腦筋

以前我們要獲取視圖的源數(shù)據(jù)，采用的是$dom.val()/$dom.text()等操縱dom節(jié)點(diǎn)的方式. 但是有了vm, 我們獲取視圖數(shù)據(jù)的時(shí)候不用再去操縱dom節(jié)點(diǎn)了,而是通過v-model等指令直接獲取視圖上的數(shù)據(jù) (感謝Vue的封裝)

以前我們根據(jù)新數(shù)據(jù)更新視圖的時(shí)候，采用的是$dom.text()/$dom.html()等操縱dom節(jié)點(diǎn)的方式，但是有了vm, 我們根據(jù)新數(shù)據(jù)更新視圖的時(shí)候不用再去操縱dom節(jié)點(diǎn)了,因?yàn)槲覀冎灰膁ata的值，視圖就會(huì)自動(dòng)被更新 (感謝Vue的封裝)

結(jié)語

以上是切圖崽對(duì)viewModel的一些粗淺的認(rèn)知，如果對(duì)viewModel特別是狀態(tài)管理/數(shù)據(jù)綁定相關(guān)技術(shù)感興趣的同學(xué)，請(qǐng)移步React/Angular2/Vue

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/80671.html

相關(guān)文章

  • 切圖崽的自我修養(yǎng)－[MVVM] 進(jìn)一步認(rèn)知viewModel

    摘要：前言上一篇講到了但其實(shí)一直還對(duì)中的部分存在一些理解問題敲了一遍的之后，加深了對(duì)的理解例子現(xiàn)在需求如下，有一個(gè)按鈕，點(diǎn)擊之后，發(fā)送請(qǐng)求，并將接收到的結(jié)果更新到中傳統(tǒng)寫法在上綁定點(diǎn)擊事件一旦捕獲到點(diǎn)擊事件，向后臺(tái)發(fā)送一條請(qǐng)求得到后臺(tái)返回的數(shù)據(jù)操 前言 上一篇講到了MVC/MVP/MVVM, 但其實(shí)一直還對(duì)MVVM中的VM部分存在一些理解問題, 敲了一遍vue的demo之后，加深了對(duì)VM的理...

    yuanzhanghu 評(píng)論0 收藏0

  • 切圖崽的自我修養(yǎng)－[MVVM] 進(jìn)一步認(rèn)知viewModel

    摘要：前言上一篇講到了但其實(shí)一直還對(duì)中的部分存在一些理解問題敲了一遍的之后，加深了對(duì)的理解例子現(xiàn)在需求如下，有一個(gè)按鈕，點(diǎn)擊之后，發(fā)送請(qǐng)求，并將接收到的結(jié)果更新到中傳統(tǒng)寫法在上綁定點(diǎn)擊事件一旦捕獲到點(diǎn)擊事件，向后臺(tái)發(fā)送一條請(qǐng)求得到后臺(tái)返回的數(shù)據(jù)操 前言 上一篇講到了MVC/MVP/MVVM, 但其實(shí)一直還對(duì)MVVM中的VM部分存在一些理解問題, 敲了一遍vue的demo之后，加深了對(duì)VM的理...

    Little_XM 評(píng)論0 收藏0

  • 切圖崽的自我修養(yǎng)－[MVVM] Js MV*模式淺談

    摘要：在沒有環(huán)境下對(duì)進(jìn)行單元測(cè)試的時(shí)候，應(yīng)用邏輯正確性是無法驗(yàn)證的更新的時(shí)候，無法對(duì)的更新操作進(jìn)行斷言。對(duì)是通過接口進(jìn)行，在對(duì)進(jìn)行不依賴環(huán)境的單元測(cè)試的時(shí)候。這里根據(jù)上面的例子給出了的單元測(cè)試樣例。年微軟工程師在自己的博客上首次公布了模式。 前言 做客戶端開發(fā)、前端開發(fā)對(duì)MVC、MVP、MVVM這些名詞不了解也應(yīng)該大致聽過，都是為了解決圖形界面應(yīng)用程序復(fù)雜性管理問題而產(chǎn)生的應(yīng)用架構(gòu)模式。網(wǎng)上...

    bluesky 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<