<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
生命周期：
（1）挂载
- beforeCreate
- created
- beforeMount
- mounted
（2）更新
- beforeUpdate
- updated
（3）销毁
- beforeDestroy
- destroyed
创建-》挂载-》更新-》销毁
-->
<div id="app">
<div>{{msg0}}</div>
<div>{{msg}}</div>
<button @click="update">更新</button>
<button @click="destroy">销毁</button>
</div>
<script src="./vue/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
msg:"生命周期",
msg0:"123"
},
methods:{
update:function(){
this.msg = "hello Vue!"
},
destroy:function(){
this.$destroy();
},
},
beforeCreate:function(){
console.log('beforeCreate');
},
created:function(){
console.log('created');
},
beforeMount:function(){
console.log('beforeMount');
},
mounted:function(){
console.log('mounted');
},
beforeUpdate:function(){
this.msg0 = "before update"
console.log('beforeUpdate');
},
updated:function(){
console.log('updated');
},
beforeDestroy:function(){
console.log('beforeDestroy');
},
destroyed:function(){
console.log('destroyed');
},
});
</script>
</body>
</html>
网友评论