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

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

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

基本使用

語法：

<標簽 v-model="data成員"></標簽>

注意：

• 1.v-model只針對value屬性可以綁定，因此經常用在form表單標簽中，例如input(輸入框、單選按鈕、復選框)/select(下拉列表)/textarea(文本域)，相反div、p標簽不能用。
• 2.v-model只能綁定data成員，不能設置其他表達式，否則錯誤。
• 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對應的city發(fā)生變化后，其他的{{ }} 和 :value的值也會發(fā)生變化。

響應式

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

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

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

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

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

響應式

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

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

注意：響應式是Vue中非常重要的機制。

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

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

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

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

具體設置：

? <div id="app">
? ? <h2>v-model簡易原理</h2>
? ? <p>{{city}}</p>
? ? <p><input type="text" :value="city"></p>
? ? <hr />
? ? <!-- 事件@xxx="方法名稱/js語句" -->
? ? <!-- $event:在vue的事件被綁定元素的行內部，代表事件對象 -->
? ? <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ā)當前事件的元素節(jié)點dom對象(類似document.getElementById()的返回結果)
? ? ? ? ? // console.dir(evt.target)
? ? ? ? ? // console.log(evt.target.value) ?// evt.target.value 獲得輸入框當前輸入的信息
? ? ? ? ? // 把輸入框已經輸入的信息賦予給city
? ? ? ? ? this.city = evt.target.value
? ? ? ? }
? ? ? }
? ? })
? </script>

注意：

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

2.在元素行內事件驅動中可以直接使用$event,其也是事件對象。

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。 

最新評論