<div id="app">
	<h3 id="h">{{ msg }}</h3>
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script type="text/javascript">
	var vm = new Vue({
		el:'#app',
		data:{
			msg: 'ok'
		},
		methods:{
			show: function(){
				console.log('show调用')
			}
		},
		beforeCreate(){
			//这里时我们遇到的第1个生命周期函数，表示实例完全被创建出来之前，会执行它
			// this.show()
			// 注意：  在 beforeCreate() 生命周期函数执行的时候，data,methods 都没有初始化
		},
		created(){
			// 这是遇到的第2个生命周期函数
			this.show()
			// 在 created 中，data和methods都已经被初始画
			// 如果我们需要调用methods方法就只能在这里写
		},
		beforeMount(){
			// 这是遇到的第3个生命周期函数，表示模板已经在内存中编辑完成,但尚未把模板渲染到页面
			console.log(document.getElementById('h').innerText)

			// 在beforeMount执行的时候，页面元素还没有真正替换过来，只是模板字符串
		},
		mounted(){
			//这是遇到的第4个生命周期函数，表示内存中的模板已经真是的挂载到页面，用户可以看到渲染的页面了
			console.log(document.getElementById('h').innerText)
			// 注意： mounted 是实例创建期间最后一个生命周期函数，当执行完mounted 就表示实例已被完全创建，此时如果没有其他操作的话，这个实例就静静的躺在我们的内存中一动不动
		}
	})
</script>

<div id="app">
	<h3 id="h">{{ msg }}</h3>
	<input type="button" name="" value="修改msg" @click="msg='no'">
</div>
<script type="text/javascript">
	var vm = new Vue({
		el:'#app',
		data:{
			msg: 'ok'
		},
		methods:{
			show: function(){
				console.log('show调用')
			}
		}
		// 接下来是运行中的两个事件
		beforeUpdate(){
			// 这时候表示数据肯定被更新了
			console.log('界面上元素的内容'+document.getElementById('h').innerText)
			console.log('data中的msg:'+this.msg)

			// 当执行时，页面内容还是旧的，data是最新的
		},
		updated(){
			console.log('界面上元素的内容'+document.getElementById('h').innerText)
			console.log('data中的msg:'+this.msg)
			// updated执行完 数据和页面元素都是最新的
		}
	})
</script>