Vue语法原理：v-model实现原理

vue中的v-model能够实现数据的双向绑定，也是vue的最突出的优势。其实v-model实际上是一个语法糖。其中的原理很简单，主要包括属性绑定和事件监听两部分，废话不多说，先举个v-model实现数据双向绑定的例子：

  <div id="app">
    <p>v-model绑定的数据为：{{value1}}</p>
    <input type="text" v-model="value1">
  </div>
  <script src="./lib/vue.js"></script>

<script>
  const vm = new Vue({
    el: '#app',
    data: {
      value1: ''
    }
  })
</script>

实现的效果如下：
当你在input输入框中输入内容的时候，上面p标签里面的数据实时发生变化（实际上是value1这个数据发生了响应式变化）。相反改变代码中value1值，input输入框中值也会实时变化。

其原理实现如下：

  <div id="app">
    <p>v-model绑定的数据为：{{value1}}</p>
    <input type="text" v-model="value1">

++  <p>绑定的数据为：{{value2}}</p>
++  <input type="text" :value="value2" @input="changeVal">
  </div>

  <script src="./lib/vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        value1: '',
++      value2: ''
      },
++    methods: {
++      changeVal (e) {
++        this.value2 = e.target.value
++      }
++    }
    })
  </script>

实现效果与v-model相同：

解释：

1. 首先input输入框通过属性绑定:value="value2"得到响应数据value。(model → view)
2. 定义一个changeVal函数，通过e.target得到input框中的value值。
3. 最后input输入框通过@input事件监听，绑定changeVal函数，将input框中的value值传给value2。（view → model）