一个完整的网页是复杂的，如果将一个页面作为一个整体来进行开发，会出现各种互相影响的问题，其实我们应该使用一个更加精细的方式—组件化
    每一个组件可能包含：
    1.模版代码 2.css 3.js代码
    使用组件的三个步骤：
    1.创建组件
    2.注册组件
    3.使用组件

    1. <!DOCTYPE html>
    2. <html>
    3.     <head>
    4.         <meta charset="utf-8">
    5.         <title></title>
    6.     </head>
    8.     <body>
    9.         <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
    11.         <div id="app">
    13.         </div>
    15.         <script>
    16.             //1.创建一个组件
    17.             var MyCompose = {
    18.                 //组件中不能有el el: "#app",
    19.                 //data 变了，data需要为函数
    20.                 data() {
    21.                     return{
    22.                         firstname: "dai",
    23.                         secondname: "liang",
    24.                     }
    25.                 },
    26.                 //method和computed都可以保留
    27.                 methods: {
    28.                     fullname() {
    29.                         return this.firstname + this.secondname
    30.                     }
    31.                 },
    32.                 template: `
    33.                     <h3> {{ firstname }}  {{ secondname }}  {{ fullname() }} </h3>
    34.                 `
    35.             };
    37.             //2.全局注册组件，注意最好使用驼峰写法
    38.             Vue.component("MyComp",MyCompose);
    40.             //3.使用组件
    41.             var vm = new Vue({
    42.                 el:"#app",
    43.                 template:`
    44.                 <MyComp></MyComp>
    45.                 `,
    46.             })
    47.         </script>
    49.     </body>
    50. </html>

    注意上面的写法
    Vue.component(“MyComp”,MyCompose);注意这里MyComp是驼峰写法的话，在实例里我们可以这样写

    //2.全局注册组件，注意最好使用驼峰写法
    Vue.component(“MyComp”,MyCompose);

    //3.使用组件
    var vm = new Vue({
    el:”#app”,
    template:<br /><my-comp></my-comp><br />,
    })

    但是我们一般不会使用全局注册，我们一般会使用局部注册
    我们在vue实例中注册

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>

    <body>
        <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>

        <div id="app">

        </div>

        <script>
            //1.创建一个组件
            var MyCompose = {
                //组件中不能有el el: "#app",
                //data 变了，data需要为函数
                data() {
                    return{
                        firstname: "dai",
                        secondname: "liang",
                    }
                },
                //method和computed都可以保留
                methods: {
                    fullname() {
                        return this.firstname + this.secondname
                    }
                },
                template: `
                    <h3> {{ firstname }}  {{ secondname }}  {{ fullname() }} </h3>
                `
            };

            //2.全局注册组件，注意最好使用驼峰写法
            // Vue.component("MyComp",MyCompose);

            //3.使用组件
            var vm = new Vue({
                el:"#app",
                //4.局部注册组件
                components: {
                    MyComp : MyCompose,
                },
                template:`
                <my-comp></my-comp>
                `,
            })
        </script>

    </body>
</html>