<div id="app">
<input type="button" value="修改msg" @click="msg='No'">
<h3 id="h3">{{ msg }}</h3>
</div>
<script>
// Create Vue instance, get ViewModel
was vm = new Vue ({
the '#app'
data: {
msg: 'ok'
},
methods: {
show() {
the console.log ( 'show a method for performing')
}
},
beforeCreate () {// This is the first we encountered a function of the life cycle, before completely instance is created, it said it would execute
// console.log(this.msg)
// this.show()
// Note: when executing beforeCreate life cycle function, data in the data and methods have not yet initialized
},
created () {// This is the second encounter of the life cycle functions
// console.log(this.msg)
// this.show()
// in created in, data and methods have been initialized good!
// If the method to invoke methods in, or operating data in the data, the earliest, can only operate in created in
},
beforeMount () {// This is the third encounter of the life cycle of functions, represents a template has been edited in memory, we have created a virtual DOM, but not yet render the template to the page
// console.log(document.getElementById('h3').innerText)
// When beforeMount performed, page elements, but also not really replaced over, some of the template string just before writing
},
mounted () {// This is the fourth encounter life-cycle function, said memory template has been mounted to the real page, the user can already see the rendered page up
// console.log(document.getElementById('h3').innerText)
// Note: mounted last a life-cycle function during instance creation, when executing the mounted on said instance has been completely created, this time, if no other operations, then this example, we lay quietly of memory, motionless
},
// The next two events are running
beforeUpdate () {// this time, express our interface has not been updated [data is updated yet? Data must have been updated]
/ * Console.log ( 'interface element content:' + document.getElementById ( 'h3') innerText.)
console.log ( 'msg data DATA is:' + this.msg) * /
// concluded: beforeUpdate when executed, the data displayed on the page, or old, at this time the data is the latest data, and the latest data pages are not in sync
},
updated() {
console.log ( 'interface element content:' + document.getElementById ( 'h3') innerText.)
console.log ( 'msg data DATA is:' + this.msg)
// updated event execution time, the page data is already in sync and data, and are up to date
}
});