【九月打卡】第2天 Vue 中应用和组件的基础概念

课程名称：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 分钟。