v-model 原理 是什么

　　1、v-model指令的作用

　　vue中的v-model指令是完成雙向綁定的，用在表單元素上。雙向綁定就是 M會(huì)影響V。V也會(huì)影響M。即：能將頁(yè)面上輸入的值同步更新到相關(guān)綁定的data屬性，也會(huì)在更新data綁定屬性時(shí)候，更新頁(yè)面上輸入控件的值。

　　2、v-model的原理

　　v-model指令是一個(gè)語(yǔ)法糖，是屬性綁定和事件的語(yǔ)法糖。vue會(huì)根據(jù)不同的表單元素使用不同的屬性和事件。

　　如下：

　　text 和 textarea 元素使用 value property 和 input 事件;

　　checkbox 和 radio 使用 checked property 和 change 事件;

　　select 字段將 value 作為 prop 并將 change 作為事件。

　　以文本框?yàn)槔饰鲈恚韵率谴a：　

<!-- V -->
  <div id="app">
      <!--文本框使用value屬性和input事件-->
      <input type="text" v-bind:value="msg" @input="changeMsg"  >
  </div>

 //M：

  let vm = new Vue({
        el: "#app",
        data: {
              msg:"hi"
        },
        methods: {
            changeMsg(e){
                this.msg = e.target.value; 
            }      
        }
  })

　　而，使用v-model來(lái)完成以上功能的代碼如下：　

<!-- V-->
  <div id="app">
      <!-- 此處不需要使用value屬性和input事件，直接使用v-mdoel指令即可 -->
      <input type="text" v-model="msg"  >
  </div>

  // M:model

  let vm = new Vue({
      el: "#app",
      data: {
          msg:"hi"
      }      
  })