创建组件的几种方式

1.

<div id="app">
    //直接把组件的名称 以HTML 标签的形式引入到页面中
    <mycom1></mycom1>
</div>

<script>

    // Vue.extend创建全局vue组件
    var com1 = Vue.extend({
        template:'<h1>123456</h1>>'
    })

    //Vue.component（'组件的名称'，创建出来的组件模板对象）
    Vue.component('mycom1',com1)

 Vue.component('mycom1',Vue.extend({
        template:'<h1>123456</h1>>'
    }))

2.

<div id="app">
    <!--直接把组件的名称 以HTML 标签的形式引入到页面中-->
    <mycom2></mycom2>
</div>

<script>


    //Vue.component（'组件的名称'，创建出来的组件模板对象）
    Vue.component('mycom2',{
        template:'<h1>123456</h1>>'
    })

3.***

<div id="app">
    <!--直接把组件的名称 以HTML 标签的形式引入到页面中-->
    <mycom3></mycom3>
</div>
<!--在被控制的 #app 外面使用tenplate元素 定义组件的HTML模板结构-->
<template id="tmp1">
    <div>
        <h1>通过template在外部定义的组件</h1>
        <h3>123456</h3>
    </div>
</template>
<script>
    //Vue.component（'组件的名称'，创建出来的组件模板对象）
    Vue.component('mycom3',{
        template:'#tmp1'
    })