Vue2.0 【第二季】第5节 Template制作模板
第5节 Template制作模板
一、直接写在选项里的模板
直接在构造器里的template选项后边编写。这种写法比较直观，但是如果模板html代码太多，不建议使用。
js代码：
var app=new Vue({
el:'#app',
data:{
message:'hello Vue!'
},
template:`
<h1 style="color:red">我是选项模板</h1>
` //这是Tab上的键
})
二、写在template标签里的模板
这种写法更像是在写HTML代码，就算不会写Vue的人，也可以制作页面。
<template id="demo2">
<h2 style="color:red">我是template标签模板</h2>
</template>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
message:'hello Vue!'
},
template:'#demo2'
})
</script>
三、写在script标签里的模板
这种写模板的方法，可以让模板文件从外部引入。
<script type="x-template" id="demo3" <!--src="..."-->>
<h2 style="color:red">我是script标签模板</h2>
</script>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
message:'hello Vue!'
},
template:'#demo3'
})
</script>
这一节学习了Template的三种写法，以后学习到vue-cli的时候还会学到一种xxx.vue的写法。