(第四篇)vue生命周期 -ag凯发k8国际
ag凯发k8国际
收集整理的这篇文章主要介绍了
(第四篇)vue生命周期
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
生命周期
<html lang="en"> <head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>documenttitle><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>总结
以上是ag凯发k8国际为你收集整理的(第四篇)vue生命周期的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： (第二篇)vue计算属性、侦听器、过滤器
- 下一篇：