vue基础---10生命周期

2021年09月15日 阅读数:2
这篇文章主要向大家介绍vue基础---10生命周期,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

00.生命周期javascript

<!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="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{message}}</h1>
        <h1 :class="className">hello</h1>
    </div>
    <script type="text/javascript">
        var app=new Vue({
            el:"#app",
            data:{
                message:"hello vue",
                className:"active"
            },
            beforeCreate(){//创造前
                // 数据data和方法methods还未绑定到应用对象app上
                console.log('beforCreate');
            },
            created(){//创造
                // 数据data和方法methods绑定到应用对象app上
                console.log('created');                
            },
            beforeMount(){//渲染前
                //根据数据生成的DOM对象是获取不到的
                console.log('beforeMount');
            },
            mounted(){//渲染
                console.log('mountd');
            },
            methods:{
                clickEvent:function(){    
            }
            },
            beforeUpdate() {
                //数据更改,但内容未更改以前
                console.log('beforeUpdate')
            },
            updated() {
                //内容已更新完毕
                console.log('update')
            },
            beforeDestroy() {
                //应用销毁以前
                console.log("beforeDestory")
            },
            destroyed(){
                //应用销毁以后
                console.log("Destory")
            }        
        })
    </script>
</body>
</html>