<body>
<script src="../libs/vue.js"></script>
<div id="app">
? ? {{message}}
? ? <h3 id="h3">{{message}}</h3>
? ? <button @click="message = 'No'">改變數(shù)據(jù)</button>
</div>
<script>
? ? var app = new Vue({
? ? ? ? el: '#app',
? ? ? ? data: {
? ? ? ? ? ? message: 'ok',
? ? ? ? },
? ? ? ? methods: {
? ? ? ? ? ? show() {
? ? ? ? ? ? ? ? console.log("-----show-----被調(diào)用")
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? //第一個(gè)生命周期鉤子函數(shù)：在實(shí)例完全初始化之前雹嗦，data贯被，methods初始化之前調(diào)用
? ? ? ? beforeCreate() {
? ? ? ? ? ? console.log('=====beforeCreate=====')
? ? ? ? ? ? // console.log(this.message)
? ? ? ? ? ? // this.show()
? ? ? ? },
? ? ? ? //初始化data，和初始化methods
? ? ? ? //第二個(gè)生命周期鉤子函數(shù)： 是data methods初始化完成之后調(diào)用的函數(shù)
? ? ? ? created() {
? ? ? ? ? ? console.log('=====created=====')
? ? ? ? ? ? // console.log(this.message)
? ? ? ? ? ? // this.show()
? ? ? ? },
? ? ? ? //vue開始編譯模板，vue指令開始執(zhí)行玫锋，此時(shí)，在內(nèi)存中渲染了模板篓足，沒有掛載到頁面上。
? ? ? ? //第三個(gè)生命周期鉤子函數(shù)：模板已經(jīng)在內(nèi)存中渲染了鸭限，但是還沒有掛載到頁面上
? ? ? ? beforeMount() {
? ? ? ? ? ? console.log('=====beforeMount=====')
? ? ? ? ? ? //通過Id查找某個(gè)元素
? ? ? ? ? ? //innerText 拿到標(biāo)簽中的全部文本內(nèi)容
? ? ? ? ? ? // var text = document.getElementById('h3').innerText
? ? ? ? ? ? // console.log('beforeMount',text)
? ? ? ? },
? ? ? ? //內(nèi)存中的模板，替換到了頁面中
? ? ? ? //第四個(gè)生命周期鉤子函數(shù)：已經(jīng)掛載到頁面上
? ? ? ? mounted() {
? ? ? ? ? ? console.log('=====mounted=====')
? ? ? ? ? ? // var text = document.getElementById('h3').innerText
? ? ? ? ? ? // console.log('mounted',text)
? ? ? ? },
? ? ? ? //創(chuàng)建階段：1,2,3,4（4個(gè)鉤子函數(shù)）
? ? ? ? //mounted執(zhí)行完之后两踏，Vue實(shí)例已經(jīng)創(chuàng)建完成败京。創(chuàng)建的最后一個(gè)生命周期鉤子是mounted
? ? ? ? //運(yùn)行階段：5,6（兩個(gè)鉤子函數(shù)）
? ? ? ? //最少執(zhí)行0次，最多執(zhí)行無數(shù)次
? ? ? ? //第五個(gè)生命周期鉤子函數(shù)： 頁面還沒有更新梦染，赡麦，數(shù)據(jù)已經(jīng)更新了
? ? ? ? beforeUpdate() {
? ? ? ? ? ? console.log('=====beforeUpdate=====')
? ? ? ? ? ? // var text = document.getElementById('h3').innerText
? ? ? ? ? ? // console.log('text',text)
? ? ? ? ? ? //
? ? ? ? ? ? // console.log('message',this.message)
? ? ? ? },
? ? ? ? //現(xiàn)根據(jù)data中的新數(shù)據(jù)，重新渲染內(nèi)存中的DOM帕识，在渲染到頁面
? ? ? ? //第六個(gè)生命周期鉤子函數(shù)：頁面和數(shù)據(jù)都已經(jīng)更新了
? ? ? ? updated() {
? ? ? ? ? ? console.log('=====updated=====')
? ? ? ? ? ? var text = document.getElementById('h3').innerText
? ? ? ? ? ? console.log('text', text)
? ? ? ? ? ? console.log('message', this.message)
? ? ? ? },
? ? ? ? //銷毀階段：7,8
? ? ? ? //第七個(gè)生命周期鉤子函數(shù)：Vue實(shí)例進(jìn)步銷毀階段泛粹，所有的data和methods、指令渡冻。戚扳。。都處于可用的狀態(tài)
? ? ? ? //沒有執(zhí)行真正的銷毀過程
? ? ? ? beforeDestroy() {
? ? ? ? ? ? console.log('=====beforeDestory=====')
? ? ? ? },
? ? ? ? //第八個(gè)生命周期函數(shù)：組件已經(jīng)被銷毀族吻，所有的data帽借、methods、指令都已經(jīng)不可以
? ? ? ? destroyed() {
? ? ? ? ? ? console.log('=====destroyed=====')
? ? ? ? }
? ? ? ? //練習(xí)：創(chuàng)建Vue執(zhí)行什么生命周期鉤子函數(shù)
? ? ? ? //? =====beforeCreate=====
? ? ? ? //? =====created=====
? ? ? ? //? =====beforeMount=====
? ? ? ? //? =====mounted=====
? ? ? ? //修改data里的數(shù)據(jù)都執(zhí)行什么生命周期鉤子函數(shù)
? ? ? ? // =====beforeUpdate=====
? ? ? ? // =====updated=====
? ? })
</script>
</body>
