表单输入绑定

1. 双向绑定

数据的绑定，无论是使用插值表达式 { {}} 还是 v-text 指令，对于数据间的交互都是单向的，只能将 Vue 实例里定义的值传递给页面，页面数据的任何操作无法传递给 model

1-1 v-model使用

可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素

v-model 是语法糖，默认情况下相当于 :value 和 @input，负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理

v-model 会忽略所有表单元素的 value、checked、selected 属性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值

v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：

• text 和 textarea 元素使用 value 属性和 input 事件
• checkbox 和 radio 使用 checked 属性和 change 事件
• select 字段将 value 作为 prop 并将 change 作为事件

<!-- v-model用于表单与数据双向绑定 -->
<input type="text" v-model="inputValue" value="Hello Vue">
<h3>{
  {inputValue}}</h3>
<!-- v-model会忽略所有变表单的属性初始值，会用Vue实例数据作为属性值 -->
<textarea name="" v-model="textareValue" value="Hello Vue"></textarea>
<h3>{
  {textareValue}}</h3>

el: '#app',
data: function() {
   
  return {
   
    inputValue: '文本框双向绑定',
    textareValue: '文本域双向绑定'
  }
}

1-1 文本

文本框双向绑定是通过动态绑定元素的 value 属性，以及触发文本框的 input 事件来实现的

<!-- 文本框通过:value绑定属性 @input触发事件修改属性值 -->
<input type="text" v-model="inputValue">
<h3>{
  {inputValue}}</h3>

el: '#app',
data: function() {
   
  return {
   
    inputValue: '文本双向绑定'
  }
}

1-2 多行文本

文本域多行文本双向绑定是通过动态绑定元素的 value 属性，以及触发文本域的 input 事件来实现的

在文本区域插值 (<textarea>{ {text}}</textarea>) 并不会生效，应用 v-model 来代替

<!-- 多行文本textarea通过:value绑定属性 @input触发事件修改属性值 -->
<textarea v-model="textareaValue"></textarea>
<!-- <textarea v-model="textareaValue">{
   {textareaValue}}</textarea> -->
<!-- 文本区域插值不会生效必须使用v-model来代替 -->
<h3>{
  {textareaValue}}</h3>

el: '#app',
data: function() {
   
  return {
   
    textareaValue: 'Hello Vue'
  }
}

1-3 复选框

复选框双向绑定是通过动态绑定元素的 checked 属性，以及触发复选框的 change 事件来实现的

• 绑定单个复选框使用布尔值
• 绑定多个复选框使用数组

复选框如果不提供 value 属性，则表示复选框绑定的是 checked 属性，提供 value 属性，则表示复选框绑定的是 value 属性

<!-- 复选框双向绑定通过:checked属性以及@change事件修改属性值 -->
<!-- 单个复选框绑定布尔类型值 -->
<input type="checkbox" v-model="checked">
<h3>{
  {checked}}</h3>

<!-- 多行复选框绑定数组类型值 -->
<label for="">篮球</label>
<input type="checkbox" v-model="checkboxArr"  value="篮球">

<label for="<