Vue3 模板标签
Vue3 选项式 API
在 Vue3 中， 标签是一个非常核心的概念。
用于定义组件的模板结构，是 Vue 渲染页面的基础。
标签的基本概念
标签是 Vue3 中用于定义组件模板的标签。它本身不会被渲染到最终的 DOM 中，而是作为一个容器，用于包裹 Vue 的模板语法（如插值、指令等）。Vue 会根据 中的内容生成实际的 HTML 结构。
特点
非渲染标签： 标签本身不会出现在最终的 DOM 结构中。
模板容器：它用于包裹 Vue 的模板语法，如插值、条件渲染、列表渲染等。
支持多根节点：在 Vue3 中， 标签可以包含多个根节点，而在 Vue2 中则只能有一个。
标签的使用场景
1. 定义组件模板
在单文件组件（.vue 文件）中， 标签用于定义组件的模板部分。例如：
实例
{{ title }}
{{ description }}
2. 条件渲染
标签可以与 v-if 或 v-else 指令一起使用，实现条件渲染。例如：
实例
This content is visible.
This content is hidden.
3. 列表渲染
标签可以与 v-for 指令一起使用，实现列表渲染。例如：
实例
- {{ item.name }}
标签的注意事项
不支持动态属性： 标签本身不支持动态属性（如 :class 或 :style 等），因为它在渲染时会被忽略。
避免嵌套使用：虽然 标签可以嵌套使用，但过度嵌套可能导致代码可读性下降。
与 v-slot 的配合：在 Vue3 中， 标签常用于定义插槽内容，例如：
实例
Header Content
Default Content
Vue3 选项式 API