vue 生命周期初探第二天

最新推荐文章于 2024-09-30 11:04:46 发布

Johnny Tong

最新推荐文章于 2024-09-30 11:04:46 发布

阅读量123

点赞数 3

分类专栏： HTML自学历程文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/tongwei117/article/details/137167317

版权

HTML自学历程专栏收录该内容

23 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello</title>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

</head>
<body>

    <div id="root"></div>

    
</body>

<script>

// 创建 vue实例
// createApp 表示创建一个 vue 应用，存储到 app 变量中
// mvvm 设计模式， m -> model 数据，v -> view 视图， vm -> viewModel 视图数据连接

   const app = Vue.createApp({

    data(){
        return {
            message: 'hello world！'
        }
    },

    // 生命周期函数  在实例生成之前 自动执行的函数
    beforeCreate() {
        console.log(' beforeCreate');
    },

    // 在 实例生成之后会自动执行的函数
    created() {
        console.log('created');

    },

    // 在 组件内容被渲染到页面之前 自动执行 的函数
    beforeMount() {
        console.log(document.getElementById('root').innerHTML, 'beforeMount' )
    },

    // 在 组件内容被渲染到页面之后 自动执行的函数
    mounted() {
        console.log(document.getElementById('root').innerHTML, 'mounted' )

    },

    // 当 data 中的数据 发生变哈时 会自动执行的函数
    beforeUpdate() {
        console.log(document.getElementById('root').innerHTML,'beforeUpdate')
    },

    // 当 data 中的数据发生变化， 同时 页面完成更新后，会自动执行的函数
    updated() {
        console.log(document.getElementById('root').innerHTML,'updated')
    },

    // 当 vue 应用失效时，自动执行的函数
    beforeUnmount() {
        console.log('beforeUnmount')
    },

    // 当 vue 应用失效时， 且 dom 完全销毁之后，自动执行的函数
    unmounted() {
        console.log('unmounted')
    },

    template: "<div>{{message}}</div>"

    });

    // vm 代表的就是 vue 应用的根组件
   const vm = app.mount('#root');
    
</script>

</html>