<
!doctype html>
<
html
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
title
>生命周期</
title
>
<
script
src
=
"js/vue.js"
></
script
>
</
head
>
<
body
>
<
div
id
=
"container"
>
<
p
>{{msg}}</
p
>
<!--点击的时候isShow进行取反 -->
<
button
@
click
=
"isShow = !isShow"
>切换是否显示组件</
button
>
<
my-component
v-if
=
"isShow"
></
my-component
>
</
div
>
<
script
>
Vue.component("my-component",{
template:`
<
div
>
<
button
@
click
=
"handleClick"
>Click Me</
button
>
<
h1
>component:{{count}}</
h1
>
</
div
>
`,
data:function(){
return {
count:0
}
},
methods:{
handleClick:function(){
this.count++;
}
},
beforeCreate: function () {
console.log('准备创建组件');
},
created: function () {
console.log('组件创建完毕');
},
beforeMount: function () {
console.log('组件的模板准备挂载到DOM');
},
mounted: function () {
console.log('挂载完毕');
},
beforeUpdate: function () {
console.log('准备更新了');
},
updated:function(){
console.log('更新完成');
},
beforeDestroy: function () {
console.log('准备destroy');
},
destroyed: function () {
console.log('destroy完成');
}
})
new Vue({
el:"#container",
data:{
msg:"Hello VueJs",
isShow:true
}
})
</
script
>
</
body
>
</
html
>