什么是双向数据绑定

Vue中使用v-model可以实现表单元素和数据之间的双向绑定，即修改表单的值，data中对应变量的值也会被修改。在data对应变量中修改值，被绑定的表单值也会被修改；所以称之为双向绑定。

简单举例理解一下：

<!--
   v-model 可以用在input中也可以用在textarea中 。
    他包含两个指令：
    一个v-bind,把message的值时时放到value中，
    另一个v-on ,给当前元素绑定input事件
-->
<input type="text" v-model="message">
<!--上面的代码等同于下方的 -->
<input type="text" v-bind:value="message" @input="changeValue">
<!-- 可以直接写在监听事件里 -->
<input type="text" v-bind:value="message" @input="message = $event.target.value">

```javascript
export default {
    data() {
        return {
            message:'学前端'
        }
    }
    methods: {
       changeValue(event) {
           //有事件时会产生event（里面包含想要的信息）
           //在上面的html中不需要加，在此传的event会自动传过去
           //这个target.value是最新的value，复制给message即可
           //所以input的value值发生变化时,message的值也会变化  ,同时message的值也是value值
           this.message = event.target.value
         }
     }
}

v-module双向绑定的底层原理:
数据绑定+事件绑定
通过v-bind:value=‘message’,将value属性和message数据进行绑定,那么msg的值就会影响value的值;
然后通过通过v-on:input=‘msg=$event.target.value’，给文本添加了一个input事件

原理代码

<div id="app">
  {{msg}}
  <!-- 将value属性和msg数据进行绑定,那么msg数据变化时也会影响到value -->
  <div><input v-bind:value='msg' v-on:input='handle' type="text"></div>
</div>
<script src="../vue.js"></script>
<script type="text/javascript">
  var vm = new Vue({
    el: "#app",
    data: {
      msg: 'hello'
    },
    methods: {
      handle: function (e) {
        //表格的value值发生变化时,msg的值也会变化  ,同时msg的值也是value值
        this.msg = e.target.value;
      }
    }
  })

</script>