<div id="app"> <p>{{num}}</p> </div> <script> var vm = new Vue({ el:"#app", data:{ num: 10, }, beforeCreate(){ // vm对象创建执行的方法 console.log("vm对象创建之前"); console.log( this.$el); console.log( this.$num); }, created(){ // vm 对象创建以后执行的方法 console.log("vm对象创建之后"); console.log( this.$el); //此时vm 对象还没用初始化完成,所以没有把data挂在标签指令中 console.log( this.$num); }, beforeMount(){ // vm 对象创建以后,挂载数据之前 console.log("vm对象创建以后,执行指令之前"); console.log( this.$el); }, mounted(){ // vm 对象挂载数据之后 console.log("vm对象创建之前"); console.log( this.$el); } // 上面四个都是在创建vm 的时候进行初始化过程中自动调用的 // 工作中,会在created或者mounted里面编写ajax 代码去服务器端获取数据 // 如果这些数据不能涉及到修改HTML代码的,则Ajax写在created里面 // 理论上来说,ajax代码提取数据肯定是越早越好 }) </script>