重点
- 表单元素数据双向绑定
- vue生命周期及相关钩子函数
表单数据绑定
- 定义变量定义为一个json,key和后端要求的字段保持一致
- 所有的表单元素通过v-model绑定数据
- 单选框 准备value
- 文本与文本框域数据绑定
表单中文本包括文本框和文本域,都通过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>
- 复选框
复选框单个勾选,选中时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