当你写的组件模板template内容很冗长和复杂时，如果都在JavaScript里拼接字符串，效率是很低的，因为不像直接写html简单。
为了解决这个问题，Vue提供了另一种定义模板的方式，在< script >标签里使用text/x-template类型，并且指定一个id,将这个id赋给template。代码如下

<div id="app">
	<my-component></my-component>
	<script type="text/x-template" id="my-component">
		<div>这是组件的内容</div>
	</script>
</div>
<script>
	Vue.component('my-component',{
		template:'#my-component'
	}),
	vat app = new Vue({
		el:"#app"
	})
</script>

运行效果如下图：

在< script >标签里，就可以愉快地写html代码而不用考虑换行等问题了