Vue 生命周期(六)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_38287952/article/details/88088142

   生命周期图

   

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue实例生命周期函数</title>
    <script src="./vue.js"></script>
</head>
<body>
<div id="app"></div>
<script>
    // 生命周期函数就是vue实例在某一个时间节点自动执行的函数
    var vm = new Vue({
        el : '#app',
        template: "<div id='app'>{{test}}</div>",
        data : {
            test : 'hwllosadas'
        },
        beforeCreate: function () {
            console.log('beforeCreate');
        },
        created: function() {
            console.log('created');
        },
        beforeMount: function() {
            console.log(this.$el);
            console.log('beforeMount');
        },
        mounted: function() {
            console.log(this.$el);
            console.log('mounted');
        },
        beforeDestroy: function() {
            console.log("beforeDestroy");
        },
        destroyed: function() {
            console.log("destroyed");
        },
        beforeUpdate: function() {
            console.log("beforeUpdate");
        },
        updated: function() {
            console.log("updated");
        }
    });
</script>
</body>
</html>

 

展开阅读全文

没有更多推荐了,返回首页