一个基础但全面的Vue的表单范例，很基础，但是很容易，也很全面。

下面这个案例，路人朋友们可以直接粘贴到html文件类型中运行，注意引入Vuejs的路径即可，不会改的可以参考我第一篇Vue入门，同时建议同志们手打，真的前端都不能熟能生巧，既不要编程了，
可以详细看注释，这是一个Vue的表单，基本涵盖了大部分内容，美观的话没有考虑css，后续可以考虑引入第三方插件，譬如阿里巴巴矢量库，Echarts或者其他的UI设计师。
书山有路勤为径，学海无涯苦作舟，看到尤雨溪大佬每天的工作，我就打了鸡血，要向他学习！！！

<!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>Document</title><script src="../../vue.js/vue.js"></script></head><body><div id="app"><form @submit.prevent="submit"><!-- 表单由三部分组成，表单的条件函数，input框由用户输入，其中input框可以设置类型，并且v-model进行bind --><!-- input 有三种类型，一种是用户自己输入，一种是checkbox，它的value值有两种，一种是true，一种是false，第三个是radio，他是一个圆形的复选框 -->账号: <input type="text" v-model="userInfo.username"><br>密码: <input type="password" v-model="userInfo.password"><br>手机号： <input type="number" v-model="userInfo.phoneNumber"><br>性别：男<input type="radio" value="male" v-model="userInfo.sex"> 女 <input type="radio" value="female" v-model="userInfo.sex"> <br><!-- 思考为什么要是数组，因为我们value值是同useInfo.direction绑定的，他是v-model的双向绑定，一定变化会引起其他三个都变化，即一个选中，其他三个都会选中 -->方向：前端<input type="checkbox" value="前端" v-model="userInfo.direction"> 后端<input type="checkbox" value="后端" v-model="userInfo.direction"> 测试 <input type="checkbox" value="测试" v-model="userInfo.direction"> <br>地区: <select name="" id="" v-model="userInfo.city"><option value="">请选择地区</option><option value="beijing">北京</option><option value="shanghai">上海</option><option value="guangzhou">广州</option><option value="shenzhen">深圳</option><option value="hangzhou">杭州</option><option value="suzhou">苏州</option><option value="ningbo">宁波</option><option value="xiongan">雄安</option></select><br>备注 <textarea v-model="userInfo.back"></textarea><br><input type="checkbox" v-model="userInfo.agree">请阅读并接受<a href="https://xdclass.net">用户协议</a></form></div><script>Vue.config.productionTip=false;let vm=new Vue({el:'#app',data:{userInfo:{username:'',password:'',phoneNumber:'',city:"",direction:[],sex:"",back:'',              agree:''},},methods: {submit(){console.log("提交表单数据")}},})</script></body>
</html>