您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“Vue.js的生命周期詳細(xì)講解”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“Vue.js的生命周期詳細(xì)講解”吧!
用Vue框架,熟悉它的生命周期可以讓開發(fā)更好的進(jìn)行。
首先先看看官網(wǎng)的圖,詳細(xì)的給出了vue的生命周期:
它可以總共分為8個階段:
beforeCreate(創(chuàng)建前),
created(創(chuàng)建后),
beforeMount(載入前),
mounted(載入后),
beforeUpdate(更新前),
updated(更新后),
beforeDestroy(銷毀前),
destroyed(銷毀后)
然后用一個實例的demo 來演示一下具體的效果:
<div id=app>{{a}}</div>
<script> var myVue = new Vue({ el: "#app", data: { a: "Vue.js" }, beforeCreate: function() { console.log("創(chuàng)建前") console.log(this.a) console.log(this.$el) }, created: function() { console.log("創(chuàng)建之后"); console.log(this.a) console.log(this.$el) }, beforeMount: function() { console.log("mount之前") console.log(this.a) console.log(this.$el) }, mounted: function() { console.log("mount之后") console.log(this.a) console.log(this.$el) }, beforeUpdate: function() { console.log("更新前"); console.log(this.a) console.log(this.$el) }, updated: function() { console.log("更新完成"); console.log(this.a); console.log(this.$el) }, beforeDestroy: function() { console.log("銷毀前"); console.log(this.a) console.log(this.$el) console.log(this.$el) }, destroyed: function() { console.log("已銷毀"); console.log(this.a) console.log(this.$el) } }); </script>
運行后,查看控制臺,
得到這個:
然后再methods 里面添加一個change方法:
<div id=app>{{a}} <button v-on:click="change">change</button> </div>
點擊按鈕之后出現(xiàn)的是:
這就是vue的生命周期,很簡單吧。
到此,相信大家對“Vue.js的生命周期詳細(xì)講解”有了更深的了解,不妨來實際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。