1.Vue实例
变量vm app 一般都代表vue实例
el:负责定义Vue定义的接管的dom最外层标签
2.生命周期函数
生命周期函数就是Vue实例在某一个时间点会自动执行的函数。
（1）beforeCreate
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
Hello World
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
beforeCreate:function(){
console.log("beforeCreate")
}
})
</script>
</body>
</html>
（2）.created
（3）.beforeMount
模板和数据相结合即将挂载到页面上之前执行。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
Hello World
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
template:"<div>Hello World</div>",
beforeCreate:function(){
console.log("beforeCreate")
},
created:function(){
console.log("created")
},
beforeMount:function(){
console.log("beforeMount")
}
})
</script>
</body>
</html>
（4）.mounted
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
Hello World
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
template:"<div>Hello World</div>",
beforeCreate:function(){
console.log("beforeCreate")
},
created:function(){
console.log("created")
},
beforeMount:function(){
console.log("beforeMount")
},
mounted:function(){
console.log("mounted")
}
})
</script>
</body>
</html>
（5）.beforeDestroy与destroyed
vm.$destroy（）可以消除vm组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
Hello World
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
template:"<div>Hello World</div>",
beforeCreate:function(){
console.log("beforeCreate")
},
created:function(){
console.log("created")
},
beforeMount:function(){
console.log("beforeMount")
},
mounted:function(){
console.log("mounted")
},
beforeDestroy:function(){
console.log("beforeDestroy")
},
destroyed:function(){
console.log("destroyed")
}
})
</script>
</body>
</html>
（6）.beforeUpdate与updated
vm.text=“text”//修改text里面的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
Hello World
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
template:"<div>{{text}}</div>",
data:{
text:"hello world"
},
beforeCreate:function(){
console.log("beforeCreate")
},
created:function(){
console.log("created")
},
beforeMount:function(){
console.log("beforeMount")
},
mounted:function(){
console.log("mounted")
},
beforeDestroy:function(){
console.log("beforeDestroy")
},
destroyed:function(){
console.log("destroyed")
},
beforeUpdate:function(){
console.log("beforeUpdate")
},
updated:function(){
console.log("updated")
}
})
</script>
</body>
</html>