vue---生命周期及组件基础

  

<body>
        <div id="app">
            <h1>{{msg}}</h1>
        </div>
        <script type="text/javascript">
            var app=new Vue({
                el:"#app",
                data:{
                    msg:"hello"
                },
                beforeCreate(){
                    console.log("beforeCreate")
                    //此时数据data和事件方法methods还未绑定到app对象上
                },
                created() {
                    console.log("created")
                    //数据data和方法methods绑定到应用对象app上
                },
                beforeMount() {
                    console.log("beforeMount")
                    //渲染之前根据数据生成的DOM对象是拿不到的
                },
                mounted() {
                    console.log("mounted")
                    //渲染之后可以获取数据生成的DOM对象
                },
                methods:{
                    clickEvent:function(){
                        
                    }
                },
                beforeUpdate() {
                    console.log('beforeUpdate')
                    //数据更改,但内容未更改之前
                }
                updated() {
                    console.log('updated')
                    //内容已更新完毕
                }
                
            })
        </script>
    </body>

猜你喜欢

转载自www.cnblogs.com/by-young/p/12977090.html