初识Vue--生命周期
程序员文章站
2022-03-18 14:06:23
初学Vue，写一些随便谨防忘记，不足之处谢谢指出！！！ 生命周期
初学vue，写一些随便谨防忘记，不足之处谢谢指出！！！
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>生命周期</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="dom()">点击</button>
<hr/>
<button @click="del()">销毁</button>
{{msg}}
</div>
</body>
<script>
new vue({
el: "#app",
data: {
msg: "我爱学vue！！！"
},
/*创建之前，$el(并未接管#app) $data均为undefined*/
beforecreate() {
console.log("---------------beforecreate----------------")
console.log("el：" + this.$el)
console.log(this.$el)
console.log("data：" + this.$data)
console.log(this.$data)
console.log(this)
},
/*创建，$el为undefined(并未接管#app) $data已获取数据*/
created() {
console.log("---------------created----------------")
console.log("el：" + this.$el)
console.log(this.$el)
console.log("data：" + this.$data)
console.log(this.$data)
},
/*挂载之前，$el已接管#app $data获取数据 但是并未将数据渲染*/
beforemount() {
console.log("---------------beforemount----------------")
console.log("el：" + this.$el.innerhtml)
console.log(this.$el)
console.log("data：" + this.$data)
console.log(this.$data)
},
/*挂载之前，$el已接管#app $data获取数据 并将数据渲染 页面成型*/
mounted() {
console.log("---------------mounted----------------")
console.log("el：" + this.$el.innerhtml)
console.log(this.$el)
console.log("data：" + this.$data)
},
beforeupdate() {
console.log("---------------beforeupdate----------------")
console.log("el：" + this.$el.innerhtml)
console.log(this.$el)
console.log("data：" + this.$data)
console.log(this.msg)
},
updated() {
console.log("---------------updated----------------")
console.log("el：" + this.$el.innerhtml)
console.log(this.$el)
console.log("data：" + this.$data)
console.log(this.msg)
},
beforedestroy() {
console.log("---------------beforedestroy----------------")
console.log("el：" + this.$el.innerhtml)
console.log(this.$el)
console.log("data：" + this.$data)
console.log(this.msg)
},
destroyed() {
console.log("---------------destroyed----------------")
console.log("el：" + this.$el.innerhtml)
console.log(this.$el)
console.log("data：" + this.$data)
console.log(this.msg)
},
methods: {
dom() {
this.msg = "我爱vue-初学！！！"
console.log(this)
},
del() {
this.$destroy();
}
}
});
</script>
</html>