Vue从入门到实战：实例 用户注册
来自CloudWiki
传统上，表单提交前，通常要把发送的数据先组织成一个Javascript对象或者数组，转化为JSON字符串，使用Ajax发送数据到服务端。
使用Vue,数据组织为对象的过程变得异常简单了。可以使用v-model指令将输入控件直接绑定到某个对象的属性上，然后使用v-on指令绑定提交按钮的click事件，在事件处理函数直接发送该对象即可。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户注册</title>
</head>
<body>
<div id = "app">
<form>
<table border="0">
<tr>
<td>用户名:</td>
<td>
<input type="text" name="username" v-model="user.username">
</td>
</tr>
<tr>
<td>密码:</td>
<td>
<input type="password" name="password" v-model="user.password">
</td>
</tr>
<tr>
<td>性别：</td>
<td>
<input type="radio" name="gender" value="1" v-model="user.gender">男
<input type="radio" name="gender" value="0" v-model="user.gender">女
</td>
</tr>
<tr>
<td>邮件地址：</td>
<td>
<input type="text" name="email" v-model="user.email">
</td>
</tr>
<tr>
<td>密码问题：</td>
<td>
<input type="text" name="pwdQuestion" v-model="user.pwdQuestion">
</td>
</tr>
<tr>
<td>密码答案：</td>
<td>
<input type="text" name="pwdAnswer" v-model="user.pwdAnswer">
</td>
</tr>
<tr>
<td>
<input type="submit" value="注册" @click.prevent="register">
</td>
<td><input type="reset" value="重填"></td>
</tr>
</table>
</form>
</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
user: {
username: '',
password: '',
gender: '',
email: '',
pwdQuestion: '',
pwdAnswer: ''
}
},
methods: {
register: function(){
//直接发送this.user对象
//...
console.log(this.user);
}
}
});
</script>
</body>
</html>
在提交按钮上，我们绑定的click事件时使用了prevent修饰符，这是因为本例并不希望表单的默认提交行为发生，因此使用prevent修饰符来阻止表单的默认提交行为。
浏览器console:
email: "maxin5452@163.com" gender: "1" password: "000000" pwdAnswer: "123" pwdQuestion: "123" username: "20150815"
