一：基本概念
非单位件组件：一个文件中有多个组件
单文件组件：一个文件中只有一个组件。
二：核心代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>基本使用</title>
<script type="text/javascript" src="../../js/vue.js"></script>
</head>
<!--
使用组件需要3步骤
1：创建组件
2：注册组件
3：编写组件标签，使用组件
## 模板字符串的作用
1. **可以直接换行书写**：普通单 / 双引号字符串不能直接回车换行，模板字符串支持，写多行文本、HTML 片段非常方便（Vue template 就是用这个特性）。
2. **支持嵌入变量与表达式**：使用 `${表达式}`，直接把变量、运算结果拼进字符串，不用再用 `+` 拼接。
3. **简化字符串拼接**：告别大量 `+` 号拼接字符串和变量，代码可读性更高。
4. **保留原始换行、空格**：字符串里写的回车、空格会原样保留在最终字符串中。
## 局部注册和全局注册的区别。
//第二步全局注册组件
Vue.component('hello',hello)
局部注册组件
// 局部注册组件
const vm = new Vue({
el: '#root',
// 这一步是进行了组件注册（局部注册）
components: {
student: student,
school: school
}
})
## 使用总结
Vue中使用组件的三大步骤：
一、定义组件(创建组件)
二、注册组件
三、使用组件(写组件标签)
一、如何定义一个组件？
使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别；
区别如下：
1.el不要写，为什么？ ------ 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
2.data必须写成函数，为什么？ ------ 避免组件被复用时，数据存在引用关系。
备注：使用template可以配置组件结构。
二、如何注册组件？
1.局部注册：靠new Vue的时候传入components选项
2.全局注册：靠Vue.component('组件名',组件)
三、编写组件标签：
<school></school>
-->
<body>
<!-- 准备好一个容器-->
<div id="root">
<!-- 第三步：编写组件标签-->
<school></school>
<!-- 写一次就是引入了一次组件。-->
<school></school>
<hr>
<student></student>
<student></student>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
// 创建一个school组件，这个组件当中应该有结构。
const school = Vue.extend(
// 这个对象还是叫做配置对象，原来对象是什么样子，几乎在这里还是这个样子。
// 模板字符串解决的是前端代码中其他引号，不能随意换行的问题。
{
template: `
<div>
<h2>学校名称: {{ schoolName }}</h2>
<h2>学校地址: {{ address }}</h2>
<button @click="alart()">点我暴击</button>
</div>
`,
// vm要有el组件不能写，所有的组件都需要被vm管理，vm决定服务于哪个模板，那个容器。
// data 必须得是第一个函数，函数创建出来的对象是不一样的，不会引用出问题。
data() {
return {
schoolName: '尚硅谷',
address: '北京昌平'
}
},
methods: {
alart() {
alert("点我暴击")
}
}
})
// 创建一个school组件
const student = Vue.extend(
{
// vm要有el组件不能写，所有的组件都需要被vm管理，vm决定服务于哪个模板，那个容器。
template: `
<div>
<h2>学生名称: {{ studentName }}</h2>
<h2>学生地址: {{ age }}</h2>
</div>
`,
// data 必须得是第一个函数，函数创建出来的对象是不一样的，不会引用出问题。
data() {
return {
studentName: '张三',
age: 18
}
}
})
// 局部注册组件
const vm = new Vue({
el: '#root',
// 这一步是进行了组件注册（局部注册）
components: {
student: student,
school: school
}
})
</script>
</html>三：最终效果
