015_Vue生命周期
生活随笔
收集整理的這篇文章主要介紹了
015_Vue生命周期
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
1. 生命周期主要階段
1.1. 掛載(初始化相關(guān)屬性)
- beforeCreate
- created
- beforeMount
- mounted
1.2. 更新(元素或組件的變更操作)
- beforeUpdate
- updated
1.3. 銷(xiāo)毀(銷(xiāo)毀相關(guān)屬性)
- beforeDestroy
- destroyed
1.4. 生命周期圖示
2. 生命周期例子
2.1. 代碼?
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>生命周期</title></head><body><div id="app"><div>{{msg}}</div><button @click='update'>更新</button><button @click='destroy'>銷(xiāo)毀</button></div><script type="text/javascript" src="vue.min.js"></script><script type="text/javascript">var vm = new Vue({el: "#app",data: {msg: '生命周期'},methods: {update: function(){this.msg = 'hello';},destroy: function(){this.$destroy();}},// 掛載beforeCreate: function(){console.log('beforeCreate');},created: function(){console.log('created');},beforeMount: function(){console.log('beforeMount');},mounted: function(){console.log('mounted');},// 更新beforeUpdate: function(){console.log('beforeUpdate');},updated: function(){console.log('updated');},// 銷(xiāo)毀beforeDestroy: function(){console.log('beforeDestroy');},destroyed: function(){console.log('destroyed');}});</script></body> </html>2.2. 效果圖
2.3. 點(diǎn)擊更新按鈕?
2.4. 點(diǎn)擊銷(xiāo)毀按鈕?
總結(jié)
以上是生活随笔為你收集整理的015_Vue生命周期的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 014_Vue过滤器
- 下一篇： 016_Vue数组数据的响应式处理