一、模块

1.理解：向外提供特定功能的js程序，一般就是一个js文件
2.为什么：js文件很多很复杂
3.作用：复用js,简化js的编写，提高js运行效率。

二、组件

1.理解：用来实现局部（特定）功能效果的代码集合(html/css/js/image...)
2.为什么：一个界面的功能很复杂
3.作用：复用代码，简化项目编码，提高运行效率。

三、非单文件组件

一个文件中包含有n个组件。

四、单文件组件

一个文件中只包含有1个组件。

五、组件的基本使用（三大步骤）

1.定义组件；2.注册组件；3.使用组件（写组件标签）

六、如何定义一个组件？

使用Vue.extend({options}),其中options和 new Vue(options)时传入的那个options几乎一样，但仍有区别。
区别如下：
1.el不要写，为什么？————最终所有组件都要经过vm的管理，由vm决定服务哪个容器。
2.data必须写成函数，为什么？————避免组件复用时，数据存在引用关系。
备注：使用template可以配置组件结构。

七、如何注册一个组件？

1.局部注册：靠new Vue()时传入components选项；
2.全局注册：靠Vue.component('组件名',组件)

八、编写组件标签：



<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>