vue.js组件的三种创建方式

vue.js组件的三种创建方式，下面以全局组件为例子

    <div id="main" v-cloak>
        <mycom1></mycom1>    //用这样的对标签显示组件
        <mycom2></mycom2>
        <mycom3></mycom3>
    </div>
    
    //用template标签定义组件模版，id="temp"为组件名称，标签内部可写任何结构
    <template id="temp">
        <div>
            <h1>组件第三种形式</h1>
            <h2>hello</h2>
        </div>
    </template>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
            //组件的第一种创建方式
        Vue.component('mycom1', Vue.extend({
           template: '<h1>Hello World</h1>'
        }))
            //组件的第二种创建方式
        Vue.component('mycom2', {
                template: '<h1>组件的第二种创建方式</h1>'
        })
            //组件的第二种创建方式
        Vue.component('mycom3', {
            template: '#temp'
        })

        var vm = new Vue({
            el: '#main',    //组件要作用的位置

        })
    </script>