Vue基础---表单数据绑定及生命周期

重点

1. 表单元素数据双向绑定
2. vue生命周期及相关钩子函数

表单数据绑定

 - 定义变量定义为一个json,key和后端要求的字段保持一致
 - 所有的表单元素通过v-model绑定数据
 - 单选框 准备value

1. 文本与文本框域数据绑定
   表单中文本包括文本框和文本域，都通过v-model进行数据的双向绑定

<div id="app">
	<input type="text" v-model="msg">
	<p>这是文本框内容:{
  {msg}}</p>
	<textarea v-model="content" cols="20" rows="4" ></textarea>
	<span>这是文本域内容：{
  {content}}</span>
</div>
<script>
new Vue({
    
	el:"#app",
	data:{
    
		msg:"hello world",
		content:"this is textContent"
})
</script>

2. 复选框
   复选框单个勾选，选中时check时ture，取消是false；多个勾选，被勾选的选项会自动绑定到指定变量名队对应的值上

	<div>爱好：
    	<input type="checkbox" v-model="user.hobbies" value="sing">唱歌
        <input type="checkbox" v-model="user.hobbies" value="dancing">跳舞
        <input type="checkbox" v-model="user.hobbies" value="codding">写代码
    </div>
    <div>
        <input type