2beforeCreate()、created()、beforeMount()、mounted()、beforeUpdate()、updated()
<!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>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="修改msg" @click="msg='No'">
<h3 id="h3">{{msg}}</h3>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
msg:'ok'
},
methods:{
show(){
console.log('执行了show方法')
}
},
//实例被创建
beforeCreate(){
console.log(this.msg)
this.show()
},
//实例的data、methods已经被初始化好
created(){
console.log(this.msg)
this.show()
},
//在内存中已挂好模板(元素值)
beforeMount(){
console.log(document.getElementById('h3').innerText)
},
//模板(元素值)被渲染到页面
mounted(){
console.log(document.getElementById('h3').innerText)
},
//数据被更新,界面元素没更新
beforeUpdate(){
console.log('界面上元素的内容:'+document.getElementById('h3').innerText)
console.log('data中的msg数据是:'+this.msg)
},
///数据被更新,界面元素被更新
updated(){
console.log('界面上元素的内容:'+document.getElementById('h3').innerText)
console.log('data中的msg数据是:'+this.msg)
}
})
</script>
</body>
</html>