創(chuàng)建組建的方式1

<div id="app">
    <mycom1></mycom1>
</div>
<script>
    Vue.component('mycom1', Vue.extend({
        template: '<h3>這是使用Vue.extend創(chuàng)建的組件</h3>'
    }))
</script>

創(chuàng)建組件的方式2

<div id="app">
    <mycom2></mycom2>
</div>
<script>
    Vue.component('mycom2', {
        template: '<h3>這是使用Vue.extend創(chuàng)建的組件</h3>'
    })
</script>

創(chuàng)建組件得方式3

<div id="app">
    <mycom3></mycom3>
</div>
<!--在被控制的#app外面，使用template元素，定義組件的HTML模板結(jié)構(gòu)-->
<temeplate id='tmp1'>
    <div>
        <h1>這是通過template元素在外部定義的組件結(jié)構(gòu)，這個方式，有代碼的智能提示和高亮</h1>
        <h3>好用，不錯</h3>
    </div>
</template>
<script>
    Vue.component('mycom3', {
        template: '#tmp1'
    })
</script>

注意

不論是哪種方式創(chuàng)建出來的組件，組建的template屬性指向的模板內(nèi)容，
必須有且只能有唯一的根元素
例：

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