Vue之生命周期

来源:互联网 发布:java导入进度条 编辑:程序博客网 时间:2024/06/18 09:26
<!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>