Vue3 模板标签 <template>

Vue3 选项式 API

在 Vue3 中，<template> 标签是一个非常核心的概念。

<template> 用于定义组件的模板结构，是 Vue 渲染页面的基础。

<template> 标签的基本概念

<template> 标签是 Vue3 中用于定义组件模板的标签。它本身不会被渲染到最终的 DOM 中，而是作为一个容器，用于包裹 Vue 的模板语法（如插值、指令等）。Vue 会根据 <template> 中的内容生成实际的 HTML 结构。

特点

1. 非渲染标签：<template> 标签本身不会出现在最终的 DOM 结构中。
2. 模板容器：它用于包裹 Vue 的模板语法，如插值、条件渲染、列表渲染等。
3. 支持多根节点：在 Vue3 中，<template> 标签可以包含多个根节点，而在 Vue2 中则只能有一个。

<template> 标签的使用场景

1. 定义组件模板

在单文件组件（.vue 文件）中，<template> 标签用于定义组件的模板部分。例如：

2. 条件渲染

<template> 标签可以与 v-if 或 v-else 指令一起使用，实现条件渲染。例如：

3. 列表渲染

<template> 标签可以与 v-for 指令一起使用，实现列表渲染。例如：

<template> 标签的注意事项

1. 不支持动态属性：<template> 标签本身不支持动态属性（如 :class 或 :style 等），因为它在渲染时会被忽略。
2. 避免嵌套使用：虽然 <template> 标签可以嵌套使用，但过度嵌套可能导致代码可读性下降。
3. 与 v-slot 的配合：在 Vue3 中，<template> 标签常用于定义插槽内容，例如：

Vue3 选项式 API