Home组件加载 Header和Lify组件
Header.vue
<template>
<div>
<h2 class="header">这是一个头部组件</h2>
</div>
</template>
<script>
export default {
data(){
return{
msg:'这是一个头部组件'
}
}
};
</script>
<style lang="scss">
.header{
background:#000;
color:#fff;
}
</style>
Lify.vue
<template>
<!-- 所有的内容要被根节点包含起来 -->
<div id="life">
生命周期函数的演示 ---{{msg}}
<br>
<button @click="setMsg()">执行方法改变msg</button>
</div>
</template>
<script>
/*
生命周期函数/生命周期钩子：
组件挂载、以及组件更新、组件销毁、的时候触发的一系列的方法 这些方法就叫做生命周期函数
自动调用相对应的函数执行
*/
export default{
data(){
return{
msg:'msg'
}
},
methods:{
setMsg(){
this.msg="我是改变后的数据"
}
},
beforeCreate(){
console.log('实例刚刚被创建1');
},
created(){
console.log('实例已经创建完成2');
},
beforeMount(){
console.log('模板编译之前3');
},
mounted(){ /*请求数据，操作dom , 放在这个里面 mounted*/
console.log('模板编译完成4');
},
beforeUpdate(){
console.log('数据更新之前');
},
updated(){
console.log('数据更新完毕');
},
beforeDestroy(){ /*页面销毁的时候要保存一些数据，就可以监听这个销毁的生命周期函数*/
console.log('实例销毁之前');
},
destroyed(){
console.log('实例销毁完成');
}
}
</script>
Home.vue
<template>
<!-- 所有的内容要被根节点包含起来 -->
<div id="home">
<v-header></v-header>
<br>
<hr>
<!-- true/false是否显示 -->
<v-life v-if="flag"></v-life>
<br>
<br>
<br>
<button @click="flag=!flag">挂载以及卸载life组件</button>
</div>
</template>
<script>
//引入头部组件
import Header from './Header.vue';
import Life from './Lify.vue';
export default{
data(){
return {
msg:'我是一个首页组件msg',
flag:true
}
},
methods:{
run(){
alert(this.msg);
}
},
components:{
'v-header':Header,
'v-life':Life
}
}
</script>
<style lang="scss" scoped>
/*css 局部作用域 scoped*/
h2{
color:red
}
</style>