console.log("创建后："+this.msg+","+this.＄el);
},
beforeMount:function(){
console.log("挂载前：");
console.log(this.＄el);
},
mounted:function(){
console.log("挂载后：");
console.log(this.＄el);
},
beforeUpdate:function(){
console.log("实例更新前：");
console.log(this.msg);
console.log(this.＄el);
},
updated:function(){
console.log("实例更新后：");
console.log(this.msg);
console.log(this.＄el);
},
beforeDestroy:function(){
console.log("实例销毁前：");
console.log(this.msg);
},
destroyed:function(){
console.log("实例销毁后：");
console.log(this.msg);
}
});
function destroy(){
app1.＄destroy();
}
</script>
</body>
</html>
初始化结果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); //已被初始化
