组件
- 组件都放在 /src/components/ 下
- 组件建议使用大写字母开头，驼峰命名法，后缀名为 .vue
- 一个常见的组件定义如下
<!-- 模板 -->
<template>
<div>
</div>
</template>
<!-- 业务逻辑 -->
<script>
// 暴露组件
export default {
name: 'HomePage', // 这里的 name 建议和组件文件名一样
}
</script>
<!-- 样式 scoped 告诉 Vue 这里面的 css 代码只对该组件有效 -->
<style scoped>
</style>
在根组件上手动挂载其他组件
- 引用组件，在 script 中
import 暴露的名称 from './components/组件文件的名称.vue'; - 注册组件，在 script 中
components: { //填写要注册的组件名称 } - 在模板上使用标签的形式挂载
<组件名称></组件名称>
所有组件的模板都是必须有一个根元素把其他内容包起来。（说白了就是要个最大的 div）
简单解释生命周期函数
- 前面的代码中用过
mounted()函数，是指组件被挂载后自动调用的生命周期函数，是生命周期函数之一，初次之外，还有beforeMount(),beforeCreated,created()等很多生命周期函数，都是组件在实例化和运行过程中某一阶段（某个时间点）会自动调用的函数：
// 一些生命周期函数
beforeCreate() {
console.log('开始创建组件');
},
created() {
console.log('组件创建成功');
},
beforeMount() {
console.log('准备挂载组件');
},
mounted() {
console.log('组件挂载完毕');
},
beforeDestroy() {
console.log('准备卸载组件'); // 这个 生命钩子 可以用于保存用户临时输入一些信息却又要切换页面时的数据
},
destroyed() {
console.log('组件卸载完毕');
}
- 可以使用
v-if="布尔值"改变该布尔值来实现挂载/卸载组件。
# 模板
<HomePage v-if="flag"></HomePage>
<input type="checkbox" v-model="flag"> 挂载/销毁组件
# 脚本里面写一个 flag 属性为布尔值即可。
