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.tagget.value' />

3.v-model修饰符

1. lazy修饰符：
默认情况下，v-model输入的数据，data 中的数据就会自动发生改变。我们可以在v-model后加上lazy，lazy 修饰符可以让数据在失去焦点或者回车时才会更新：
2.number修饰符：
在默认情况下，输入框中无论我们输入的是宇母还是数字，都会被当做字符串类型进行处理。但是如果我们希望处理的是数字类型，我们可以在v-model 后加上number，numnber修饰符可以让在输入框中输入的内容自动转成数字类型：
3. trim修饰符：
如果输入的内容首尾有很多空格，我们想要把空格去除的话，可以在v-model后加上trim，trim 修饰符可以过滤内容左右两边的空格