zoukankan      html  css  js  c++  java
  • vue生命周期

    • beforeCreate(创建前)
    • created(创建)
    • beforeMount(挂载前状态)
    • mounted(挂载结束状态)
    • beforeUpdate(更新前)
    • updated(更新)
    • beforeDestroy(在销毁之前)
    • destroyed(摧毁)
      <!DOCTYPE html>
      <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>vue生命周期学习</title>
        <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
      </head>
      <body>
        <div id="app">
          <h1>{{message}}</h1>
        </div>
      </body>
      <script>
        var vm = new Vue({
          el: '#app',
          data: {
            message: 'Vue的生命周期'
          },
          beforeCreate: function() {
            console.group('------beforeCreate创建前状态------');
            console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined
            console.log("%c%s", "color:red","data   : " + this.$data); //undefined 
            console.log("%c%s", "color:red","message: " + this.message) 
          },
          created: function() {
            console.group('------created创建完毕状态------');
            console.log("%c%s", "color:red","el     : " + this.$el); //undefined
            console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化 
            console.log("%c%s", "color:red","message: " + this.message); //已被初始化
          },
          beforeMount: function() {
            console.group('------beforeMount挂载前状态------');
            console.log("%c%s", "color:red","el     : " + (this.$el)); //已被初始化
            console.log(this.$el);
            console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化  
            console.log("%c%s", "color:red","message: " + this.message); //已被初始化  
          },
          mounted: function() {
            console.group('------mounted 挂载结束状态------');
            console.log("%c%s", "color:red","el     : " + this.$el); //已被初始化
            console.log(this.$el);    
            console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
            console.log("%c%s", "color:red","message: " + this.message); //已被初始化 
          },
          beforeUpdate: function () {
            console.group('beforeUpdate 更新前状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);   
            console.log("%c%s", "color:red","data   : " + this.$data); 
            console.log("%c%s", "color:red","message: " + this.message); 
          },
          updated: function () {
            console.group('updated 更新完成状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el); 
            console.log("%c%s", "color:red","data   : " + this.$data); 
            console.log("%c%s", "color:red","message: " + this.message); 
          },
          beforeDestroy: function () {
            console.group('beforeDestroy 销毁前状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);    
            console.log("%c%s", "color:red","data   : " + this.$data); 
            console.log("%c%s", "color:red","message: " + this.message); 
          },
          destroyed: function () {
            console.group('destroyed 销毁完成状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);  
            console.log("%c%s", "color:red","data   : " + this.$data); 
            console.log("%c%s", "color:red","message: " + this.message)
          }
        })
      </script>
      </html>
      

        

  • 相关阅读:
    RTTI应用一例,改变窗体上所有控件的颜色(如果这个控件有Color属性的话)
    ddd
    终于懂了:TWinControl主要是Delphi官方用来封装Windows的官方控件,开发者还是应该是有TCustomControl来开发三方控件
    C++能在三个地方创造对象,而Delphi只有一个地方
    win32内存调用图
    让C#、VB.NET实现复杂的二进制操作
    谈谈华为(这篇文章比较有思想,对不对另说)
    How to configure CDB in Qt Creator(使用VC调试器)
    kbmMW 5.0.1发布了(跨全平台,包括Linux,可使用Win的高性能HTTPSys传输层,等等)
    FMXUI
  • 原文地址:https://www.cnblogs.com/914556495wxkj/p/14351525.html
Copyright © 2011-2022 走看看