md-Blog，基于.md文件生成的MarkDown博客系统。 简单、实用、归纳、管理。
Powered by md-Blog  文 - 篇  访客 -

Vue.js的生命周期图示


  分类：Vue  / 
更新：2020-11-01 17:25:27  /  创建：2020-03-30 10:50:34
不要删除

VueLife

<!DOCTYPE html>
<html>

<head>
    <div id='div1' v-bind:title="div_title">
        {{hello_message}}
    </div>
</head>

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var v1 = new Vue({
            el: "#div1",
            data: {
                hello_message: "Hello, there welcome to VueJS world",
                div_title: "This is my intro div",
            },
            beforeCreate: function () {
                alert('Before Create');
            },
            created: function () {
                alert('Created');
            },
            beforeMount: function () {
                alert('Before Mount');
            },
            mounted: function () {
                alert('Mounted');
            },
            beforeUpdate: function () {
                alert('Before Update');
            },
            updated: function () {
                alert('Updated');
            },
            beforeDestroy: function () {
                alert('Before Destroy');
            },
            destroyed: function () {
                alert('Destroyed');
            }
        });
        // To fire update
        v1.$data.hello_message = "New message";
// This can be invoked to destroy the object, which will fire the destroy hook
//v1.$destroy();
    </script>
</body>

</html>

不要删除

小站不易，感谢支持！