1_v-model的基本使用
表单提交是开发中常见功能，也是和用户交互的重要手段：
比如用户在登录、注册时需要提交账号密码；
比如用户在检索、创建、更新信息时，需要提交一些数据；
这些都要求可以在代码逻辑中获取到用户提交的数据，通常会使用v-model指令来完成：
v-model指令可以在表单 input、textarea以及select元素上创建双向数据绑定；
它会根据控件类型自动选取正确的方法来更新元素；
尽管如此， v-model 本质上是语法糖，它负责监听用户的输入事件来更新数据，并在某种极端场景下进行一些特殊处理；
比如下面的代码，input利用v-model实现了双向绑定。输入框中的内容，通过数据message会同时显示在h2标签中
2_v-model的原理
v-model的原理其实是背后有两个操作：
- v-bind绑定value属性的值；
- v-on绑定input事件监听到函数中，函数会获取最新的值赋值到绑定的属性中；
-
<input v-model="searchText"> 等价于 <input :value="searchText" @input="searchText = $event.target.value">_v-model修饰符
3_lazy
默认情况下，v-model在进行双向绑定时，绑定的是input事件，那么会在每次内容输入后就将最新的值和绑定的属性进行同
步；如果在v-model后跟上lazy修饰符，那么会将绑定的事件切换为 change 事件，只有在提交时（比如回车）才会触发；
<!-- 1.lazy: 绑定change事件 --><input type="text" v-model.lazy="message"><h2>message: {{message}}</h2>3_number
v-model绑定后的值总是string类型，即使在设置type为number也是string类型；如果希望转换为数字类型可以使用 .number 修饰符。 另外，在进行逻辑判断时，如果是一个string类型，在可以转化的情况下会进行隐式转换的。 下面的score在进行判断的过程中会进行隐式转化的；
<!-- 2.number: 自动将内容转换成数字 --><input type="text" v-model.number="counter"><h2>counter: {{counter}}-{{typeof counter}}</h2><input type="number" v-model="counter2"><h2>counter: {{counter2}}-{{typeof counter2}}</h2>
