vue2.0+基础知识连载（11）--- 生命周期

本文链接：https://blog.csdn.net/yuzhiboyouzhu/article/details/79116094

<!DOCTYPE html>
<html>

<head>
    <title>vue2.0+基础知识连载（11）--- 生命周期</title>
</head>

<body>

    <h3>vue2.0+基础知识连载（11）--- 生命周期</h3>

    <div id='app'>
        <p>{{msg}}</p>
        <p><input type="button" value="更新数据" @click="update()"></p>
        <p><input type="button" value="销毁组件" @click="destroy()"></p>
    </div>

    <script src="https://cdn.bootcss.com/vue/2.5.8/vue.min.js"></script>
    <script type="text/javascript">

        var vm = new Vue({
            data: {
                msg: 'vue生命周期'
            },
            methods: {
                update: function() {
                    this.msg = '大家好';
                },
                destroy: function() {
                    this.$destroy();
                }
            },
            beforeCreate: function() {
                alert("组件实例刚刚被创建");
            },
            created: function() {
                alert("实例已经创建完成");
            },
            beforeMount: function() {
                alert("模板编译之前");
            },
            mounted: function() {
                alert("模板编译完成");
            },
            beforeUpdate: function() {
                alert('组件更新之前');
            },
            updated: function() {
                alert('组件更新完毕');
            },
            beforeDestroy: function() {
                alert('组件销毁之前');
            },
            destroyed: function() {
                alert('组件销毁之后');
            }
        }).$mount('#app');

    </script>
</body>
</html>