master

分支 (1)

管理

管理

master

learn-vue
/
demo_016.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
</head>
<body>
    <!--
        Vue实例的生命周期
    -->

    <div id="app">
        {{msg}}
        <br />
        <button @click="f1">点点</button>
        <button @click="f2">销毁</button>
    </div>

    <script>
        // Vue的生命周期中的钩子函数，一共有8个。
        // Vue的生命周期函数，必须与el、data和methods平级，不能写在methods里面。
        var app = new Vue({
            el: "#app",
            data: {
                msg: "葵花宝典"
            },
            // beforeCreate的执行时机，是在刚刚实例化玩Vue的对象后，就执行。此时Vue实例还没有任何属性
            beforeCreate() {
                console.log("beforeCreate: " + this.msg);
            },
            created() {
                console.log("created: " + this.msg);
            },
            beforeMount() {
                var app = document.getElementById("app");
                console.log("beforeMount: " + app.innerHTML);
            },
            mounted() {
                var app = document.getElementById("app");
                console.log("mounted: " + app.innerHTML);
            },
            beforeUpdate() {
                console.log("beforeUpdate: " + this.msg);
                var app = document.getElementById("app");
                console.log("beforeUpdate: " + app.innerHTML);
            },
            updated() {
                console.log("updated: " + this.msg);
                var app = document.getElementById("app");
                console.log("updated: " + app.innerHTML);
            },
            beforeDestroy() {
                console.log("beforeDestroy");
            },
            destroyed() {
                console.log("destroyed");
            },
            methods: {
                f1() {
                    this.msg = "降龙十八掌";
                },
                f2() {
                    this.$destroy();
                }
            }

        });
    </script>

</body>
</html>