主要操作技能:
1. 生命周期函数的的定义:
就是组件挂载、以及组件更新、组件销毁的时候触发的一系列方法。也叫生命周期钩子
2. 生命周期图示:
编写代码:
Lify.vue组件
<template>
<div id="life">
生命周期函数的使用! -->{{msg}}<br />
<button @click="setMsg()">执行方法改变msg</button>
</div>
</template>
<script>
export default {
data() {
return {
msg: '这是一个生命周期函数'
}
},
methods: {
setMsg() {
this.msg = '我是改变后的数据';
}
}, //不能放在methods中哦!
beforeCreate() {
console.log('实例创建之前-1')
},
created() {
console.log('实例创建完成-2')
},
beforeMount() {
console.log('模板编译之前-3')
},
mounted() { //请求数据操作dom,放在这里哦!
console.log('模板编译完成-4')
},
beforeUpdate() {
console.log('数据更新之前-5')
},
updated() {
console.log('数据更新完成-6')
},
beforeDestroy() { //页面销毁的时候再保存数据,就可以监听这个生命周期函数
console.log('实例销毁之前-7')
},
destroyed() {
console.log('实例销毁完成-8')
}
}
</script>
Home.vue组件
<template>
<!--所以的内容多要被根节点包含起来 -->
<div>
<v-header></v-header> <!--3.使用组件-->
<v-life v-if="flag"></v-life>
<br /><br />
<button @click="flag=!flag">挂载或卸载Lify组件</button>
</div>
</template>
<script>
import Header from './Header.vue'; //1.引入头部组件
import Life from './Lify.vue';
export default {
data() { //数据
return {
msg: '我是首页组件',
flag:true //标识Lify组件哦
}
},
methods: { //方法
run() {
return alert(this.msg);
}
},
components:{ //2.挂载组件
'v-header':Header ,
'v-life':Life
}
}
</script>
<style lang="scss" scoped>
/*css 局部作用域scoped */
h2{
color:red;
}
</style>
App.vue根组件
<template>
<div id="app">
<!--3.在模板中使用-->
<v-home></v-home>
</div>
</template>
<script>
/**
* https://cn.vuejs.org/v2/guide/instance.html
* 生命周期函数:也叫生命周期钩子
* 组件挂载、以及组件更新、组件销毁的时候触发的一系列方法。
*/
import Home from './components/Home.vue'; //1.引入组件
export default {
name: 'app',
data() { //业务逻辑的数据
return {
msg: 'hello'
}
},
components: { //2.挂载组件
/*前面组件名称不能与html标签相同*/
'v-home': Home
},
mounted(){
console.log('我是一个生命周期函数!')
}
}
</script>
效果:
1)初始化加载
2)单击修改
3)单击挂载
4)再次单击挂载按钮,就会重新加载Vue实例
5)单击改变msg按钮,修改数据
6)再次单击挂载按钮,销毁Vue实例