v-model 原理 是什么

　　1、v-model指令的作用

　　vue中的v-model指令是完成双向绑定的，用在表单元素上。双向绑定就是 M会影响V。V也会影响M。即：能将页面上输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值。

　　2、v-model的原理

　　v-model指令是一个语法糖，是属性绑定和事件的语法糖。vue会根据不同的表单元素使用不同的属性和事件。

　　如下：

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

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

　　select 字段将 value 作为 prop 并将 change 作为事件。

　　以文本框为例剖析原理，以下是代码：　

<!-- 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来完成以上功能的代码如下：　

<!-- 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"
      }      
  })