关与v-model双向绑定的分析

v-model本质上就是监听用户的input事件来更新数据,以及对一些情况做特殊管理.而数据的来源便是vue实例中的data.
主要就是data v-bind v-on
1.先是从data里面的数据msg通过绑定到input控件和p标签上。然后input上通过v-on:input监听控件，触发change()。
调用方法都可以默认获取e事件，e.target.value是获取调用该方法的DOM对象的value值。把value值在赋给data里的msg，就是实现了双向数据绑定的原理了。

     <template>
            <div>
                <input type="text" v-bind:value='msg' v-on:input='change' />
                <p>{{ msg }}</p>
            </div>
      </template>
    
<script>

new Vue({
        el:'#app',
       data (){
            return {
                msg:'hello双向数据绑定'
            }
        },
        methods:{
            change(e){
                this.msg = e.target.value;
            }
        }
    })
    </script>