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

資訊專欄INFORMATION COLUMN

【揮舞JS】vue雙向數(shù)據(jù)綁定v-model實(shí)現(xiàn)原理

XanaHopper / 360人閱讀

摘要：設(shè)計(jì)模式數(shù)據(jù)觀測(cè)原理在技術(shù)實(shí)現(xiàn)上，利用的是和存儲(chǔ)器屬性和所以只兼容及以上版本，可稱為基于依賴收集的觀測(cè)機(jī)制。核心是，即，保證數(shù)據(jù)和視圖的一致性。采用數(shù)據(jù)劫持結(jié)合發(fā)布者訂閱者模式的方式，在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽(tīng)回調(diào)。

MVVM設(shè)計(jì)模式 Model View ViewModel

Vue.js 數(shù)據(jù)觀測(cè)原理在技術(shù)實(shí)現(xiàn)上，利用的是ES5 Object.defineProperty()和存儲(chǔ)器屬性: getter和setter（所以只兼容IE9及以上版本），可稱為基于依賴收集的觀測(cè)機(jī)制。
核心是VM，即ViewModel，保證數(shù)據(jù)和視圖的一致性。Vue.js 采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式，在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽(tīng)回調(diào)。




    

    

// Model
var data = {
    message: "",
    list: []
};
// ViewModel
var app = document.getElementById("app");
var Elements = app.querySelectorAll("[v-model]");
for (var i = 0; i < Elements.length; i++) {
    Elements[i].oninput = function () {
        data[this.getAttribute("v-model")] = this.value;
    }
}

Object.defineProperty(data, "message", {
    get: function () {
        return data.str;
    },
    set: function (val) {
        var Elements = app.querySelectorAll("[v-model=message]");
        for (var i = 0; i < Elements.length; i++) {
            Elements[i].value = val;
            Elements[i].innerText = val;
        }
        data.str = val;
    }
});

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

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

相關(guān)文章

  • 【Vue原理】VModel - 白話版

    摘要：執(zhí)行的時(shí)候，會(huì)綁定上下文對(duì)象為組件實(shí)例于是中的就能取到組件實(shí)例本身，的代碼塊頂層作用域就綁定為了組件實(shí)例于是內(nèi)部變量的訪問(wèn)，就會(huì)首先訪問(wèn)到組件實(shí)例上。其中的獲取，就會(huì)先從組件實(shí)例上獲取，相當(dāng)于。 寫(xiě)文章不容易，點(diǎn)個(gè)贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于 Vue版本 【2.5.17】 如果你覺(jué)得...

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

  • vue雙向數(shù)據(jù)綁定原理

    摘要：什么是雙向數(shù)據(jù)綁定是一個(gè)框架，數(shù)據(jù)綁定簡(jiǎn)單來(lái)說(shuō)，就是當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，相應(yīng)的視圖會(huì)進(jìn)行更新，當(dāng)視圖更新時(shí)，數(shù)據(jù)也會(huì)跟著變化。 什么是雙向數(shù)據(jù)綁定？Vue是一個(gè)MVVM框架，數(shù)據(jù)綁定簡(jiǎn)單來(lái)說(shuō)，就是當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，相應(yīng)的視圖會(huì)進(jìn)行更新，當(dāng)視圖更新時(shí)，數(shù)據(jù)也會(huì)跟著變化。 實(shí)現(xiàn)數(shù)據(jù)綁定的方式大致有以下幾種： - 1、發(fā)布者-訂閱者模式（backbone.js） - 2、臟值檢查（angula...

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

  • Vue基本原理

    摘要：標(biāo)簽添加監(jiān)聽(tīng)事件文本節(jié)點(diǎn)這一步我們操作頁(yè)面輸入框，可以看到以下效果，證明監(jiān)聽(tīng)事件添加有效。 前言 經(jīng)過(guò)幾天的研究，發(fā)現(xiàn)學(xué)習(xí)框架的底層技術(shù)，收獲頗豐，相比只學(xué)習(xí)框架的使用要來(lái)的合算；如果工作急需，快速上手應(yīng)用，掌握如何使用短期內(nèi)更加高效；如果有較多的時(shí)間來(lái)系統(tǒng)學(xué)習(xí)，建議研究一下框架的等層技術(shù)、原理。 Vue、React、Angular三大框架對(duì)比 1、Vue Vue是尤雨溪編寫(xiě)的一個(gè)構(gòu)建...

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

  • Vue基本原理

    摘要：標(biāo)簽添加監(jiān)聽(tīng)事件文本節(jié)點(diǎn)這一步我們操作頁(yè)面輸入框，可以看到以下效果，證明監(jiān)聽(tīng)事件添加有效。 前言 經(jīng)過(guò)幾天的研究，發(fā)現(xiàn)學(xué)習(xí)框架的底層技術(shù)，收獲頗豐，相比只學(xué)習(xí)框架的使用要來(lái)的合算；如果工作急需，快速上手應(yīng)用，掌握如何使用短期內(nèi)更加高效；如果有較多的時(shí)間來(lái)系統(tǒng)學(xué)習(xí)，建議研究一下框架的等層技術(shù)、原理。 Vue、React、Angular三大框架對(duì)比 1、Vue Vue是尤雨溪編寫(xiě)的一個(gè)構(gòu)建...

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

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

0條評(píng)論

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