1 why

為了簡化元件的註冊，template選項中在拼接HTML比較麻煩，這也導致了HTML和JS的高耦合性。

2 how

2.1 使用script註冊元件

<div id="app">
		<my-component></my-component>
	</div>

	<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
	<script type="text/x-template" id="myComponent">
		<div>這是一個元件</div>
	</script>
	
	<script type="text/javascript">
		Vue.component('my-component',{
			template : '#myComponent',
		});

		new Vue({
			el:"#app",
		});
	
	</script>	
 

2.2 使用template註冊元件
 

	<div id="app">
		<my-component></my-component>
	</div>

	<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
	<template id="myComponent">
		<div>這是一個元件</div>
	</template>
	
	<script type="text/javascript">
		Vue.component('my-component',{
			template : '#myComponent',
		});

		new Vue({
			el:"#app",
		});
	</script>
 

區別 ： 使用template註冊元件不需要寫 type屬性。