Vue的实例、生命周期与Vue脚手架（vue-cli）实例详(8)

日期：2020-05-11 栏目：程序人生浏览：次

初始化结果1：

修改msg的值为vue2后的结果：

执行销毁：

2.4、生命周期示例二

示例2：

<!DOCTYPE html>
<html>
 <head>
 <title>Vue2生命周期</title>
 </head>
 <body>
 <div id="app">{{ message }}</div>
 <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
 <script type="text/javascript">
  var app = new Vue({
  el: '#app',
  data: {
   message: "South IT College!"
  },
  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>
 </body>
</html>

转载注明出处：http://www.heiqu.com/426.html

Vue的实例、生命周期与Vue脚手架（vue-cli）实例详(8)

相关推荐