template 模板（三种编写方式）

1.直接写在选项中的模板

<script>
	const app = new Vue({
			el:'#app' , 
			data:{
				message:'我是选项模板'
			} , 
			template:`<p><a href="#">{{message}}</a></p>`
	)
</script>

优点：比较直观
缺点：

• 当模板比较复杂且代码量大的时候，不适合写在构造器中。
• 在构造器中写模板时候，不会有提示和补齐的功能，费时费事。

2.写在template标签里的模板

这种写法更像是在写HTML代码，就算不会写Vue的人，也可以制作页面
html代码：

<div id='app'>

</div>
<!--注意：模板要写在外面-->
<template id='tem1'>
	<h1>我是写在template
	标签里的模板</h1>
</template>

js 代码

const app = new Vue({
	el:'#app' , 
	data:{
	} , 
	template:'#tem1'
})

3.写在 script 标签里的模板

<script type='x-template' , id='demo3'>
	<h1>我是 script 标签里的模板<h1>
</script>
<script>
	const app = new Vue({
			el:'#app' , 
			data:{
			} , 
			template:'#demo3' 
	})
</script>

以后学习到vue-cli的时候还会学到一种xxx.vue的写法。