一、组件（重点）
组件（Component）是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素，封装可重用的代码。
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：
1.局部组件
定义组件：
var app = new Vue({
el: '#app',
// 定义局部组件，这里可以定义多个局部组件
components: {
//组件的名字
'Navbar': {
//组件的内容
template: '<ul><li>首页</li><li>学员管理</li></ul>'
}
}
})
2.全局组件：
// 定义全局组件
Vue.component('Navbar', {
template: '<ul><li>首页</li><li>学员管理</li><li>讲师管理</li></ul>'
})
<div id="app">
<Navbar></Navbar>
</div>
<script src="vue.min.js"></script>
<script src="components/Navbar.js"></script>
<script>
var app = new Vue({
el: '#app'
})
</script>
实例的声明周期
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<label id="l1">
{{message}}
</label>
</div>
<script src="vue.min.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: "hhhhh"
},
//创建时的四个事件
beforeCreate() {//beforeCreate执行时，data和methods还没有别初始化
console.log(this.message);
},
created() {//create执行时，data和methods已经初始化了
console.log(this.message);
},
beforeMount() {//在渲染之前，label标签中，还是{{message}}
let value = document.getElementById("l1").innerText;
console.log(value);//{{message}}
// beforeMount执行时，模板已经在内存中编辑完成了，尚未被渲染到页面中
},
mounted() {//在渲染之后，label中的数据变成了hhhhh
let value = document.getElementById("l1").innerText;
console.log(value);//{{hhhhh}}
// 内存中的模板已经渲染到页面，用户已经可以看见内容
},
//===运行中的两个事件
beforeUpdate() { // 数据更新的前一刻
console.log('界面显示的内容：' + document.getElementById('l1').innerText)
console.log('data 中的 message 数据是：' + this.message)
// beforeUpdate执行时，内存中的数据已更新，但是页面尚未被渲染
},
updated() {
console.log('界面显示的内容：' + document.getElementById('l1').innerText)
console.log('data 中的 message 数据是：' + this.message)
// updated执行时，内存中的数据已更新，并且页面已经被渲染
}
})
</script>
</body>
</html>
