1.beforeCreate:
在这个时期,this变量还不能使用,在data下的数据,和methods下的方法,watcher中的事件都不能获得到;
可以操作vue实例中的数据和各种方法,但是还不能对"dom"节点进行操作;
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="vue.js"> </script>
</head>
<body>
<div id="app" ref="app">
{{ name }}
</div>
</body>
<script>
let vm=new Vue({
el:"#app",
data:{
name:"liuti",
},
1. beforeCreate:这个时期,this变量还不能使用,在data下的数据,和methods下的方法,watcher中的事件都不能获得到;
beforeCreate(){
console.log("创建前:");
console.log(this.$el);
console.log(this.$data);
},
2.created:
created(){
console.log("创建完成:");
console.log(this.$el);
console.log(this.$data);
},
3.beforeMounte:在挂载开始之前被调用:相关的 render 函数会被调用。
beforeMount(){
console.log("挂载前:");
console.log(this.$el);
console.log(this.$data);
},
4.mounted:挂载完毕,这时dom节点被渲染到文档内,一些需要dom的操作
在此时才能正常进行:
mounted(){
console.log("挂载完成:");
console.log(this.$el);
console.log(this.$data);
},
5.beforeUpdate:修改data里的数组,会引起死循环
beforeUpdate(){
console.log('=即将更新渲染=');
let name = this.$refs.app.innerHTML;
console.log('name:'+name);
},
6.updated:
updated(){
console.log('==更新成功==');
let name = this.$refs.app.innerHTML;
console.log('name:'+name);
},