Vue的生命周期操作示例
更新時間：2019年09月17日 09:31:58 作者：Json____
這篇文章主要介紹了Vue的生命周期操作,結合實例形式分析了vue生命周期中各個函數(shù)的運行步驟,需要的朋友可以參考下
本文實例講述了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>
運行結果：
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。
希望本文所述對大家vue.js程序設計有所幫助。
相關文章
Vue2.0 實現(xiàn)歌手列表滾動及右側快速入口功能
這篇文章主要介紹了Vue2.0實現(xiàn)歌手列表滾動及右側快速入口功能,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-08-08
這篇文章給大家介紹了vue中使用moment設置倒計時的方法,文中通過代碼示例給大家介紹的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2024-02-02
這篇文章主要為大家詳細介紹了vue3.0翻牌數(shù)字組件使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
作為一個前端新手,項目中遇到權限處理時,通常會采用動態(tài)添加路由的方法來實現(xiàn),下面這篇文章主要給大家介紹了關于vue動態(tài)路由刷新失效以及404頁面處理辦法的相關資料,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了vue中的scope使用詳解,需要的朋友可以參考下2017-10-10
vue3新特性中最重要、內容最多的組合式api,組合式api既可以解決之前vue2開發(fā)的痛點,又提升了性能,下面這篇文章主要給大家介紹了關于vue3?option?api新玩法的相關資料,需要的朋友可以參考下2022-06-06
基于Vue?+?ElementUI實現(xiàn)可編輯表格及校驗
這篇文章主要給大家介紹了基于Vue?+?ElementUI?實現(xiàn)可編輯表格及校驗,文中有詳細的代碼講解和實現(xiàn)思路,講解的非常詳細,有需要的朋友可以參考下2023-08-08
這篇文章主要介紹了vue傳值方式的十二種方法總結,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-04-04
這篇文章主要介紹了vue中使用js-doc的相關知識，本文結合實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧2024-01-01
這篇文章主要介紹了Vue3之事件綁定的實現(xiàn)邏輯,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11