v-model，被稱為雙向數(shù)據(jù)綁定指令，就是Vue實(shí)例對數(shù)據(jù)進(jìn)行修改，頁面會(huì)立即感知，相反頁面對數(shù)據(jù)進(jìn)行修改，Vue內(nèi)部也會(huì)立即感知。

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

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

基本使用

語法：

<標(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中聲明好。

示例代碼：

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

  <script src="./vue.js"></script>
  <script>
    var vm = new Vue({
      el:'#app',
      data:{
        city:'北京'
      },
    })
  </script>

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

響應(yīng)式

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

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

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

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

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

響應(yīng)式

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

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

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

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

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

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

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

具體設(shè)置：

? <div id="app">
? ? <h2>v-model簡易原理</h2>
? ? <p>{{city}}</p>
? ? <p><input type="text" :value="city"></p>
? ? <hr />
? ? <!-- 事件@xxx="方法名稱/js語句" -->
? ? <!-- $event:在vue的事件被綁定元素的行內(nèi)部，代表事件對象 -->
? ? <p><input type="text" :value="city" @input="city = $event.target.value"></p>
? ? ??
? ? <p><input type="text" :value="city" @input="feel"></p>
? </div>

? <script src="./vue.js"></script>
? <script>
? ? var vm = new Vue({
? ? ? 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
? ? ? ? }
? ? ? }
? ? })
? </script>

注意：

1.事件聲明沒有小括號()，第一個(gè)形參就是 事件對象。

2.在元素行內(nèi)事件驅(qū)動(dòng)中可以直接使用$event,其也是事件對象。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。 

最新評論