- 加入我的QQ群
- 关注我的百家号
扫描下面的二维码,“关注”我的百家号。
前面我们介绍过根组件App.vue,本章我们要介绍非根组件。我们项目的代码编写一般就是在这些非根组件中进行的。接下来我们就来介绍如何创建这类组件,以及组件的生命周期函数。
一:创建组件。
1:在src目录下创建一个components组件目录。
2:再在components组件目录下创建一个home.vue组件。
vue组件的后缀名是vue,home组件的代码跟根组件的代码组成类似,代码如下:
<template>
<div>
我是home页面 -- {{msg}}
</div>
</template>
<script>
export default {
data(){
return{
msg:'我是home页面',
}
}
}
</script>
<style lang="scss"> </style>
我们可以在components目录下创建自己想要实现的任何组件。
3:在根组件中引用home组件
第一步:引入home组件文件:
import home from “./components/home.vue”;
第二步:挂载声明home组件:
components:{
‘v-home’:home,
}
第三步:使用home组件:
<v-home></v-home>
app.vue完整代码如下:
<template>
<div>
<v-home></v-home> 使用home组件
</div>
</template>
<script>
import home from "./components/home.vue"; //引入组件文件
export default {
data(){ },
components:{ //挂载声明组件
'v-home':home,
}
}
</script>
<style ></style>
二:组件的生命周期函数。
生命周期函数/生命周期钩子: 组件挂载、以及组件更新、组件销毁、的时候触发的一系列的方法 这些方法就叫做生命周期函数。
export default{
data(){ return{ } },
beforeCreate(){ //组件创建前函数
console.log('实例刚刚被创建1');
},
created(){ //组件创建后
console.log('实例已经创建完成2');
},
beforeMount(){ //组件挂载前
console.log('模板编译挂载之前3');
},
mounted(){ /*组件挂载后函数。请求数据,操作dom , 放在这个里面*/
console.log('模板编译挂载完成4');
},
beforeUpdate(){ //组件更新前函数
console.log('数据更新之前');
},
updated(){ //组件更新后
console.log('数据更新完毕');
},
beforeDestroy(){ /*组件销毁前函数。*/
console.log('实例销毁之前');
},
destroyed(){ //组件销毁后
console.log('实例销毁完成');
}
}
组件的生命周期函数在vue开发过程是非常用的,如:mounted组件挂载完成后函数我们就会经常用到它。所以,这些周期函数,我们要熟练掌握它们。
vue的知识真的可以多了解了解一下。
是的,重新再次学习一下也很好。
不好意思,灌水下,我差几分下载视频,谢谢了
点赞点赞点赞点赞点赞点赞
学习了!学习了!学习了!
点赞点赞点赞点赞点赞点赞
周期函数弄明白才能理解什么时候拿数据和调用函数
qazwsxedc 点赞