创建组件两种形式：

    1. 非单文件组件
      一个文件中包含多个组件
      2.单文件组件
      一个文件中只包含一个组件

    我们先做一个例子：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5. </head>
    7. <body>
    8. <script type="text/javascript" src="./vue.js"> </script>
    10. <div id="app" >
    11.    <h3>学校名称: {{ schoolName }}</h3>
    12.    <h3>学校地址: {{ address }}</h3>
    13.    <hr>
    14.    <h3>学生名称: {{ studentName}} </h3>
    15.    <h3>学生年龄: {{ age }} </h3>
    16. </div>
    19. <script type="text/javascript">
    20.     var vm = new Vue({
    21.         el:"#app",
    22.         data:{
    23.             schoolName:'南开大学',
    24.             address: '天津和平',
    25.             studentName: '张三',
    26.             age:18,
    27.         },
    29.     })
    30. </script>
    31. </body>
    32. </html>

    image.png

    上面是我们常用的写法，但是现在我们要把学校和学生做两个组件

    image.png

    源代码

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
<script type="text/javascript" src="./vue.js"> </script>
<div id="app" >
    <!-- 编写组件标签 -->
    <Xuexiao></Xuexiao>
    <Xuesheng></Xuesheng>
    <Xuesheng></Xuesheng>
    {{ myname }}
</div>

<script type="text/javascript">
     // 1.创建一个school组件
    const school = Vue.extend({
        //template 这里必须只有一个根元素 ，所以要包一个div
        template:`
        <div>
        <h3>学校名称: {{ schoolName }}</h3>
        <h3>学校地址: {{ address }}</h3>
        </div>
        `,

        //1） el: '#root',  这里一定不要写el配置，因为所有的组件都要被一个vm管理，由vm决定服务与谁
        //2）data 方法需要是一个方法
        //3)  data 一定要有return
        data(){
            return{
                schoolName:'南开大学',
                address: '天津和平',
            }
        }
    })

    // 1.1.创建一个student组件
    const student = Vue.extend({
        template:`
        <div>
        <h3>学生名称: {{ studentName}} </h3>
        <h3>学生年龄: {{ age }} </h3>
        </div>
        `,
        data(){
            return {
                studentName: '张三',
                age:18,
            }
        }
    })
    // 2.局部注册一个组件
    var vm = new Vue({
        el:"#app",
        data:{
            myname: 'dailiang',
        },
        components:{
            Xuexiao: school,
            Xuesheng: student,
        }
    })
</script>
</body>
</html>

    当然我们关于第二部局部注册这个事情还可以有一个优化

    image.png

    当然组件还可以做一些methods