Vue初始组件化

         组件化（模块）

            组件化三步骤

                1、创建组件构造器

                2、注册组件

                3、使用组件

                Vue.extend()

                调用Vue.extend()创建的是一个组件化构造器

                通常在创建组件构造器时,传入template代表我们自定义组件的模板

                该模板就是在使用到组件的地方，要显示的html代码

<!DOCTYPE html>

<html>

    <head>

        <title>修饰符</title>

        <meta charset="UTF-8">

    </head>

    <body>

        <div id="app">

             // 3、使用组件 必须在vue实例中

             <my-cpn></my-cpn>

        </div>

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

        <script type="text/javascript">

            // 1、创建组件构造器对象

            const cpnC = Vue.extend({

                template:`<div>

                    <h2>标题</h2>

                    <p>内容</p>

                </div>`

            })

            // 2、注册组件

            //Vue.component('组件标签名')

            Vue.component('my-cpn',cpnC)

            let app = new Vue({

                el:"#app",

                data:{

                },

            })

        </script>

    </body>

</html>