代码展示如下:
<!--
@Author: Mr.J
@Date: 2019-05-05 22:31:35
@Last Modified by: Mr.J
@Last Modified time: 2019-05-05 22:31:35
-->
<!DOCTYPE html>
<html>
<head>
<title>Vue生命周期</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<p v-color="'rgb(67, 2, 128)'" v-fontsize="30">{{msg}}</p>
</div>
<script type="text/javascript">
// 使用 Vue.directive()定义全局指令
Vue.directive('color', {
bind: function (el, binding) {
el.style.color = binding.value;
},
});
var app = new Vue({
el: '#app',
data: {
msg: "Congratulation! you have one message"
},
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); //已被初始化
},
directives: {//自定义私有指令
'fontsize': function (el, binding) {
el.style.fontSize = parseInt(binding.value) + 'px';
},
}
})
</script>
</body>
</html>
页面结果: