<body>
<script src="../libs/vue.js"></script>
<div id="app">
{{message}}
<h3 id="h3">{{message}}</h3>
<button @click="message = 'No'">改变数据</button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'ok',
},
methods: {
show() {
console.log("-----show-----被调用")
}
},
//第一个生命周期钩子函数：在实例完全初始化之前，data，methods初始化之前调用
beforeCreate() {
console.log('=====beforeCreate=====')
// console.log(this.message)
// this.show()
},
//初始化data，和初始化methods
//第二个生命周期钩子函数： 是data methods初始化完成之后调用的函数
created() {
console.log('=====created=====')
// console.log(this.message)
// this.show()
},
//vue开始编译模板，vue指令开始执行，此时，在内存中渲染了模板，没有挂载到页面上。
//第三个生命周期钩子函数：模板已经在内存中渲染了，但是还没有挂载到页面上
beforeMount() {
console.log('=====beforeMount=====')
//通过Id查找某个元素
//innerText 拿到标签中的全部文本内容
// var text = document.getElementById('h3').innerText
// console.log('beforeMount',text)
},
//内存中的模板，替换到了页面中
//第四个生命周期钩子函数：已经挂载到页面上
mounted() {
console.log('=====mounted=====')
// var text = document.getElementById('h3').innerText
// console.log('mounted',text)
},
//创建阶段：1,2,3,4（4个钩子函数）
//mounted执行完之后，Vue实例已经创建完成。创建的最后一个生命周期钩子是mounted
//运行阶段：5,6（两个钩子函数）
//最少执行0次，最多执行无数次
//第五个生命周期钩子函数： 页面还没有更新，，数据已经更新了
beforeUpdate() {
console.log('=====beforeUpdate=====')
// var text = document.getElementById('h3').innerText
// console.log('text',text)
//
// console.log('message',this.message)
},
//现根据data中的新数据，重新渲染内存中的DOM，在渲染到页面
//第六个生命周期钩子函数：页面和数据都已经更新了
updated() {
console.log('=====updated=====')
var text = document.getElementById('h3').innerText
console.log('text', text)
console.log('message', this.message)
},
//销毁阶段：7,8
//第七个生命周期钩子函数：Vue实例进步销毁阶段，所有的data和methods、指令。。。都处于可用的状态
//没有执行真正的销毁过程
beforeDestroy() {
console.log('=====beforeDestory=====')
},
//第八个生命周期函数：组件已经被销毁，所有的data、methods、指令都已经不可以
destroyed() {
console.log('=====destroyed=====')
}
//练习：创建Vue执行什么生命周期钩子函数
// =====beforeCreate=====
// =====created=====
// =====beforeMount=====
// =====mounted=====
//修改data里的数据都执行什么生命周期钩子函数
// =====beforeUpdate=====
// =====updated=====
})
</script>
</body>
网友评论