Vue之生命周期

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title></title>  
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">  
    <meta name="apple-mobile-web-app-capable" content="yes">  
    <meta name="apple-mobile-web-app-status-bar-style" content="black">  
    <style>  
  
    </style>  
    <script src="vue.js"></script>  
</head>  
<body>  
    <div id="box">  
        {{msg}}  
    </div>  
    <script>  
        var vm=new Vue({  
            el:'#box',  
            data:{  
                msg:'well'  
            },  
            created:function(){  
                alert('实例已经创建');  
            },  
            beforeCompile:function(){  
                alert('编译之前');  
            },  
            compiled:function(){  
                alert('编译之后');  
            },  
            ready:function(){  
                alert('插入到文档中');  
            },  
            beforeDestroy:function(){  
                alert('销毁之前');  
            },  
            destroyed:function(){  
                alert('销毁之后');  
            }  
        });  
  
        /*点击页面销毁vue对象*/  
        document.onclick=function(){  
            vm.$destroy();  
        };  
    </script>  
</body>  
</html>  

 

posted @ 2017-10-22 11:58  逗比煎饼侠  阅读(135)  评论(1编辑  收藏  举报