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>