1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
| import Vue from 'vue'
const vm = new Vue({
el: '#app',
data: {
message: '早知如此绊人心，何如当初莫相识。'
},
methods: {
getMessage() {
return this.message;
},
changeMessage() {
this.message = '入我相思门，知我相思苦。'
}
},
components: {
changeButton: {
template: `
<button>改变message<button/>
`
}
},
beforeCreate() {
console.group('beforeCreate 创建前 ====>');
console.log('%c%s', 'color: red', 'el :' + this.$el);
console.log('%c%s', 'color: red', 'message :' + this.message);
console.log('%c%s', 'color: red', 'getMessage() :' + this.getMessage());
},
created() {
console.group('created 创建后 ====>');
console.log('%c%s', 'color: red', 'el :' + this.$el);
console.log('%c%s', 'color: red', 'message :' + this.message);
console.log('%c%s', 'color: red', 'getMessage() :' + this.getMessage());
},
beforeMount() {
console.group('beforeMount 挂载前 ====>');
console.log('%c%s', 'color: red', 'el :' + this.$el);
console.log(this.$el);
console.log('%c%s', 'color: red', 'message :' + this.message);
console.log('%c%s', 'color: red', 'getMessage() :' + this.getMessage());
},
mounted() {
console.group('mounted 挂载后 ====>');
console.log('%c%s', 'color: red', 'el :' + this.$el);
console.log(this.$el);
console.log('%c%s', 'color: red', 'message :' + this.message);
console.log('%c%s', 'color: red', 'getMessage() :' + this.getMessage());
},
beforeUpdate() {
console.group('beforeUpdate 更新前 ====>');
console.log('%c%s', 'color: red', 'el :' + this.$el);
console.log(this.$el);
console.log('%c%s', 'color: red', 'message :' + this.message);
console.log('%c%s', 'color: red', 'getMessage() :' + this.getMessage());
},
updated() {
console.group('update 更新后 ====>');
console.log('%c%s', 'color: red', 'el :' + this.$el);
console.log(this.$el);
console.log('%c%s', 'color: red', 'message :' + this.message);
console.log('%c%s', 'color: red', 'getMessage() :' + this.getMessage());
}
})
|
