2019-04-08 v-model 雙向綁定

一健爬,雙向數(shù)據(jù)綁定:

html 綁定方法

<div id="app">
      <p><input type="text" v-model="msg"></p>
      <p>{{msg}}</p>
</div>

js 數(shù)據(jù)注冊(cè)

  <script src="js/vue.js"></script>
   <script>
       let vm = new Vue({
         //掛載點(diǎn)
         el: '#app',
         data: {
           msg: 'hello'
         }
       });
   </script>

二谋旦,Vue響應(yīng)式原理:

1.當(dāng)把一個(gè)普通的 JavaScript 對(duì)象傳入 Vue 實(shí)例作為 data 選項(xiàng)件炉,Vue 將遍歷此對(duì)象所有的屬性峻凫,并使用 Object.defineProperty 把這些屬性全部轉(zhuǎn)為 getter/setter纫事。

2.這些 getter/setter 在內(nèi)部讓 Vue 能夠追蹤依賴(lài)勘畔,在屬性被訪問(wèn)和修改時(shí)通知變更。

3.每個(gè)組件實(shí)例都對(duì)應(yīng)一個(gè) watcher 實(shí)例丽惶,它會(huì)在組件渲染的過(guò)程中把“接觸”過(guò)的數(shù)據(jù)屬性記錄為依賴(lài)炫七。之后當(dāng)依賴(lài)項(xiàng)的 setter 觸發(fā)時(shí),會(huì)通知 watcher钾唬,從而使它關(guān)聯(lián)的組件重新渲染万哪。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市抡秆,隨后出現(xiàn)的幾起案子奕巍,更是在濱河造成了極大的恐慌,老刑警劉巖儒士,帶你破解...
    沈念sama閱讀 218,451評(píng)論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件的止,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡着撩,警方通過(guò)查閱死者的電腦和手機(jī)诅福,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,172評(píng)論 3 394
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)睹酌,“玉大人权谁,你說(shuō)我怎么就攤上這事”镅兀” “怎么了旺芽?”我有些...
    開(kāi)封第一講書(shū)人閱讀 164,782評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我采章,道長(zhǎng)运嗜,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,709評(píng)論 1 294
  • 正文 為了忘掉前任悯舟,我火速辦了婚禮担租,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘抵怎。我一直安慰自己奋救,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,733評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布反惕。 她就那樣靜靜地躺著尝艘,像睡著了一般。 火紅的嫁衣襯著肌膚如雪姿染。 梳的紋絲不亂的頭發(fā)上背亥,一...
    開(kāi)封第一講書(shū)人閱讀 51,578評(píng)論 1 305
  • 那天,我揣著相機(jī)與錄音悬赏,去河邊找鬼狡汉。 笑死,一個(gè)胖子當(dāng)著我的面吹牛闽颇,可吹牛的內(nèi)容都是我干的盾戴。 我是一名探鬼主播,決...
    沈念sama閱讀 40,320評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼兵多,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼捻脖!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起中鼠,我...
    開(kāi)封第一講書(shū)人閱讀 39,241評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤可婶,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后援雇,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體矛渴,經(jīng)...
    沈念sama閱讀 45,686評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,878評(píng)論 3 336
  • 正文 我和宋清朗相戀三年惫搏,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了具温。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,992評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡筐赔,死狀恐怖铣猩,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情茴丰,我是刑警寧澤达皿,帶...
    沈念sama閱讀 35,715評(píng)論 5 346
  • 正文 年R本政府宣布天吓,位于F島的核電站,受9級(jí)特大地震影響峦椰,放射性物質(zhì)發(fā)生泄漏龄寞。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,336評(píng)論 3 330
  • 文/蒙蒙 一汤功、第九天 我趴在偏房一處隱蔽的房頂上張望物邑。 院中可真熱鬧,春花似錦滔金、人聲如沸色解。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,912評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)冒签。三九已至,卻和暖如春钟病,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背刚梭。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,040評(píng)論 1 270
  • 我被黑心中介騙來(lái)泰國(guó)打工肠阱, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人朴读。 一個(gè)月前我還...
    沈念sama閱讀 48,173評(píng)論 3 370
  • 正文 我出身青樓屹徘,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親衅金。 傳聞我的和親對(duì)象是個(gè)殘疾皇子噪伊,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,947評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容

  • 這篇筆記主要包含 Vue 2 不同于 Vue 1 或者特有的內(nèi)容,還有我對(duì)于 Vue 1.0 印象不深的內(nèi)容氮唯。關(guān)于...
    云之外閱讀 5,050評(píng)論 0 29
  • Vue 實(shí)例 屬性和方法 每個(gè) Vue 實(shí)例都會(huì)代理其 data 對(duì)象里所有的屬性:var data = { a:...
    云之外閱讀 2,210評(píng)論 0 6
  • 33鉴吹、JS中的本地存儲(chǔ) 把一些信息存儲(chǔ)在當(dāng)前瀏覽器指定域下的某一個(gè)地方(存儲(chǔ)到物理硬盤(pán)中)1、不能跨瀏覽器傳輸:在...
    萌妹撒閱讀 2,084評(píng)論 0 2
  • 第一章 Vue概述 what? Vue是實(shí)現(xiàn)UI層的漸進(jìn)式j(luò)s框架惩琉,核心庫(kù)關(guān)注視圖層豆励,簡(jiǎn)單的ui構(gòu)建,復(fù)雜的路由控...
    fastwe閱讀 715評(píng)論 0 0
  • 通常瞒渠,我們累了第一個(gè)想到的是什么良蒸?沒(méi)錯(cuò),那就是——睡伍玖!之前感覺(jué)挺好嫩痰,可經(jīng)常這么干,時(shí)間長(zhǎng)了窍箍,就不太好使了串纺! 尤其是...
    夯土之錘閱讀 323評(píng)論 7 3