<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">{{a}}
<button v-on:click="change">change</button>
</div>
</body>
</html>
<script>
var myVue = new Vue({
el: "#app",
data: {
a: "Vue.js"
},
methods:{
change(){
console.log('change Vue')
}
} ,
beforeCreate: function() {
console.log("创建前")
console.log(this.a)
console.log(this.$el)
},
created: function() {
console.log("创建之后");
console.log(this.a)
console.log(this.$el)
},
beforeMount: function() {
console.log("mount之前")
console.log(this.a)
console.log(this.$el)
},
mounted: function() {
console.log("mount之后")
console.log(this.a)
console.log(this.$el)
},
beforeUpdate: function() {
console.log("更新前");
console.log(this.a)
console.log(this.$el)
},
updated: function() {
console.log("更新完成");
console.log(this.a);
console.log(this.$el)
},
beforeDestroy: function() {
console.log("销毁前");
console.log(this.a)
console.log(this.$el)
console.log(this.$el)
},
destroyed: function() {
console.log("已销毁");
console.log(this.a)
console.log(this.$el)
},
});
</script>
// 关于vue.js生命周期的一些认识：
// this.a this.$el
// beforeCreate：创建前; N N
// created:创建后; Y N
//
// beforeMount:载入前; Y Y(虚拟的，占坑而已)
// mouted:载入后 Y Y(真实的)
//
// beforeUpdate:更新前;
// updated:更新后;
//
// beforeDestory:销毁前;
// destroyed:销毁后；
//
//
/*
beforecreate : 可以在这加个loading事件，在加载实例时触发
created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用
mounted : 挂载元素，获取到DOM节点
updated : 如果对数据统一处理，在这里写上相应函数
beforeDestroy : 可以做一个确认停止事件的确认框
*/
网友评论