是 vue 单文件组件中定义视图结构的必需且唯一标准位置，必须有且仅有一个根元素，支持完整模板语法，纯负责结构展示，与 和 严格分离。
标签必须有且仅有一个根元素
比如不能这样写：
<template><h1>Title</h1> <p>Content</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5039" title="check-vue-style"><img src="https://img.php.cn/upload/skill/000/000/081/179032142844293.jpg" alt="check-vue-style" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5039" title="check-vue-style" class="overflowclass">check-vue-style</a> <p class="overflowclass">检查 .vue 单文件组件的 CSS 规范问题并给出提示，适用于样式检查、CSS审查和 Vue 页面质量巡检。</p> </div> <a rel="nofollow" href="/xiazai/skill5039" title="check-vue-style" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> </template>
会报错。正确写法是用一个容器包裹：
<template><div>
<h1>Title</h1>
<p>Content</p>
</div>
</template>
也可以用语义化标签如 <section></section>、<article></article>，甚至 <template></template>（不渲染）作为逻辑根节点（适用于需要多个并列子节点但又不想加额外 DOM 元素时）。
中支持完整的 Vue 模板语法
你可以在里面直接使用：
- 插值表达式
{{ message }} - 指令如
v-if、v-for、v-model、@click、:class - 组件调用
<mybutton></mybutton>（需已注册或导入） - 动态属性绑定
:title="tooltipText"
例如一个带列表和交互的完整示例：
<template><div class="todo-list">
<input v-model="newTodo" placeholder="Add a task"><ul>
<li v-for="(item, index) in todos" :key="index">
{{ item }}
<button>×</button>
</li>
</ul>
</div>
</template>
只负责结构，不包含逻辑或样式
它的职责很纯粹：描述“长什么样”。数据、方法、生命周期等全部放在 <script></script> 里；样式则写在 <style></style> 中。这种分离让组件更易读、易测试、易协作。
在 Options API 中， 与 data / methods 配合工作
data 提供响应式数据，methods 提供事件处理函数，而 <template></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>
不复杂但容易忽略
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
