vue生命周期
含义:Vue 实例从 创建 到 销毁 的整个过程就是生命周期
钩子函数
Vue 框架内置函数,随着组件的生命周期阶段,自动执行
作用: 特定的时间点,执行特定的操作
场景: 组件创建完毕后,可以在created 生命周期函数中发起Ajax 请求,从而初始化 data 数据
分类: 4大阶段8个方法
阶段 | 方法名 | 方法名 |
---|---|---|
创建 | beforeCreate | created |
挂载 | beforeMount | mounted |
更新 | beforeUpdate | updated |
销毁 | beforeDestroy | destroyed |
生命周期钩子函数
<template>
<div id="app">
<h1>生命周期钩子函数--每个钩子函数都代表人生的每个阶段</h1>
<LifeCyCle v-if="flag"></LifeCyCle>
<button @click="destroyedFun">销毁组件</button>
</div>
</template>
<script>
import LifeCyCle from '@/components/LifeCyCle.vue'
export default {
name: 'App',
data(){
return {
flag:true
}
},
methods:{
destroyedFun(){
this.flag =false
}
},
components:{
LifeCyCle
}
}
</script>
<style>
</style>
LifeCyCle.vue
<template>
<div id="app">
<h1>生命周期钩子函数--每个钩子函数都代表人生的每个阶段</h1>
<div id="box">{{ msg }}</div>
<button @click="changeMsg">修改数据</button>
</div>
</template>
<script>
export default {
name: 'LifeCyCle',
data(){
return {
msg:"hello wrold",
timer:""
}
},
methods:{
changeMsg(){
let that =this;
that.msg = '小明'
},
},
components:{
},
// 生命周期钩子函数
// 创建之前
beforeCreate(){
console.log('beforeCreate创建之前');
console.log('this.msg',this.msg);
},
// 创建之后
created(){
console.log('created创建之后');
console.log('this.msg',this.msg);
this.timer = setInterval(()=>{
console.log('定时器')
},1000)
},
// 挂载之前
beforeMount(){
console.log('beforeMount挂载之前');
console.log("document.getElementById('box')",document.getElementById('box'))
},
// 挂载之后
mounted(){
console.log('mounted挂载之后');
console.log("document.getElementById('box')",document.getElementById('box'))
},
// 更新前
beforeUpdate(){
console.log('beforeUpdate更新前');
console.log('this.msg',this.msg);
console.log('更新之前',document.getElementById('box').innerText)
},
// 更新后
updated(){
console.log('updated更新后');
console.log('this.msg',this.msg);
console.log('更新之后',document.getElementById('box').innerText)
},
// 销毁前
beforeDestroy(){
console.log('beforeDestroy销毁前');
clearInterval(this.timer)
},
// 销毁后
destroyed(){
console.log('destroyed销毁后');
clearInterval(this.timer)
}
}
</script>
<style>
</style>
增删改
<template>
<div id="app">
<div class="container">
<button class="unshift" @click="addAll">添加</button>
<button class="shift" @click="deleAll" style="width: 80px;">批量删除</button>
<table class="take" border="1" cellspacing="0">
<tr class="nav">
<td>
<input type="checkbox" id="selectAll" :checked="isChecked" @click="selectAll(isChecked)">
<label for="selectAll">全选</label>
</td>
<td v-for="(item) in look" :key="item.id">
{{ item.title }}
</td>
<td>操作</td>
</tr>
<tr v-for="(item,index) in book" :key="item.index">
<td>
<input type="checkbox" @change="selectOne(index,isChecked)" :checked="item.select">
</td>
<td>{{ item.id }}</td>
<td>{{ item.username }}</td>
<td>{{ item.age }}</td>
<td>
<button class="btn unshift" @click="ediText(index)">修改</button>
<button class="btn shift" @click="del(index)">删除</button>
</td>
</tr>
</table>
<form action="" v-if="showAdd">
<h2>添加用户</h2>
<div class="form-group">
<label for="">学号</label>
<input type="text" class="form-control" v-model="addUser.id">
</div>
<div class="form-group">
<label for="">姓名</label>
<input type="text" class="form-control" v-model="addUser.username">
</div>
<div class="form-group">
<label for="">年龄</label>
<input type="text" class="form-control" v-model="addUser.age">
</div>
<div class="form-group">
<button class="btn btn-success btn-block" type="button" @click="sureAdd">确认添加</button>
</div>
</form>
<form action="" v-if="showEdit">
<h2>添加用户</h2>
<div class="form-group">
<label for="">学号</label>
<input type="text" v-model="editUser.id" class="form-control">
</div>
<div class="form-group">
<label for="">姓名</label>
<input type="text" v-model="editUser.username" class="form-control">
</div>
<div class="form-group">
<label for="">年龄</label>
<input type="text" v-model="editUser.age" class="form-control">
</div>
<div class="form-group">
<button class="btn btn-success btn-block" @click="editAdd" type="button">确定修改</button>
</div>
</form>
</div>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return {
showAdd:false,
showEdit:false,
look:[
{
id:1,
title:'学号',
sortStr:'id'
},
{
id:2,
title:'姓名',
sortStr:"username"
},
{
id:3,
title:"age",
sortStr:"age"
}
],
book:[
{
id:1,
username:'张三',
age:18
},
{
id:2,
username:'李四',
age:28
},
{
id:3,
username:'王五',
age:38
},
],
addUser:{
id:'',
username:'',
age:''
},
editUser: {
id: "",
username: "",
age: ""
},
}
},
computed:{
isChecked(){
let that = this;
// every()方法用于检测数组中的所有元素是否都满足指定条件(该条件为一个函数)。该方法返回一个布尔值。
// every()方法会遍历数组的每一项,如果有有一项不满足条件,则表达式返回false,
// 剩余的项将不会再执行检测;如果遍历完数组后,每一项都符合条,则返回true。
return that.book.every(function(item){
return item.select;
})
// return that.book.every((item)=>{
// return item.select;
// })
}
},
methods:{
// 添加
addAll(){
let that = this;
that.showAdd = true;
},
sureAdd(){
let that = this;
that.book.unshift(that.addUser);
that.showAdd = false;
},
// 删除
del(index){
let that = this;
// .splice(index,1) 用来删除数组中指定索引位置的元素。
// 其中 index 参数表示要删除元素的索引位置,1 表示要删除的元素数量。
that.book.splice(index,1);
},
// 修改
editAdd(){
let that = this;
that.showEdit = false;
},
ediText(index){
let that = this;
that.showEdit = true;
// 将当前对象的book数组中索引为index的元素赋值给editUser变量。
that.editUser= that.book[index];
},
// 全选
selectAll(isChecked){
let that =this;
console.log(isChecked);
for (let i = 0; i < that.book.length; i++) {
// 通过that.$set方法向这个对象添加一个属性select,
// 并设置其值为!isChecked。
// 这样做可以确保select属性的变化能够触发视图的更新
that.$set(that.book[i], "select", !isChecked); // 用于向响应式对象添加一个属性,并确保新属性同样是响应式的,以便在视图中得到更新。
// 作用是在that.book[i]对象上设置一个名为select的属性,
// 并将其值设置为!isChecked。这里,!isChecked是一个逻辑非操作,
// 它将isChecked的值取反。如果isChecked是true,
// 那么!isChecked就是false,反之亦然
}
},
// 点击批量删除
deleAll(){
let that = this;
// 执行数组过滤操作
// 数组的filter方法,它接受一个回调函数作为参数。这个回调函数会被数组中的每个元素调用一次,
// 回调函数的参数(在这个例子中是item)是当前正在处理的数组元素。
that.book = that.book.filter(function(item){
// 这是回调函数的返回语句。它检查当前元素(item)的select属性是否为true。
// 如果item.select是true,则!item.select是false,这意味着该元素不会被包含在过滤后的数组中。
return !item.select;
})
// that.book = that.book.filter((item) =>{
// return !item.select;
// })
},
selectOne(index,isChecked) {
let that = this;
// 使用 Vue 实例的 $set 方法来更新数组 that.book 中索引为 index 的元素
// select是that.book[index]这个对象的一个属性。
// !isChecked表示,如果isChecked是true则变为false,
that.$set(that.book[index],'select',!isChecked);
}
}
}
</script>
<style>
.container {
width: 1000px;
margin: 0 auto;
}
.take {
width: 100%;
}
tr{
width: 1000px;
height: 50px;
border: 1px solid #ddd;
}
.nav{
font-weight: 800;
}
.shift {
background-color: #d9534f;
color: white;
border: none;
width: 50px;
height: 30px;
}
.shift:hover {
color: #fff;
background-color: #c9302c;
border-color: #ac2925;
}
.unshift {
background-color: #337ab7 ;
color: white;
border: none;
width: 50px;
height: 30px;
}
.unshift:hover {
color: #fff;
background-color: #286090;
border-color: #204d74;
}
button{
border-radius: 3px;
cursor: pointer;
}
</style>