（day8-1）
这一章讲的就是 v-model 和表单控件的那些事儿。
基础用法：在不同表单控件中使用 v-model 。
值绑定：v-model 中的值 和表单控件的value值绑定在了一起。
修饰符：.lazy、.number、.trim 对 v-model 的进一步修饰。
在组件上使用 v-model ：这个留到后面讲到组件的时候再来探寻。
一、基础用法
在不同的表单控件中使用 v-model 指令：
- 文本：input text
- 多行文本：textarea
- 复选框：input?checkbox （单个、多个）
- 单选按钮：input radio
- 选择框：<select> （单选、多选（multiple）、用v-for渲染动态选项）
其实在前面我们已经接触到了 v-model 指令好几次了。不过在前面，我们都是在 <input> 中使用 v-model 指令。
v-model 指令与控件之间的数据关系大致可以这么理解：
?
这里的 v-moel 里面的newText 绑定的就是各个控件的 value值。
意味着我们用表单控件做出了一些操作，输入文本也好、输入多段文本、单选也好、复选也好，这些操作的发生，就会导致控件value 的改变，这个value的值呢，我们用 v-model 指令定义的变量名来绑定。
之后，我们就可以在JavaScript不同的地方调用这个变量名，做一些我们想要完成的操作。
v-model的本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
注意：v-model 会忽略所有表单元素的 value 、 checked 、selected 属性的初始值而总是将Vue实例的数据作为数据 来源。你应该通过JavaScript在组件的 data 选项中声明初始值。
v-model 在内部为不同的输入元素使用不同的property并抛出不同的事件：
- text、textarea元素使用 value property 和input事件；
- checkbox、radio使用checked property 和change事件；
- select 字段将 value 作为prop并将 change 作为事件。
接下来我们就是要一个一个的看在不同的表单控件中使用 v-model 的情况——具体的示例就自己下去看着官网的例子一个一个的完成一边就好了，很简单。
二、值绑定
?签名有提到，在<input>中，我们的 v-model 指令定义的变量名绑定的是 <input>的value值。
这里大概有这几种控件：
- 文本：input text
- 多行文本：textarea
- 复选框：input?checkbox （单个、多个）
- 单选按钮：input radio
<!--在“change”时而非“input”时更新--> <input v-model.lazy="msg"> - 选择框：<select> （单选、多选（multiple）、用v-for渲染动态选项）
前面两个，v-model 绑定的就是它们的 value 值；
后面三个，v-model 绑定的值通常是静态字符串（对于复选框也可以是布尔值）。（在我看来，官网举的例子就是绑定它们的 value 值）
具体的示例：#复选框、#单选按钮、#选择框的选项都按照官网的示例操作一遍，很简单的。
三、修饰符
.lazy、.number、.trim
?
?# .lazy?
?默认情况下， v-model 在每次input 事件触发之后将输入框的值与数据同步，添加lazy修饰符，转为在change事件 之后 进行同步?：
<!--在"change"时而非"input"时更新-->
<input v-model.lazy="msg">??# .number
?自动将用户的输入值咋混为数值类型：
<input v-model.number="age" type="number">?这通常很有用，因为即使在?type="number"?时，HTML 输入元素的值也总会返回字符串。如果这个值无法被?parseFloat()?解析，则会返回原始的值。
???# .trim
自动过滤用户输入的首位空白字符：
<input v-model.trim="msg">?四、在组件上使用 v-model
?在后面的“深入了解组件”中讨论。?