<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue LifeCircle Hooks</title>
</head>
<body>
<div id="app">
<p>{{message}}</p>
<button style="border:1px red solid" @click="change_message">change message</button>
<b>{{newMessage}}</b>
</div>
<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
<script>
var vue = new Vue({
el:'#app',
data:{
message:'hello,world'
},
methods:{
//用es6 語法省略:function
change_message(){
this.message='I am changed'
}
},
//life circle hooks
beforeCreate:function(){
console.log('=======before create')
console.log(this.message)
console.log(this.$el)
},
created:function(){
console.log('=======created')
console.log(this.message)
console.log(this.$el)
},
beforeMount:function(){
console.log('=======beforeMount')
console.log(this.message)
console.log(this.$el)
},
mounted:function(){
console.log('=======mounted')
console.log(this.message)
console.log(this.$el)
},
//頻繁調用
beforeUpdate:function(){
console.log('=======beforeUpdate')
console.log(this.message)
console.log(this.$el)
},
//頻繁調用
updated:function(){
console.log('=======updated')
console.log(this.message)
console.log(this.$el)
},
beforeDestory:function(){
console.log('=======beforeDestory')
console.log(this.message)
console.log(this.$el)
},
destoryed:function(){
console.log('=======destoryed')
console.log(this.message)
console.log(this.$el)
},
watch:{
message(newValue,oldValue){
console.log(oldValue + '==>' + newValue)
}
},
computed:{
newMessage(){
return this.message + ' balabala'
}
}
})
//另外一種寫法 打印的順序不一樣 這個改變在中間
// vue.$watch('message',function(newValue,oldValue){
// console.log(oldValue + '-->' + newValue)
// })
</script>
</body>
</html>
