<body>
<div id="app">
<h1>{{msg}}</h1>
</div>
<script src="./vue 2.6.14.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
msg: "我要学vue"
},
// 创建前
beforeCreate() {
// 在这里 data中的属性值获取不到
// 但是能获取到vue的实例化对象
console.log('组件实例刚刚被创建', this, this.msg);
},
// 创建后
created() {
/* 组件实例刚刚创建完成，属性已经绑定，但是DOM还未生成，￥le属性还不存在 */
console.log(this.el, this.msg);
// 你请求接口就是走这个钩子函数发出的
// 可以从ajax里面获取数据
setTimeout(() => {
let data = '请求成功'
this.msg = data
}, 500)
},
// 挂载前
beforeMount() {
// 模板编译、挂载之前
console.log(this.$el, this.msg);
// this.$el 只是获取到了 但是没有挂载到模板上
// data里的值是渲染不出来的
console.log(document.getElementsByTagName('h1')[0]);
console.log(document.getElementsByTagName('h1')[0].innerHTML);
},
// 挂载后
mounted() {
// this.$el 是获取到了 并且挂载到模板上
console.log(this.el, this.msg);
// data里面的值是可以渲染出来的
console.log(document.getElementsByTagName('h1')[0]);
console.log(document.getElementsByTagName('h1')[0].innerHTML);
// 在dom操作中适合在mounted里面去执行
}
})
// $el 是vm实例化对象上使用
console.log(vm.$el);
</script>
</body>
