vue声明组件四种方式

   <div id=‘app‘>
        <first-login></first-login>
    </div>

    <script>
        // 方式一  
　　　　　//声明组件内容
        var first = Vue.extend({
            template: ‘<h1>第一种方式</h1>‘
        })
        // 全局注册 参数一 组件名称（组件名称不支持驼峰命名）  参数二 组件内容
        Vue.component(‘first-login‘,first)
        
        const vm = new Vue({
            el: ‘#app‘,
            data: {
            },
            methods: {
            },
        })
    </script>

    <div id=‘app‘>
        <second-login></second-login>
    </div>

    <script>
        // 方式二  
        Vue.component(‘second-login‘,{
            template:‘<h1>第二种方式</h1>‘
        })

        const vm = new Vue({
            el: ‘#app‘,
            data: {
            },
            methods: {
            },
        })
    </script>

    <div id=‘app‘>
        <!-- 方式三 -->
        <third-login></third-login>
    </div>
    <script type=‘template‘ id="third">
        <h1>第三种方式</h1>
    </script>

    <script>
        // 方式三
        Vue.component(‘third-login‘,{
            template:‘#third‘
        })

        const vm = new Vue({
            el: ‘#app‘,
            data: {
            },
            methods: {
            },
        })
    </script>

    <div id=‘app‘>
        <!-- 方式四 -->
        <forth-login></forth-login>
    </div>
    <!-- 方法四 -->
    <template id="forth">
        <!-- 只能有一个根元素 -->
        <h1>第四种方式</h1>
    </template>
    <script>
        // 方式四
        Vue.component(‘forth-login‘, {
            template: ‘#forth‘
        })

        const vm = new Vue({
            el: ‘#app‘,
            data: {
            },
            methods: {
            },
        })
    </script>