1. **v - model的本质与用途**
- **本质是语法糖**：`v - model`实际上是`v - bind`和`v - on`指令的语法糖。在表单元素中，它简化了数据双向绑定的过程，让开发者可以更方便地处理表单数据与组件数据之间的交互。
- **用途是双向数据绑定**：用于在表单元素（如`input`、`select`、`textarea`）和组件的数据之间建立双向的数据连接。这意味着当用户在表单元素中输入或选择内容时，组件中的数据会自动更新；反之，当组件中的数据发生变化时，表单元素也会相应地更新显示内容。
2. **在不同表单元素中的具体应用**
- **文本输入框（`input[type="text"]`）**
- **基本用法**：假设在一个Vue组件中，有一个`data`属性用于存储用户输入的文本内容。首先在组件的`data`函数中定义这个属性：
```javascript
export default {
data() {
return {
inputText: ''
};
}
};
```
- 然后在模板中使用`v - model`将文本输入框和`inputText`属性绑定：
```vue
<template>
<input type="text" v - model="inputText">
<p>当前输入的文本是: {{ inputText }}</p>
</template>
```
- 当用户在输入框中输入文字时，`inputText`的值会随着用户的输入实时更新。同时，由于数据绑定是双向的，若在组件的其他方法中修改了`inputText`的值（例如通过一个按钮点击事件来修改），输入框中的文本内容也会同步改变。
- **复选框（`input[type="checkbox"]`）**
- **单个复选框**：对于单个复选框，`v - model`绑定的是一个布尔值。当复选框被选中时，绑定的布尔值为`true`；未选中时为`false`。例如：
```javascript
export default {
data() {
return {
isChecked: false
};
}
};
```
```vue
<template>
<input type="checkbox" v - model="isChecked">
<p>复选框状态: {{ isChecked }}</p>
</template>
```
- **多个复选框**：当有多个复选框时，`v - model`绑定的是一个数组。数组中的元素是被选中的复选框的`value`属性值。例如，有一组爱好复选框：
```javascript
export default {
data() {
return {
selectedHobbies: []
};
}
};
```
```vue
<template>
<input type="checkbox" v - model="selectedHobbies" value="阅读">阅读
<input type="checkbox" v - model="selectedHobbies" value="运动">运动
<input type="checkbox" v - model="selectedHobbies" value="音乐">音乐
<p>选中的爱好: {{ selectedHobbies }}</p>
</template>
```
- 当用户勾选或取消勾选复选框时，`selectedHobbies`数组会相应地添加或移除元素。
- **单选框（`input[type="radio"]`）**
- 对于单选框，`v - model`绑定一个值，一组单选框共享同一个`v - model`绑定。每个单选框有不同的`value`属性，当用户选择一个单选框时，`v - model`绑定的值就会更新为所选单选框的`value`。例如，选择性别：
```javascript
export default {
data() {
return {
gender: '男'
};
}
};
```
```vue
<template>
<input type="radio" v - model="gender" value="男">男
<input type="radio" v - model="gender" value="女">女
<p>选择的性别: {{ gender }}</p>
</template>
```
- **文本域（`textarea`）**
- 文本域和文本输入框类似，`v - model`用于建立文本域内容和组件数据之间的双向绑定。例如：
```javascript
export default {
data() {
return {
textareaContent: ''
};
}
};
```
```vue
<template>
<textarea v - model="textareaContent"></textarea>
<p>文本域内容: {{ textareaContent }}</p>
</template>
```
- 用户在文本域中输入、删除或修改内容时，`textareaContent`的值会同步更新，反之亦然。
- **下拉框（`select`）**
- **单选下拉框**：`v - model`绑定一个值，这个值与下拉框选项中的`value`属性相对应。例如，选择一个城市：
```javascript
export default {
data() {
return {
selectedCity: '北京'
};
}
};
```
```vue
<template>
<select v - model="selectedCity">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
</select>
<p>选择的城市: {{ selectedCity }}</p>
</template>
```
- 当用户选择不同的选项时，`selectedCity`的值会更新为所选选项的`value`。
- **多选下拉框**：`v - model`绑定一个数组，数组中的元素是被选中的选项的`value`属性值。例如，选择多个课程：
```javascript
export default {
data() {
return {
selectedCourses: []
};
}
};
```
```vue
<template>
<select v - model="selectedCourses" multiple>
<option value="数学">数学</option>
<option value="语文">语文</option>
<option value="英语">英语</option>
</select>
<p>选择的课程: {{ selectedCourses }}</p>
</template>
```
- 用户通过按住`Ctrl`（在Windows和Linux系统中）或`Command`（在Mac系统中）键并选择选项来进行多选，`selectedCourses`数组会相应地更新。
3. **在自定义组件中使用v - model**
- 在自定义组件中使用`v - model`需要遵循一定的规则。实际上，`v - model`在组件上是`v - bind:value`和`v - on:input`的组合。
- 例如，创建一个简单的自定义组件`MyInput`，它内部包含一个`input`元素：
```vue
<template>
<input :value="value" @input="emitInput($event)">
</template>
<script>
export default {
props: ['value'],
methods: {
emitInput(event) {
this.$emit('input', event.target.value);
}
}
};
</script>
```
- 在父组件中使用这个自定义组件时，可以像使用普通的`input`元素一样使用`v - model`：
```vue
<template>
<MyInput v - model="inputValue"></MyInput>
<p>组件中的输入值: {{ inputValue }}</p>
</template>
<script>
export default {
data() {
return {
inputValue: ''
};
}
};
</script>
```
- 当`input`元素在自定义组件内部触发`input`事件时，通过`$emit`方法将新的值传递给父组件，实现了组件数据的双向绑定。这种方式使得自定义组件在行为上更像原生的表单元素，方便了组件的复用和数据交互。