生命周期图
image
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue测试</title>
<script src="vue.js"></script>
</head>
<body>
<div id="d1">
<!--父组件向子组件传递is_show参数-->
<!--内置组件，将子组件缓存起来，减少销毁和创建的损耗-->
<keep-alive>
<App v-if="isShow"></App>
</keep-alive>
<button @click="display">点我</button>
</div>
</body>
<script>
var App={
data(){
return{
msg:'app',
}
},
template:'' +
'<div id="app" @click="change_btn">' +
'<h1>APP</h1>'+
'<span>{{msg}}</span>' +
'</div>',
methods:{
change_btn:function () {
this.msg='alex'
},
},
beforeCreate(){
// 当前组件创建前
console.log('------------------------');
console.log('创建前....');
// console.log(this.msg) // undefined
},
created(){
// 组件创建后,可以操作数据，发送ajax请求
console.log('创建成功！！...');
// console.log(document.getElementById('app'))
},
beforeMount(){
// 装载数据到DOM之前调用
// console.log('beforeMount....')
// console.log(document.getElementById('app'))
},
mounted(){
// 组件已经被渲染成DOM标签,可以直接操作DOM元素
// console.log('mounted....');
// console.log(document.getElementById('app'))
},
beforeUpdate(){
// 更新之前被调用，获取原始DOM
// console.log('beforeUpdate....');
// console.log(document.getElementById('app').innerHTML);
},
updated(){
// 更新之后，获取最新的DOM
// console.log('updated....');
// console.log(document.getElementById('app'));
},
beforeDestroy(){
console.log('销毁前....')
},
destroyed(){
// 销毁后
console.log('销毁....')
},
activated(){
console.log('组件被激活！')
},
deactivated(){
console.log('组件被停用了！')
}
};
new Vue({
el: '#d1', // 绑定根元素
data:{
isShow:true
},
methods:{
display:function () {
if(this.isShow){
this.isShow=false
}
else {
this.isShow=true
}
}
},
components:{
App:App
},
});
</script>
</html>
网友评论