vue实例生命周期解析

最新推荐文章于 2024-01-28 16:15:04 发布

你是人间五月天

最新推荐文章于 2024-01-28 16:15:04 发布

阅读量97

点赞数

分类专栏： vue 文章标签： vue web前端

本文链接：https://blog.csdn.net/u012758488/article/details/90050314

版权

vue 专栏收录该内容

40 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <p id="testP">
            {{ message }}
        </p>
    </div>
</body>
<script>

    //创建一个vue实例
    //当我们导入包之后，在浏览器的内存中就多了一个vue构造函数
    var vm = new Vue({
        el: '#app',//表示当前我们new的这个vue实例要控制页面上的哪个区域
        data: { //data属性中存放的是el中要用到的数据
            message:'测试'
        },
        methods: {
            showTest: function(){
                console.log("测试测试测试测试测试");
            }
        },
        //创建时事件
        beforeCreate(){
            //在beforeCreate函数执行的时候，data和methods中的数据都还未被初始化
        },
        created(){
            //created中，data和methods中的数据已被初始化好
        },
        beforeMount(){
            //表示模板已经在内存中编译完成，但尚未把模板渲染到页面中去
            //页面中的元素还未被真正替换,只是一些模板字符串
            console.log(document.getElementById("testP").innerHTML);
        },
        mounted(){
            //表示内存中的模板已经被挂载到了页面，用户已经可以看到渲染好的页面了
            //mounted是实例创建期间最后一个生命周期函数，当执行完mounted就表示实例已经被完全创建好了
        },

        //运行时事件
        beforeUpdate(){
            //界面还未被更新，数据已经被更新了
        },
        updated(){
            //界面和数据已经保持同步，都是最新的了
        }
    });
</script>
</html>

你是人间五月天

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue实例生命周期解析

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
复制链接

扫一扫

专栏目录