当前位置:
凯发ag旗舰厅登录网址下载 >
前端技术
> vue
>内容正文
vue
(第四篇)vue生命周期 -凯发ag旗舰厅登录网址下载
凯发ag旗舰厅登录网址下载
收集整理的这篇文章主要介绍了
(第四篇)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旗舰厅登录网址下载为你收集整理的(第四篇)vue生命周期的全部内容,希望文章能够帮你解决所遇到的问题。
如果觉得凯发ag旗舰厅登录网址下载网站内容还不错,欢迎将凯发ag旗舰厅登录网址下载推荐给好友。
- 上一篇: (第二篇)vue计算属性、侦听器、过滤器
- 下一篇: