# Vue.js 表单数据收集实现分析
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 移动端视口配置 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue表单数据收集</title>
<!-- 引入Vue.js库 -->
<script src="../js/vue.js"></script>
</head>
<body>
<!-- Vue实例挂载点 -->
<div id="app">
<!-- 显示数据绑定 -->
<h1>{{msg}}</h1>
<!-- 表单提交使用.prevent修饰符阻止默认提交行为 -->
<form @submit.prevent="send">
<!-- 文本输入框 - 用户名 -->
用户名：<input type="text" v-model="user.username"><br><br>
<!-- 密码框 -->
密码：<input type="password" v-model="user.pwd"><br><br>
<!-- 数字输入框 - 使用.number修饰符自动转换类型 -->
年龄：<input type="number" v-model.number="user.age"><br><br>
<!-- 单选框组 - 通过v-model绑定同一属性实现互斥 -->
性别：
男<input type="radio" name="gender" value="1" v-model="user.gender">
女<input type="radio" name="gender" value="0" v-model="user.gender"><br><br>
<!-- 复选框组 - 绑定到数组类型 -->
爱好：
抽烟<input type="checkbox" v-model="user.interest" value="chouyan">
喝酒<input type="checkbox" v-model="user.interest" value="hejiu">
烫头<input type="checkbox" v-model="user.interest" value="tangtou"><br><br>
<!-- 下拉选择框 -->
学历:
<select v-model="user.grade">
<option value="">请选择学历</option>
<option value="zk">专科</option>
<option value="bk">本科</option>
<option value="ss">硕士</option>
</select><br><br>
<!-- 多行文本域 - 使用.lazy修饰符在change事件后更新 -->
简介：<textarea name="" id="" cols="50" rows="10" v-model.lazy="user.introduce"></textarea><br><br>
<!-- 单个复选框 - 绑定布尔值 -->
<input type="checkbox" v-model="user.accept">阅读并接受协议<br><br>
<!-- 提交按钮 -->
<button>注册</button>
</form>
</div>
<script>
// 创建Vue实例
new Vue({
el: "#app", // 挂载到id为app的元素
// 数据对象
data: {
// 用户信息对象，包含所有表单字段
user: {
username: '', // 文本输入
pwd: '', // 密码
age: '', // 数字
gender: '1', // 单选默认值（男）
interest: [], // 多选数组
grade: '', // 下拉选择
introduce: '', // 多行文本
accept: '' // 协议接受状态
},
msg: '收集表单数据' // 页面标题
},
// 方法定义
methods: {
// 表单提交处理函数
send() {
// 将user对象转为JSON字符串并打印到控制台
console.log(JSON.stringify(this.user));
// 实际应用中这里可发送AJAX请求
}
}
})
</script>
</body>
</html>
功能说明
1. 数据绑定机制
- 使用
v-model指令实现双向数据绑定 - 表单输入值自动同步到Vue数据对象
- 初始化数据自动填充到表单
2. 表单控件处理
| 控件类型 | 数据处理方式 | Vue修饰符 | 注意事项 |
|---|---|---|---|
| 文本输入 | 字符串 | - | 默认文本类型 |
| 密码输入 | 字符串 | - | 前端不加密 |
| 数字输入 | 数字类型 | .number |
自动转换输入为数字 |
| 单选框 | 字符串（value值） | - | 需设置相同name分组 |
| 复选框（多选） | 数组（包含选中项value） | - | 需绑定到数组类型字段 |
| 下拉选择 | 字符串（option的value） | - | 可设置默认选中项 |
| 多行文本 | 字符串 | .lazy |
延迟更新（失焦时更新） |
| 单个复选框 | 布尔值 | - | 表示是否选中状态 |
3. 表单提交处理
@submit.prevent="send"：阻止默认表单提交行为- 提交时调用
send方法处理数据 - 当前实现为打印JSON到控制台（实际开发可替换为AJAX提交）
4. 修饰符应用
.number：将输入值自动转为数字类型.lazy：延迟同步数据（在change事件后更新）.prevent：阻止默认表单提交行为
数据格式说明
表单提交时，将生成以下格式的JSON数据：
{
"username": "输入的用户名",
"pwd": "密码明文",
"age": 25,
"gender": "1",
"interest": ["chouyan", "hejiu"],
"grade": "bk",
"introduce": "用户简介文本",
"accept": true
}
安全注意事项
- 密码字段在前端是明文传输，实际项目中应使用HTTPS
- 重要数据需在后端进行二次验证
- 年龄等数字字段需设置范围验证
- 协议接受字段应添加必选验证
提示：实际项目中建议添加表单验证逻辑，可使用Vuelidate或VeeValidate等验证库增强数据安全性