vuejs生命周期函数(什么是vue的生命周期)

用Vue框架,熟悉它的生命周期可以让开发更好的进行。首先先看看官网的图,详细的给出了vue的生命周期:它可以总共分为8个阶段:beforeCreate(创建前),created(创建后),beforeMount(载入前),mounted(载入后),beforeUpdate(更新前),updated(更新后),beforeDestroy(销毁前),de

大家好,又见面了,我是你们的朋友全栈君。

用Vue框架,熟悉它的生命周期可以让开发更好的进行。

首先先看看官网的图,详细的给出了vue的生命周期:

vuejs生命周期函数(什么是vue的生命周期)

它可以总共分为8个阶段:

beforeCreate(创建前),

created(创建后),

beforeMount(载入前),

mounted(载入后),

beforeUpdate(更新前),

updated(更新后),

beforeDestroy(销毁前),

destroyed(销毁后)

然后用一个实例的demo 来演示一下具体的效果:

<div id="app">{
  
  {a}}</div>

<script>
var myVue = new Vue({
  el: '#app',
  data: {
    a: 'Vue.js'
  },
  beforeCreate: function() {
    console.log('创建前')
    console.log(this.a)
    console.log(this.$el)
  },
  created: function() {
    console.log('创建之后')
    console.log(this.a)
    console.log(this.$el)
  },
  beforeMount: function() {
    console.log('mount之前')
    console.log(this.a)
    console.log(this.$el)
  },
  mounted: function() {
    console.log('mount之后')
    console.log(this.a)
    console.log(this.$el)
  },
  beforeUpdate: function() {
    console.log('更新前')
    console.log(this.a)
    console.log(this.$el)
  },
  updated: function() {
    console.log('更新完成')
    console.log(this.a)
    console.log(this.$el)
  },
  beforeDestroy: function() {
    console.log('销毁前')
    console.log(this.a)
    console.log(this.$el)
    console.log(this.$el)
  },
  destroyed: function() {
    console.log('已销毁')
    console.log(this.a)
    console.log(this.$el)
  }
})
</script>

运行后,查看控制台,

得到这个:

vuejs生命周期函数(什么是vue的生命周期)
vuejs生命周期函数(什么是vue的生命周期)

然后再methods 里面添加一个change方法:

<div id=app>{
  
  {a}}
<button v-on:click="change">change</button>
</div>


methods:{
    change(){
        this.a = 'change vue'
    }
}

点击按钮之后出现的是:

vuejs生命周期函数(什么是vue的生命周期)

这就是vue的生命周期,很简单吧。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/128444.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • todoMVC_mvc框架是什么

    todoMVC_mvc框架是什么依赖cssnpmitodomvc-commontodomvc-app-cssapp.component.tsimport{Component}from’@angular/core’;consttodos=[{id:1,title:’吃饭’,done:true},{id:1,title:’工作’,done:false},{id:1,title:’运动’,

  • 图片下划线 html,HTML <U>下划线标签元素 HTML下划线标签「建议收藏」

    图片下划线 html,HTML <U>下划线标签元素 HTML下划线标签「建议收藏」为html字体下划线样式标签,即对文字实现下划线效果。一、认识html下划线标签U1、htmlU下划线标签语法:以开始,以结束。u标签不是单独一个标签,而是有开始有闭合的一对标签,使用时候切记勿忘记结束,完成一组u下划线标签使用。内容HTML结构语法分析图2、下划线u用法被加下划线HTML下划线U使用效果截图二、htmlU下划线标签使用小实例接下来CSS5对html下划线标签进行小小实…

  • Linux下通配符总结

    Linux下通配符总结

  • Python爬虫—-网页下载器和urllib2模块及对应的实例

    Python爬虫—-网页下载器和urllib2模块及对应的实例网页下载器:将互联网上URL对应的网页下载到本地的工具,是爬虫的核心组件未完。。。

  • 快手用户群体分析_抖音、快手竞品分析报告

    快手用户群体分析_抖音、快手竞品分析报告一、产品初步体验介绍体验环境:RedmiNote5A体验时间:2018.7体验人:Cinnamon抖音快手抖音的logo以暗黑色为底,一个大大的亮白立体音符占据中央,强调了抖音重点在于结合音乐,给人的第一感觉就是炫酷,符合年轻人的审美。快手的logo以黄色为主,是一个立体的摄像机,体现了快手重点在于记录。应用首页抖音的底部button遵循传统的排版:刷新-附近/推荐(首页)、关注、拍摄、消息和我…

  • String与Integer互相转换

    //String转换IntegerStringstr="a";Integeri=null;if(str!=null){i=Integer.valueOf(str);}//方法一:Integer类的静态方法toString():Integera=2;Stringstr=Integer.toString(a)//方法二:Integer类的…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号