初學Vue，寫一些隨便謹防忘記，不足之處謝謝指出！！！ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>生命周期</title> <script src="../js/vue.js"></script> </ ...
初學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>
