(第四篇)Vue生命周期
生活随笔
收集整理的這篇文章主要介紹了
(第四篇)Vue生命周期
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
生命周期
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../node_modules/vue/dist/vue.js"></script> </head> <body><div id="app"><span id="num">{{num}}</span><button @click="num++">贊！</button><h2>{{name}},有{{num}}點贊！</h2></div><script>new Vue({el:"#app",data:{name:"steven",num:200},methods: {show(){return this.name;},add(){this.num;}},beforeCreate() {console.log("=========beforeCreate==========");console.log("數據模型未加載："+this.name,this.num);console.log("html模板未加載："+document.getElementById("num"));},created() {console.log("============create===============");console.log("數據模型已加載"+this.name,this.num);console.log("方法已加載"+this.show());console.log("html模板已加載："+document.getElementById("num"));console.log("html模板未渲染："+document.getElementById("num").innerText);},beforeMount() {console.log("=============beforeMount================");console.log("html模板未渲染："+document.getElementById("num").innerText);},mounted() {console.log("=============Mount================");console.log("html模板已渲染："+document.getElementById("num").innerText);},beforeUpdate() {console.log("=============beforeUpdate===============");console.log("數據模型已更新："+this.name);console.log("html模板未更新："+document.getElementById("num").innerText);},updated() {console.log("=============Updated================");console.log("數據模型已更新："+this.name);console.log("html模板已更新："+document.getElementById("num").innerText);}})</script> </body> </html>總結
以上是生活随笔為你收集整理的(第四篇)Vue生命周期的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： (第二篇)Vue计算属性、侦听器、过滤器
- 下一篇： (第三篇)组件化