创建组建的方式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>'
