vue中v-model的原理

<div id="app">
  <h1>{{message}}</h1>
<!--  <input type="text" v-model = "message">-->
  <input type="text" :value="message" v-on:input="valueChange">
  <!--<input type="text" :value="message" @input = "message = $event.target.value">-->
</div>
</div>
<script src="js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:"hello,vue"
    },
    methods:{
      //每个事件在浏览器上都会生成一个事件
      valueChange(event){
        //获取当前input 的值
        this.message = event.target.value
      }
    }
  })
</script>

上述代码中，v-model等于：value +v-on:input实现的效果，:value是表单绑定message，表单中的值会随着message的改变而改变；而v-on：input则是message绑定了表单，此时message会随着表单中输入的数据而改变，这就是v-model实现双向绑定的原理。