v-model底层原理

v-model主要是实现表单的双向数据绑定
解析
1、改变数据，视图自动改变 v-bind:value
2、视图改变，数据自动改变 v-on:input

例：

<template>
  <div>
<!--1、默认情况 v-model等价于：value+@input-->
    <input type="text" v-model="msg1"><br>
    <input type="text" :value="msg2" @input="msg2 = $event.target.value"><br>
<!--2、 v-model.lazy等价于：value+@input-->
    <input type="text" v-model.lazy="msg3"><br>
    <input type="text" :value="msg4" @change="msg4 = $event.target.value"><br>
<!--3、在type=checkbox的时候，v-model等价于：checked+@change>
    <input type="checkbox" v-model="flag1"><br>
    <input type="checkbox" :checked="flag2" @change="flag2 = $event.target.checked">
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg1: '123',
      msg2: '345',
      msg3: '908',
      msg4: '100',
      flag1: true,
      flag2: true
    }
  },
  methods: {
    // handleInput(e) {
    //   this.msg2 = e.target.value
    // }
  }
}
</script>

<style>

</style>

注意：在模板中行内$event可以获取事件的形参，因为是原生input事件，所以形参是事件对象