<div id="app">
<h1>{{msg}}</h1>
</div>
<script src="./vue2.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.$el只是获取到了 但是没有挂载到模板上 */
/* data里面的值是渲染不出来的 */
/* console.log( document.getElementsByTagName('h1')[0] ); */
/* console.log(document.getElementsByTagName('h1')[0].innerHTML) */
},
/* 挂载后 */
mounted(){
/* this.$el 获取到了 而且挂载到模板上 */
/* console.log(this.$el) */
/* data里面的值是可以渲染出来的 */
/* console.log( document.getElementsByTagName('h1')[0] ); */
/* console.log(document.getElementsByTagName('h1')[0].innerHTML) */
/* 在dom的操作中适合在mounted里面去执行 */
}
});
/* $el是vm实例化对象上使用 */
/* console.log(vm.$el) */
</script>
