vue 构建单页应用 4

组件

• 组件都放在 /src/components/ 下
• 组件建议使用大写字母开头，驼峰命名法，后缀名为 .vue
• 一个常见的组件定义如下

在根组件上手动挂载其他组件

1. 引用组件，在 script 中 import 暴露的名称 from './components/组件文件的名称.vue';
2. 注册组件，在 script 中 components: { //填写要注册的组件名称 }
3. 在模板上使用标签的形式挂载 <组件名称>

所有组件的模板都是必须有一个根元素把其他内容包起来。（说白了就是要个最大的 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="布尔值" 改变该布尔值来实现挂载/卸载组件。

# 模板

 挂载/销毁组件

# 脚本里面写一个 flag 属性为布尔值即可。