创建组件方式

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