前言
在前面的很多章节中，在我们自定义组件时经常会出现template标签，那么它到底是什么呢？
template是html5的一个新元素，主要用于保存客户端中的内容，表现为浏览器解析该内容但不渲染出来，可以将一个模板视为正在被存储以供随后在文档中使用的一个内容片段。
template标签在 Vue 中的作用：存放dom结构的
写法一：写在 template 标签里
模版代码：
1
2
3
| <template id="demo">
<div>写在template标签里</div>
</template>
|
示例代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
</head>
<body>
<template id="demo">
<div>写在template标签里</div>
</template>
<div id="app">div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
template: '#demo'
})
</script>
</body>
</html>
|
写在script标签里
模版代码：
1
2
3
| <script type="text/template" id="demo">
<div>写在script标签里</div>
</script>
|
示例代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
</head>
<body>
<div id="app">div>
<script type="text/template" id="demo">
<div>写在script标签里</div>
</script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
template: '#demo'
})
</script>
</body>
</html>
|
直接写在选项里
模版代码：
1
| template: '<div>直接写在选项里</div>'
|
示例代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
</head>
<body>
<div id="app">div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
template: '<div>直接写在选项里</div>'
})
</script>
</body>
</html>
|
总结
以上三种写法都可以达到我们需要的效果，在日常开发中，使用哪一种并没有特定的要求，哪种合适就选择哪一种。如果我们开发项目使用了vue-cli脚手架，那么就更简单了，直接新建一个xxx.vue文件，按照规则编写即可。