下图展示了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。
测试代码
h5
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="test">
{{content}}
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
</body>
</html>js
var vue=new Vue({
el:'.test',
data:{
a:'A内容',
content:null
},
beforeCreate:function(){
console.log(this.a);
console.log('属性未载入前');
},
created:function(){
console.log(this.a);
console.log("资料data已可取得，但el属性还未被建立");
},
beforeMount:function(){
console.log("还没抓到el资料");
},
mounted:function(){
console.log("已经挂载上dom 并取得dom资料");
},
methods:{
greet:function(){
console.log("123");
}
}
});