表单的简单了解

表单

作用：

通过表单向服务器发送数据

常用的控件：
文本输入框（index,text）

密码输入框（input,password）

下拉菜单（select,option）

单选框（input ,radio）

复选框（input,checkbox)

提交按钮（button）

用到的技术点：

数据双向绑定：
通过v-model指令在文本输入框中（input标签中）对数据进行双向绑定

传统的前端代码进行表单提交的时候需要在form标签内写入跳转路径和提交方法，而在vue中我们使用ajax来实现表单的提交，也就是通过异步数据交换的方式来实现，使用vue无须进行跳转与刷新，但是需要用到（prevent）,所以需要在VUE中的form标签中需要绑定事件（@submit）。

<template>
    <div id="app">
        <h1>欢迎{{message}}</h1>
        <!-- 以往都是从action里写提交的路径，这样会造成页面跳转，vue利用ajax异步请求来更新页面。 -->
        <!-- <form action=""> 


        @submit.prevent来取消表单提交的默认行为 -->
    <form @submit.prevent="postData">
	<div>
		<lable>用户名：</lable>
		<input type="text" v-model="formData.username">
	</div>
	<div>
		<lable>密 码：&nbsp;&nbsp;</lable>
		
		<input type="password" v-model="formData.pwd">
	</div>
	<div>
		<label for="">爱 好：&nbsp;&nbsp;</label>
		<select v-model="formData.hby">
			<option value="football">足球</option>
			<option value="basketball">篮球</option>
		</select>
	</div>
	<div>
		<lable>性别：</lable>
		<label for="">男</label>
		<input type="radio" value="男" v-model="formData.sex">
		<label for="">女</label>
		<input type="radio" value="女" v-model="formData.sex">
	</div>
	<div>
		<label for="">技能：</label>
		<label for="">前端</label>
		<input type="checkbox" value="前端" v-model="formData.skill">
		<label for="">Java：</label>
		<input type="checkbox" value="Java" v-model="formData.skill">
	</div>
	<button>提交表单</button>
</form>


    </div>
</template>
<script>
export default{

	data(){
		return{
			formData: {			//创建一个对象
				username:"",
				pwd:"",
				hby:"",
				sex:"",
				skill:[]
			}
		}
	},
	methods:{
		postData(){
			console.log(this.formData)
		}
	}

}

</script>
<style>
div{
    width: 300px;
    height: 100px;
    background-color: aliceblue;
}
</style>