### 直接寫在選項里的模板
直接在構造器里的template選項后邊編寫。這種寫法比較直觀,但是如果模板html代碼太多,不建議這么寫。
~~~
var app=new Vue({
el:'#app',
data:{
message:'hello Vue!'
},
template:`
<h1 style="color:red">我是選項模板</h1>
`
})
~~~
這里需要注意的是模板的標識不是單引號和雙引號,而是,就是Tab上面的鍵。
### 寫在`<template>`標簽里的模板
這種寫法更像是在寫HTML代碼,就算不會寫Vue的人,也可以制作頁面。
~~~javascript
<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>`標簽里的模板
這種寫模板的方法,可以讓模板文件從外部引入。
~~~javascript
<script type="x-template" id="demo3">
<h2 style="color:red">我是script標簽模板</h2>
</script>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
message:'hello Vue!'
},
template:'#demo3'
})
</script>
~~~