<template> 是 Vue 单文件组件中定义视图结构的必需且唯一标准位置，必须有且仅有一个根元素，支持完整模板语法，纯负责结构展示，与 <script> 和 <style> 严格分离。
标签必须有且仅有一个根元素
比如不能这样写：
<template> <h1>Title</h1> <p>Content</p> </template>
会报错。正确写法是用一个容器包裹：
<template>
<div>
<h1>Title</h1>
<p>Content</p>
</div>
</template>也可以用语义化标签如 <section>、<article>，甚至 <template>（不渲染）作为逻辑根节点（适用于需要多个并列子节点但又不想加额外 DOM 元素时）。
中支持完整的 Vue 模板语法
你可以在里面直接使用：
- 插值表达式
{{ message }} - 指令如
v-if、v-for、v-model、@click、:class - 组件调用
<MyButton />（需已注册或导入） - 动态属性绑定
:title="tooltipText"
例如一个带列表和交互的完整示例：
<template>
<div class="todo-list">
<input v-model="newTodo" @keyup.enter="addTodo" placeholder="Add a task" />
<ul>
<li v-for="(item, index) in todos" :key="index">
{{ item }}
<button @click="removeTodo(index)">×</button>
</li>
</ul>
</div>
</template> 只负责结构，不包含逻辑或样式
它的职责很纯粹：描述“长什么样”。数据、方法、生命周期等全部放在 <script> 里；样式则写在 <style> 中。这种分离让组件更易读、易测试、易协作。
在 Options API 中， 与 data / methods 配合工作
data 提供响应式数据，methods 提供事件处理函数，而 <template> 是它们的“展示界面”。Vue 自动建立响应式连接——比如 {{ counter }} 映射到 data() 返回对象里的 counter 属性，@click="increment" 对应 methods 中的 increment 方法。
<script>
export default {
data() {
return {
counter: 0,
todos: [],
newTodo: ''
}
},
methods: {
increment() {
this.counter++
},
addTodo() {
if (this.newTodo.trim()) {
this.todos.push(this.newTodo.trim())
this.newTodo = ''
}
},
removeTodo(index) {
this.todos.splice(index, 1)
}
}
}
</script>不复杂但容易忽略
立即学习“前端免费学习笔记（深入）”；
