Vue的生命周期操作示例
更新時間：2019年09月17日 09:31:58 作者：Json____
這篇文章主要介紹了Vue的生命周期操作,結(jié)合實例形式分析了vue生命周期中各個函數(shù)的運(yùn)行步驟,需要的朋友可以參考下
本文實例講述了Vue的生命周期操作。分享給大家供大家參考，具體如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue的生命周期</title>
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
</head>
<body>
<h1>Vue的生命周期</h1>
<hr>
<div id="app">
{{count}}
<p><button @click="add">Add</button></p>
</div>
<button οnclick="app.$destroy()">銷毀</button>
</body>
</html>
<script>
var app = new Vue({
el:'#app',
data:{
count:1
},
methods:{
add:function () {
this.count++
}
},
//有這么多鉤子函數(shù) 一共十個
//初始化之后
beforeCreate:function(){
console.log('1-beforeCreate 初始化之后');
},
//創(chuàng)建完成
created:function(){
console.log('2-created 創(chuàng)建完成');
},
//掛載之前
beforeMount:function(){
console.log('3-beforeMount 掛載之前');
},
//被創(chuàng)建
mounted:function(){
console.log('4-mounted 被創(chuàng)建');
},
//數(shù)據(jù)更新前
beforeUpdate:function(){
console.log('5-beforeUpdate 數(shù)據(jù)更新前');
},
//被更新后
updated:function(){
console.log('6-updated 被更新后');
},
//
activated:function(){
console.log('7-activated');
},
//
deactivated:function(){
console.log('8-deactivated');
},
//銷毀之前
beforeDestroy:function(){
console.log('9-beforeDestroy 銷毀之前');
},
//銷毀之后
destroyed:function(){
console.log('10-destroyed 銷毀之后')
}
})
</script>
運(yùn)行結(jié)果：
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運(yùn)行效果。
希望本文所述對大家vue.js程序設(shè)計有所幫助。
相關(guān)文章
這篇文章主要介紹了vue+php實現(xiàn)的微博留言功能,結(jié)合完整實例形式分析了vue.js前臺留言及后臺php交互功能相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
這篇文章主要為大家詳細(xì)介紹了vue.js中使用mint-ui框架的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要介紹了vue.js數(shù)據(jù)綁定操作,結(jié)合實例形式詳細(xì)分析了vue.js數(shù)據(jù)綁定的各種常見操作技巧與相關(guān)注意事項,需要的朋友可以參考下2018-04-04
這篇文章主要介紹了?面試問題Vue雙向數(shù)據(jù)綁定原理，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-09-09
Vue3使用hooks函數(shù)實現(xiàn)代碼復(fù)用詳解
這篇文章主要介紹了Vue3使用hooks函數(shù)實現(xiàn)代碼復(fù)用詳解，Vue3的hook函數(shù)可以幫助我們提高代碼的復(fù)用性,?讓我們能在不同的組件中都利用hooks函數(shù)2022-06-06
淺談vuejs實現(xiàn)數(shù)據(jù)驅(qū)動視圖原理
這篇文章主要介紹了淺談vuejs實現(xiàn)數(shù)據(jù)驅(qū)動視圖原理，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
Vue 3中的defineEmits()和defineProps()使用小結(jié)
defineProps()和defineEmits()是Vue 3中Composition API的重要組成部分,它們分別用于定義組件接收的屬性和觸發(fā)的事件,本文給大家介紹Vue 3中的defineEmits()和defineProps()解析,感興趣的朋友跟隨小編一起看看吧2024-04-04
本篇文章主要介紹了Vue header組件開發(fā)詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
Vue.set()和this.$set()這兩個api的實現(xiàn)原理基本一模一樣,都是使用了set函數(shù),下面這篇文章主要給大家介紹了關(guān)于Vue.set與this.$set的用法與使用場景,需要的朋友可以參考下2022-03-03
本篇文章主要介紹了基于vue實現(xiàn)swipe分頁組件實例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05