您的位置:首页 > 产品设计 > UI/UE

vue教程2-01 vue生命周期、钩子函数

2017-04-27 09:45 501 查看
vue教程2-01 vue生命周期、钩子函数

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<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>


网上找来一张流程图:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: