v-model 的本质

v-model 本质上不过是语法糖，v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件。

举个例子

<template>
    <div>
        <input type="text" v-model="msg" placeholder="请输入">
        <p>{{ msg }}</p>
    </div>
</template>

<script>
export default {
    data () {
        return {
            msg: 'Hello'
        }
    }
}
</script>

当组件 mounted 阶段结束后，输入框中的默认值就是 Hello。

• 我们可以认为输入框中的 value属性绑定了 data 中的 msg 属性。

当我们尝试修改输入框中的 value，也会发现 P 标签中的 msg，会发生变化。

• 所以输入框中的 value 属性值也会影响 deta 中的 msg 的值。

这就是v-model的双向绑定，两个相互绑定的值相互影响。

我来试试

我们用自己的方式实现一下这个功能

<template>
    <div>
          <input type="text" v-bind:value="myMsg" v-on:input="myInput">
          <p>{{ myMsg }}</p>
    </div>
</template>

 <script>
export default {
    data () {
        return {
            msg: 'Hello'
        }
    },
    methods: {
        myInput (e) {
          this.myMsg = e.target.value
        }
    }
}
</script>

我们可以看到一样可以实现双向绑定，v-model 的效果。

举一反三

从上面的例子中，可以看到，v-model 其实是封装了某种方法，负责监听用户的输入事件以更新数据，并对一些极端场景进行特殊处理，从而达到了双向绑定的效果，

v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。

你应该通过 JavaScript 在组件的 data 选项中声明初始值。

v-model 在不同的 HTML 标签上使用会监控不同的属性和抛出不同的事件：

• text 和 textarea 元素使用 value 属性和 input 事件

• checkbox 和 radio 使用 checked 属性和 change 事件

• select 字段将 value 作为 prop 并将 change 作为事件