创建组建的方式1

<div id="app">
    <mycom1></mycom1>
</div>
<script>
    Vue.component('mycom1', Vue.extend({
        template: '<h3>这是使用Vue.extend创建的组件</h3>'
    }))
</script>

创建组件的方式2

<div id="app">
    <mycom2></mycom2>
</div>
<script>
    Vue.component('mycom2', {
        template: '<h3>这是使用Vue.extend创建的组件</h3>'
    })
</script>

创建组件得方式3

<div id="app">
    <mycom3></mycom3>
</div>
<!--在被控制的#app外面，使用template元素，定义组件的HTML模板结构-->
<temeplate id='tmp1'>
    <div>
        <h1>这是通过template元素在外部定义的组件结构，这个方式，有代码的智能提示和高亮</h1>
        <h3>好用，不错</h3>
    </div>
</template>
<script>
    Vue.component('mycom3', {
        template: '#tmp1'
    })
</script>

注意

不论是哪种方式创建出来的组件，组建的template属性指向的模板内容，
必须有且只能有唯一的根元素
例：

template: '<div>
            <h3>enne</h3>
            <span>123</span>
          </div>'