一、直接写在选项里的模板
直接在构造器里的template选项后边编写。这种写法比较直观，但是如果模板html代码太多，不建议这么写。
javascript代码：
|
1
2
3
4
5
6
7
8
9
|
var
app
=
new
Vue
(
{
el
:
'#app'
,
data
:
{
message
:
'hello Vue!'
}
,
template
:
`
<
h1
style
=
"color:red"
>我是选项模板
<
/
h1
>
`
}
)
|
这里需要注意的是模板的标识不是单引号和双引号，而是，就是Tab上面的键。
二、写在<template>标签里的模板
这种写法更像是在写HTML代码，就算不会写Vue的人，也可以制作页面。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<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>标签里的模板
这种写模板的方法，可以让模板文件从外部引入。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<script
type
=
"x-template"
id
=
"demo3"
>
<
h2
style
=
"color:red"
>我是
script标签模板
<
/h2>
</s
cript
>
<script
type
=
"text/javascript"
>
var
app
=
new
Vue
(
{
el
:
'#app'
,
data
:
{
message
:
'hello Vue!'
}
,
template
:
'#demo3'
}
)
</script>
|