<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> 生命周期 </title> </head> <body> <div id="app"> <input type="button" value="修改" @click="msg='sss'"/> <p id="p1">{{msg}}</p> </div> </body> <!--1、导入vue包--> <script src="./js/vue.min.js"></script> <!--2、创建vue实例（new对象）--> <script type="text/javascript"> var vm = new Vue({ el: '#app', data: { msg:'msg' }, //生命周期第一个函数，代表vue实例被创建,并没有初始化数据 beforeCreate() { console.log(this.msg) this.show() }, //生命周期的第二个函数，代表数据被初始化，此处为最早获取到的数据和方法的地方 created() { console.log(this.msg) this.show() }, // 生命周期的第三个函数，在模板挂载前 beforeMount() { // 代表template模板已经存在内存中，并且模板中已经编辑完数据，但是此时已完成挂载到页面 console.log(document.getElementById('p1').innerHTML) }, mount() { // 代表template模板已经存在内存中，并且模板中已经编辑完数据，但是此时模板还没挂载到页面 console.log(document.getElementById('p1').innerHTML) }, beforeUpdate() { //数据发生更新，但是没有显示到页面 console.log("页面上的msg元素内容："+document.getElementById('p1').innerHTML)//页面上的msg元素内容:msg console.log("data中msg的内容"+this.msg)//data中msg的内容:sss console.log("----------------------------"); }, update() { // 数据发生更新，且显示到页面 console.log("页面上的msg元素内容："+document.getElementById('p1').innerHTML)//页面上的msg元素内容:sss console.log("data中msg的内容"+this.msg)//data中msg的内容:sss }, methods: { show(){ console.log('show'); } } }) </script> </html>
