v-model双向绑定详情

1.v-model的基本使用

表单提交是开发中最常见的功能，也是用户交付很重要的手段

    比如说用户的登录和注册

这些都要求我们可以再代码的逻辑中获取用户提交的数据，我们通常用v-model指令来完成，本质上，v-model不过是语法糖，并在某种场景下进行一些特殊的处理

示例：

<div>
    <input type='text' v-model='message' />
    <p> {
  {message}} </p>
</div>

2.v-model的原理又是什么？

刚刚提到了语法糖，那么v-model的语法糖又是什么？

简单易懂来说v-model语法糖就是v-bind和v-on的结合

v-bind绑定value属性值

v-on来监听函数，函数会获取新值来绑定到属性中

通过事件对象参数event.target.value获取输入的内容，并且把这个内容赋值给message，从而实现双向绑定，更改message时input输入框会变。

由于v-bind和v-on的使用起来很麻烦，就有了v-model，所以说v-model就是v-bind和v-on的语法糖

上面的代码也可以用v-bind和v-on来完成

<input type='text' v-bind='message' v-on:input='message = $event