v-model深入

1.v-model的基本作用

v-model的基本作用是做双向数据绑定，多用于表单元素中的双向数据绑定。

<!-- 双向数据绑定 -->
<input type="text" v-model="msg">
<span>{
  {msg}}</span>

2.VUE2中v-model的实现原理：单向数据绑定 + 原生DOM事件@input事件

@input事件是在表单数据发生变化的时候被触发，然后修改数据值即可实现双向数据绑定。

<!-- 不用v-model实现双向数据绑定 -->
<input type="text" :value="msg" @input="msg = $event.target.value">
<!-- change事件需要blur一下才会触发 -->
<input type="text" :value="msg" @change="msg = $event.target.value">
<span>{
  {msg}}</span>

@input与@change事件的区别?

@input是当表单输入发生变化的时候就会触发，没有其他条件，而@change事件需要失去焦点才会触发事件。

3.v-model实现父子之间数据同步&#x