Vue基础---表单数据绑定及生命周期
表单数据绑定及vue生命周期
- 重点
-
- 表单数据绑定
- 生命周期(vue重点）
重点
- 表单元素数据双向绑定
- 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="checkbox" v-model="user.isAgree">我同意
div>
<script>
new Vue({
el: "#app",//挂载点
data: {//属性
user: {
hobbies: ['sing','dancing'],
isAgree: true
}
}
})
script>
- 单选框
<div>性别：
<input type="radio" name="sex" value="0" v-model="user.sex"> 男
<input type="radio" name="sex" value="1" v-model="user.sex"> 女
div>
<script>
new Vue({
el: "#app",//挂载点
data: {//属性
user: {
sex: "0",
}
}
})
script>
- 选择列表
<div>专业：
<select v-model="user.job">
<option value="web">web工程师option>
<option value="php">php工程师option>
<option value="java">java工程师option>
select>
div>
<div> 社团：
<select multiple v-model="user.org">
<option :value="1">篮球option>
<option :value="2">足球option>
<option :value="3">排球option>
select>
div>
<script>
new Vue({
el: "#app",//挂载点
data: {//属性
user: {
job: "web",
org: [1,2,3]
}
}
})
script>
生命周期(vue重点）
vue实例被创建之前都有一个初始化过程，一个完整的生命周期。从开始的创建、初始化数据、编译模板、挂载DOM、渲染、更新、卸载等一系列过程被称为生命周期，同时在整个过程中回运行一些生命周期的钩子函数，用户可以在不同阶段添加自己的代码
Vue生命周期的八个阶段：
beforeCreate： 创建之前
created： 创建完成
beforeMount： 挂载之前
mounted： 挂载完成
beforeUpdate： 更新之前
updated： 更新完成
beforeDestroy： 卸载之前
destoryed： 卸载完成
Vue官方称这些为钩子函数，钩子函数就是在某阶段给你一个做某些处理的机会
beforeCreate： 创建之前 el,data,methods都为undefined
created： 创建完成 data,methods初始化完成，el为undefined
beforeMount： 挂载之前 el为挂载标签，但页面{{}}还在
mounted： 挂载完成 挂载完成，页面完成
beforeUpdate： 更新之前 不是数据变化之前，而是数据已经变了，页面重新渲染之前
updated： 更新完成
beforeDestroy： 卸载之前
destoryed： 卸载完成
生命周期：
<div id="app">
<input type="text" v-model="msg">
<h1>{{msg}}h1>
div>
<button class="destory">销毁button>
<button class="mount">挂载button>
<script>
var vue = new Vue({
el:"#app",
data(){
return{
msg:"天道酬勤"
}
},
//渲染期
// 创建完成
created(){
console.log("-----------创建完成-------------");
console.log(this.$el);
console.log(this.$data);
},
// 创建之前
beforeCreate(){
console.log("-----------创建之前-------------");
console.log(this.$el);
console.log(this.$data);
},
// 挂载之前
beforeMount(){
console.log("-----------挂载之前-------------");
console.log(this.$el);
console.log(this.$data);
},
// 挂载完成
beforeMount(){
console.log("-----------挂载完成------------");
console.log(this.$el);
console.log(this.$data);
},
// 更新之前
beforeUpdate(){
console.log("-----------更新之前-------------");
console.log(this.$el);
console.log(this.$data);
},
// 更新完成
updated(){
console.log("-----------更新完成-------------");
console.log(this.$el);
console.log(this.$data);
},
// 销毁之前
beforeDestory(){
console.log("-----------销毁之前-------------");
console.log(this.$el);
console.log(this.$data);
},
// 销毁完成
destroyed(){
console.log("-----------销毁完成-------------");
console.log(this.$el);
console.log(this.$data);
}
})
// vue.$mount调用会触发beforeMount函数，vue.$destroy()方法调用回触发beforeDestroy函数
document.querySelector(".destory").onclick=function(){
// 销毁vue实例
vue.$destroy();
}
document.querySelector(".mount").onclick=function(){
// 将vue实例挂载到指定标签上
vue.$mount("#app");
}
script>
生命周期图：
