<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.red{
color: red;
}
</style>
</head>
<body>
<div id="app">
<App></App>
</div>
<script src="./vue.js"></script>
<script>
// 执行顺序beforeMount》created》mounted
// computed:
// 1.Props，methods,data和computed的初始化都是在beforeCreated和created之间完成的。
// 2.当Vue实例中的data属性变化并被computed中的计算属性（方法）引用时，所有的相关计算属性又会执行一次。
// beforeCreate:组件创建之前执行的函数，拿不到组件数据
// created:组件创建完成执行的函数，可以拿到组件数据
// beforeMount
// mounted
// beforeUpdate
// updated
//配合keep-alive
// activated 激活
// deactivated 停用
// beforeDestroy
// destroyed
Vue.component('test',{
data(){
return{
msg:'walter',
isRed:false
}
},
methods:{
handleClick(){
this.msg = 'lizzy';
this.isRed = !this.isRed
}
},
template:`
<div>
<h3 :class="{red:isRed}">{{msg}}</h3>
<button @click="handleClick">改变</button>
</div>
`,
beforeCreate(){
console.log('组件创建之前')
},
created(){
//非常重要的事情，再此时发送ajax 请求后端的数据
console.log('组件创建完成',this.$date)
},
beforeMount(){
//即将挂载：组件标签还没有渲染
console.log(document.getElementById('app'))
},
mounted(){
//挂载完成，组件标签被渲染
console.log(document.getElementById('app'))
},
beforeUpdate(){
//获取更新之前的DOM
console.log('更新之前的DOM',document.getElementById('app').innerHTML)
},
updated(){
//获取最新的DOM
console.log('更新完成的DOM',document.getElementById('app').innerHTML)
},
beforeDestroy(){
console.log('销毁之前')
},
destroyed(){
console.log('销毁完成')
},
activated(){
console.log('组件被激活了')
},
deactivated(){
console.log('组件被停用了')
}
})
const App = {
data(){
return {
isShow:true
}
},
methods: {
clickHandler(){
this.isShow = !this.isShow
}
},
template: `
<div>
<!-- //v-if 指令将根据表达式的值的真假来插入/移除-->
<keep-alive>
<test v-if="isShow"></test>
</keep-alive>
<button @click="clickHandler">改变生死</button>
</div>>`,
}
new Vue({
el:'#app',
data:{
},
components:{
//2.挂载子组件
App
}
})
</script>
</body>
</html>