一、模块
1.理解：向外提供特定功能的js程序，一般就是一个js文件
2.为什么：js文件很多很复杂
3.作用：复用js,简化js的编写，提高js运行效率。
二、组件
1.理解：用来实现局部（特定）功能效果的代码集合(html/css/js/image...)
2.为什么：一个界面的功能很复杂
3.作用：复用代码，简化项目编码，提高运行效率。
三、非单文件组件
一个文件中包含有n个组件。
四、单文件组件
一个文件中只包含有1个组件。
<html>
<head>
<title>非单文件组件</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<!-- hello组件标签的复用 -->
<hello></hello>
<!-- 编写school组件标签 -->
<school></school>
<hr/>
<!-- 编写student组件标签 -->
<student></student>
</div>
<div id="root2">
<hello></hello>
<hr/>
<hr/>
<h2>注册服务器2</h2>
<hello></hello>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
//1、创建school组件
const school = Vue.extend({
// el:'#root', //组件定义是，一定不要写el配置项，因为最终的组件都要被一个vm管理，决定为谁服务。
template:`
<div>
<h2>学校名称：{{schoolName}}</h2>
<h2>学校地址：{{schoolAddress}}</h2>
</div>
`,
data(){
return {
schoolName:'圣弗朗教堂',
schoolAddress:'England'
}
}
})
//1、创建student组件
const student = Vue.extend({
// el:'#root', //组件定义是，一定不要写el配置项，因为最终的组件都要被一个vm管理，决定为谁服务。
template:`
<div>
<h2>学生名称：{{studentName}}</h2>
<h2>学生姓名：{{studentAge}}</h2>
</div>
`,
data(){
return {
studentName:'张三',
studentAge:18
}
}
})
//1、创建hello组件
const hello = Vue.extend({
template:`
<div>
<h2>{{msg}}</h2>
</div>
`,
data(){
return{
msg:'面朝大海，春暖花开！'
}
}
})
//2、全局注册组件
Vue.component('hello',hello)
const vm = new Vue({
el:'#root',
//2、局部内注册组件
components:{
school:school,student:student
}
})
const vm1 = new Vue({
el:'#root2'
})
</script>
</body>
</html>