课程名称：2022持续升级 Vue3 从入门到实战 掌握完整知识体系
课程章节：2-1 Vue 中应用和组件的基础概念
主讲老师：Dell
课程内容：
今天学习的内容包括： Vue 中应用和组件的基础概念，2-2 理解 Vue 中的生命周期函数（1）
Vue 应用和组件知识点：
1. 双向绑定：属性和数据双向绑定
2. 组件：页面中的一部分（独立样式，数据，逻辑）
3. 可以拆分的最小组件：一个 DOM 标签
4. 组件需要定义在 app.mount('#root') 挂载点之前才能生效，当前示例的是 root 挂载点
5. Vue.createApp({ }) 是调用 createApp 方法创建一个 Vue 应用
6. MVVM 设计模式：m:model 数据层，v:view 视图层，vm:viewModel 视图数据连接层
Vue 生命周期函数知识点：
1. 生命周期函数在某一时刻会自动执行的函数
2. beforeCreate：在实例生成之前会自动执行的函数
3. created：在实例生成之后会自动执行的函数
4. beforeMount：在模板已经被编程函数之后/组件内容被渲染到页面之前立即执行的函数
5. mounted：在组件内容被渲染到页面之后自动执行的函数示例代码：
<script>
const app = Vue.createApp({
data() {
return {
message: 'hello, world'
}
},
template: `<div>{{ message }}</div>`
});
const vm = app.mount('#root');
</script>
<script>
const app = Vue.createApp({
data() {
return {
message: 'hello, world'
}
},
// 在实例生成之前会自动执行的函数
beforeCreate() {
console.log('beforeCreate');
},
// 在实例生成之后会自动执行的函数
created() {
console.log('created');
},
// 在模板已经被编程函数之后/组件内容被渲染到页面之前立即执行的函数
beforeMount() {
console.log('beforeMount');
},
// 在组件内容被渲染到页面之后自动执行的函数
mounted() {
console.log('mounted');
}
});
app.mount('#root');
</script>课程收获：
昨天学完了第一章，今天把第二章学习了快一半。篇幅有限，这里只记录了第二章前两节知识点。配合之前学习的课程，对 Vue 和 JavaScript 的理解更进了一步。
今日课程学习时间大约花费 10 分钟。
随时随地看视频
