# 表单处理
在日常的开发中，表单随处都被使用到，如：登录，问题反馈功能等。对表单的数据收集和绑定也是很常规的工作。在一般开发中处理表单，需要通过操作 DOM 来实现，是一个相对繁琐且低效率的工作。然而在 Vue 项目中你可以用 v-model 指令在表单 <input> 、 <textarea> 及 <select> 元素上创建双向数据绑定。轻松地实现表单数据收集或绑定，提高了开发效率。它会根据控件类型自动选取正确的方法来更新元素。负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。接下来带领大家看看其基础用法。
# 知识点
- v-model 指令
- 基础用法
- 值绑定
- 修饰符
# 基本用法
# 常用表单元素
| 元素 | |
|---|---|
| input[type=*] | 文本输入框 |
| textarea | 多行文本 |
| radio | 单选按钮 |
| checkbox | 复选框 |
| select | 选择框 |
# 注意
注意一 ： v-model 会忽略所有表单元素的 value 、 checked 、 selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。直接给元素 value 赋值不会生效的，你应该通过 JavaScript 在组件的 data 选项中声明初始值。
注意二 ： v-model 在内部使用不同的属性为不同的输入元素并抛出不同的事件，具体体现我们在表单 修饰符小节 ，给大家说明：
- text 和 textarea 元素使用
value属性和input事件（内部监听 input 事件）； - checkbox 和 radio 使用
checked属性和change事件（内部监听 change 事件）； - select 字段将
value作为 prop 并将change作为事件（内部监听 change 事件）。
说明： change 和 input 区别就是，input 实时更新数据，change 不是实时更新。
input 监听
change 监听
带着注意事项，进入 Vue 表单处理学习。
# 文本
直接为文本绑定 v-model 指令，在 data 数据项中声明绑定数据项，可以轻松完成双向数据绑定。让我们来看看神奇的 v-model 指令。
使用以下命令获取 vue.js 文件。
wget https://labfile.oss.aliyuncs.com/courses/1262/vue.min.js |
例子：
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
<meta http-equiv="X-UA-Compatible" content="ie=edge" /> | |
<title>syl-vue-test</title> | |
<!-- 引入 vue.js --> | |
<script src="vue.min.js"></script> | |
</head> | |
<body> | |
<div id="app"> | |
<input v-model="msg" placeholder="请输入..." /> | |
<p>输入的是: |
