第vue雙向數(shù)據(jù)綁定指令v目錄基本使用響應(yīng)式v-model數(shù)據(jù)雙向綁定步驟響應(yīng)式v-model簡易實(shí)現(xiàn)原理v-model，被稱為雙向數(shù)據(jù)綁定指令，就是Vue實(shí)例對數(shù)據(jù)進(jìn)行修改，頁面會立即感知，相反頁面對數(shù)據(jù)進(jìn)行修改，Vue內(nèi)部也會立即感知。

v-model是vue中唯一實(shí)現(xiàn)雙向數(shù)據(jù)綁定的指令。

v-bind(單向)數(shù)據(jù)綁定，Vue實(shí)例修改數(shù)據(jù)，頁面會感知到，相反頁面修改數(shù)據(jù)Vue實(shí)例不能感知。v-model(雙向)數(shù)據(jù)綁定，頁面修改數(shù)據(jù)，Vue實(shí)例會感知到，Vue實(shí)例修改數(shù)據(jù)，頁面也會感知到。

基本使用

語法：

標(biāo)簽v-model="data成員"/標(biāo)簽

注意：

1.v-model只針對value屬性可以綁定，因此經(jīng)常用在form表單標(biāo)簽中，例如input(輸入框、單選按鈕、復(fù)選框)/select(下拉列表)/textarea(文本域)，相反div、p標(biāo)簽不能用。2.v-model只能綁定data成員，不能設(shè)置其他表達(dá)式，否則錯(cuò)誤。3.v-model綁定的成員需提前在data中聲明好。

示例代碼：

divid="app"

p{{city}}/p

pinputtype="text":value="city"/p

pinputtype="text"v-model="city"/p

/div

scriptsrc="./vue.js"/script

script

varvm=newVue({

el:'#app',

data:{

city:'北京'

/script

v-model對應(yīng)的city發(fā)生變化后，其他的{{}}和:value的值也會發(fā)生變化。

響應(yīng)式

v-model數(shù)據(jù)雙向綁定步驟

1.頁面初始加載，vue實(shí)例的data數(shù)據(jù)渲染給頁面的div容器。

2.頁面通過v-model修改綁定數(shù)據(jù)，修改的信息會直接反饋給vue內(nèi)部的data數(shù)據(jù)。

3.vue的data數(shù)據(jù)發(fā)生變化，頁面上(也包括Vue實(shí)例本身)用到該數(shù)據(jù)的地方會重新編譯渲染。

2和3步驟在條件滿足情況下會重復(fù)執(zhí)行。

響應(yīng)式

vue實(shí)例的data數(shù)據(jù)如果發(fā)生變化，那么頁面上(或Vue實(shí)例內(nèi)部其他場合)用到該數(shù)據(jù)的地方會重新編譯執(zhí)行，這樣就把更新后的內(nèi)容顯示出來了，這個(gè)過程就是響應(yīng)式，即上面步驟3。

如果Vue實(shí)例內(nèi)部對變化的數(shù)據(jù)有使用，也會同步更新編譯執(zhí)行。

注意：響應(yīng)式是Vue中非常重要的機(jī)制。

v-model簡易實(shí)現(xiàn)原理

給input輸入框中定義oninput事件，在該事件中把用戶輸入的信息都給隨時(shí)獲得到，并對data成員進(jìn)行賦值，

data成員變化了，頁面上用到數(shù)據(jù)的地方就重新渲染，達(dá)成簡易雙向綁定的效果。

oninput：是事件，可以隨時(shí)感知輸入框輸入的信息。

具體設(shè)置：

divid="app"

h2v-model簡易原理/h2

p{{city}}/p

pinputtype="text":value="city"/p

hr/

!--事件@xxx="方法名稱/js語句"--

!--$event:在vue的事件被綁定元素的行內(nèi)部，代表事件對象--

pinputtype="text":value="city"@input="city=$event.target.value"/p

pinputtype="text":value="city"@input="feel"/p

/div

scriptsrc="./vue.js"/script

script

varvm=newVue({

el:'#app',

data:{

city:'北京'

},

methods:{

feel(evt){

//console.log(evt)

//InputEvent輸入鍵盤事件對象

//evt.target:觸發(fā)當(dāng)前事件的元素節(jié)點(diǎn)dom對象(類似document.getElementById()的返回結(jié)果)

//console.dir(evt.target)

//console.log(evt.target.value)

//evt.target.value獲得輸入框當(dāng)前輸入的信息

//把輸入框已經(jīng)輸入的信息賦予給city

this.city=evt.target.value

}

}

})

/scri