},
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>
初始化结果：
更新message的值：
手动销毁实例：
2.5、手动挂载与调用事件 2.5.1、手动挂载
vm.＄mount( [elementOrSelector] ) 如果 Vue 实例在实例化时没有收到 el 选项，则它处于“未挂载”状态，没有关联的 DOM 元素。可以使用 vm.＄mount() 手动地挂载一个未挂载的实例。如果没有提供 elementOrSelector 参数，模板将被渲染为文档之外的的元素，并且你必须使用原生 DOM API 把它插入文档中。
这个方法返回实例自身，因而可以链式调用其它实例方法。
var MyComponent = Vue.extend({
template: '<div>Hello!</div>'
