{ "version": 1.1, "tags": [ { "name": "Transition", "description": { "kind": "markdown", "value": "\n為**單個**元素或組件提供動畫過渡效果。\n\n- **Props**\n\n ```ts\n interface TransitionProps {\n /**\n * 用於自動生成過渡 CSS class 名。\n * 例如 `name: 'fade'` 將自動擴展為 `.fade-enter`、\n * `.fade-enter-active` 等。\n */\n name?: string\n /**\n * 是否應用 CSS 過渡 class。\n * 默認：true\n */\n css?: boolean\n /**\n * 指定要等待的過渡事件類型\n * 來確定過渡結束的時間。\n * 默認情況下會自動檢測\n * 持續時間較長的類型。\n */\n type?: 'transition' | 'animation'\n /**\n * 顯式指定過渡的持續時間。\n * 默認情況下是等待過渡效果的根元素的第一個 `transitionend`\n * 或`animationend`事件。\n */\n duration?: number | { enter: number; leave: number }\n /**\n * 控制離開/進入過渡的時序。\n * 默認情況下是同時的。\n */\n mode?: 'in-out' | 'out-in' | 'default'\n /**\n * 是否對初始渲染使用過渡。\n * 默認：false\n */\n appear?: boolean\n\n /**\n * 用於自定義過渡 class 的 prop。\n * 在模板中使用短橫線命名，例如：enter-from-class=\"xxx\"\n */\n enterFromClass?: string\n enterActiveClass?: string\n enterToClass?: string\n appearFromClass?: string\n appearActiveClass?: string\n appearToClass?: string\n leaveFromClass?: string\n leaveActiveClass?: string\n leaveToClass?: string\n }\n ```\n\n- **事件**\n\n - `@before-enter`\n - `@before-leave`\n - `@enter`\n - `@leave`\n - `@appear`\n - `@after-enter`\n - `@after-leave`\n - `@after-appear`\n - `@enter-cancelled`\n - `@leave-cancelled` (`v-show` only)\n - `@appear-cancelled`\n\n- **示例**\n\n 簡單元素：\n\n ```html\n \n
toggled content
\n \n ```\n\n 通過改變 `key` 屬性來強制過度執行：\n \n ```html\n \n
{{ text }}
\n \n ```\n\n 動態組件，初始渲染時帶有過渡模式 + 動畫出現：\n\n ```html\n \n \n \n ```\n\n 監聽過渡事件：\n\n ```html\n \n
toggled content
\n \n ```\n\n- **參考**：[`` 指南](https://cn.vuejs.org/guide/built-ins/transition.html)\n" }, "references": [ { "name": "en", "url": "https://vuejs.org/api/built-in-components.html#transition" }, { "name": "zh-cn", "url": "https://cn.vuejs.org/api/built-in-components.html#transition" }, { "name": "ja", "url": "https://ja.vuejs.org/api/built-in-components.html#transition" }, { "name": "ua", "url": "https://ua.vuejs.org/api/built-in-components.html#transition" }, { "name": "fr", "url": "https://fr.vuejs.org/api/built-in-components.html#transition" }, { "name": "ko", "url": "https://ko.vuejs.org/api/built-in-components.html#transition" } ] }, { "name": "TransitionGroup", "description": { "kind": "markdown", "value": "\n為列表中的**多個**元素或組件提供過渡效果。\n\n- **Props**\n\n `` 擁有與 `` 除了 `mode` 以外所有的 props，並增加了兩個額外的 props：\n\n ```ts\n interface TransitionGroupProps extends Omit {\n /**\n * 如果未定義，則渲染為片段 (fragment)。\n */\n tag?: string\n /**\n * 用於自定義過渡期間被應用的 CSS class。\n * 在模板中使用 kebab-case，例如 move-class=\"xxx\"\n */\n moveClass?: string\n }\n ```\n\n- **事件**\n\n `` 拋出與 `` 相同的事件。\n\n- **詳細信息**\n\n 默認情況下，`` 不會渲染一個容器 DOM 元素，但是可以通過 `tag` prop 啟用。\n\n 注意，每個 `` 的子節點必須有[**獨立的 key**](https://cn.vuejs.org/guide/essentials/list.html#maintaining-state-with-key)，動畫才能正常工作。\n\n `` 支持通過 CSS transform 控制移動效果。當一個子節點在屏幕上的位置在更新之後發生變化時，它會被添加一個使其位移的 CSS class (基於 `name` attribute 推導，或使用 `move-class` prop 顯式配置)。如果使其位移的 class 被添加時 CSS 的 `transform` 屬性是“可過渡的”，那麼該元素會基於 [FLIP 技巧](https://aerotwist.com/blog/flip-your-animations/)平滑地到達動畫終點。\n\n- **示例**\n\n ```html\n \n
  • \n {{ item.text }}\n
    • \n     \n ```\n\n- **參考**：[指南 - TransitionGroup](https://cn.vuejs.org/guide/built-ins/transition-group.html)\n" }, "references": [ { "name": "en", "url": "https://vuejs.org/api/built-in-components.html#transitiongroup" }, { "name": "zh-cn", "url": "https://cn.vuejs.org/api/built-in-components.html#transitiongroup" }, { "name": "ja", "url": "https://ja.vuejs.org/api/built-in-components.html#transitiongroup" }, { "name": "ua", "url": "https://ua.vuejs.org/api/built-in-components.html#transitiongroup" }, { "name": "fr", "url": "https://fr.vuejs.org/api/built-in-components.html#transitiongroup" }, { "name": "ko", "url": "https://ko.vuejs.org/api/built-in-components.html#transitiongroup" } ] }, { "name": "KeepAlive", "description": { "kind": "markdown", "value": "\n緩存包裹在其中的動態切換組件。\n\n- **Props**\n\n ```ts\n interface KeepAliveProps {\n /**\n * 如果指定，則只有與 `include` 名稱\n * 匹配的組件才會被緩存。\n */\n include?: MatchPattern\n /**\n * 任何名稱與 `exclude`\n * 匹配的組件都不會被緩存。\n */\n exclude?: MatchPattern\n /**\n * 最多可以緩存多少組件實例。\n */\n max?: number | string\n }\n\n type MatchPattern = string | RegExp | (string | RegExp)[]\n ```\n\n- **詳細信息**\n\n `` 包裹動態組件時，會緩存不活躍的組件實例，而不是銷燬它們。\n\n 任何時候都只能有一個活躍組件實例作為 `` 的直接子節點。\n\n 當一個組件在 `` 中被切換時，它的 `activated` 和 `deactivated` 生命週期鉤子將被調用，用來替代 `mounted` 和 `unmounted`。這適用於 `` 的直接子節點及其所有子孫節點。\n\n- **示例**\n\n 基本用法：\n\n ```html\n \n \n \n ```\n\n 與 `v-if` / `v-else` 分支一起使用時，同一時間只能有一個組件被渲染：\n\n ```html\n \n 1\">\n \n \n ```\n\n 與 `` 一起使用：\n\n ```html\n \n \n \n \n \n ```\n\n 使用 `include` / `exclude`：\n\n ```html\n \n \n \n \n\n \n \n \n \n\n \n \n \n \n ```\n\n 使用 `max`：\n\n ```html\n \n \n \n ```\n\n- **參考**：[指南 - KeepAlive](https://cn.vuejs.org/guide/built-ins/keep-alive.html)\n" }, "references": [ { "name": "en", "url": "https://vuejs.org/api/built-in-components.html#keepalive" }, { "name": "zh-cn", "url": "https://cn.vuejs.org/api/built-in-components.html#keepalive" }, { "name": "ja", "url": "https://ja.vuejs.org/api/built-in-components.html#keepalive" }, { "name": "ua", "url": "https://ua.vuejs.org/api/built-in-components.html#keepalive" }, { "name": "fr", "url": "https://fr.vuejs.org/api/built-in-components.html#keepalive" }, { "name": "ko", "url": "https://ko.vuejs.org/api/built-in-components.html#keepalive" } ] }, { "name": "Teleport", "description": { "kind": "markdown", "value": "\n將其插槽內容渲染到 DOM 中的另一個位置。\n\n- **Props**\n\n ```ts\n interface TeleportProps {\n /**\n * 必填項。指定目標容器。\n * 可以是選擇器或實際元素。\n */\n to: string | HTMLElement\n /**\n * 當值為 `true` 時，內容將保留在其原始位置\n * 而不是移動到目標容器中。\n * 可以動態更改。\n */\n disabled?: boolean\n }\n ```\n\n- **示例**\n\n 指定目標容器：\n\n ```html\n \n \n \n ```\n\n 有條件地禁用：\n\n ```html\n \n \n ```\n\n- **參考**：[指南 - Teleport](https://cn.vuejs.org/guide/built-ins/teleport.html)\n" }, "references": [ { "name": "en", "url": "https://vuejs.org/api/built-in-components.html#teleport" }, { "name": "zh-cn", "url": "https://cn.vuejs.org/api/built-in-components.html#teleport" }, { "name": "ja", "url": "https://ja.vuejs.org/api/built-in-components.html#teleport" }, { "name": "ua", "url": "https://ua.vuejs.org/api/built-in-components.html#teleport" }, { "name": "fr", "url": "https://fr.vuejs.org/api/built-in-components.html#teleport" }, { "name": "ko", "url": "https://ko.vuejs.org/api/built-in-components.html#teleport" } ] }, { "name": "Suspense", "description": { "kind": "markdown", "value": "\n用於協調對組件樹中嵌套的異步依賴的處理。\n\n- **Props**\n\n ```ts\n interface SuspenseProps {\n timeout?: string | number\n }\n ```\n\n- **事件**\n\n - `@resolve`\n - `@pending`\n - `@fallback`\n\n- **詳細信息**\n\n `` 接受兩個插槽：`#default` 和 `#fallback`。它將在內存中渲染默認插槽的同時展示後備插槽內容。\n\n 如果在渲染時遇到異步依賴項 ([異步組件](https://cn.vuejs.org/guide/components/async.html)和具有 [`async setup()`](https://cn.vuejs.org/guide/built-ins/suspense.html#async-setup) 的組件)，它將等到所有異步依賴項解析完成時再顯示默認插槽。\n\n- **參考**：[指南 - Suspense](https://cn.vuejs.org/guide/built-ins/suspense.html)\n" }, "references": [ { "name": "en", "url": "https://vuejs.org/api/built-in-components.html#suspense" }, { "name": "zh-cn", "url": "https://cn.vuejs.org/api/built-in-components.html#suspense" }, { "name": "ja", "url": "https://ja.vuejs.org/api/built-in-components.html#suspense" }, { "name": "ua", "url": "https://ua.vuejs.org/api/built-in-components.html#suspense" }, { "name": "fr", "url": "https://fr.vuejs.org/api/built-in-components.html#suspense" }, { "name": "ko", "url": "https://ko.vuejs.org/api/built-in-components.html#suspense" } ] }, { "name": "component", "description": { "kind": "markdown", "value": "\n一個用於渲染動態組件或元素的“元組件”。\n\n- **Props**\n\n ```ts\n interface DynamicComponentProps {\n is: string | Component\n }\n ```\n\n- **詳細信息**\n\n 要渲染的實際組件由 `is` prop 決定。\n\n - 當 `is` 是字符串，它既可以是 HTML 標籤名也可以是組件的註冊名。\n\n - 或者，`is` 也可以直接綁定到組件的定義。\n\n- **示例**\n\n 按註冊名渲染組件 (選項式 API)：\n\n ```vue\n \n\n \n ```\n\n 按定義渲染組件 (`\n\n \n ```\n\n 渲染 HTML 元素：\n\n ```html\n \n ```\n\n [內置組件](./built-in-components)都可以傳遞給 `is`，但是如果想通過名稱傳遞則必須先對其進行註冊。舉例來說：\n\n ```vue\n \n\n \n ```\n\n 如果將組件本身傳遞給 `is` 而不是其名稱，則不需要註冊，例如在 `\n\n \n ```\n\n 在實踐中，這種極端情況並不常見，因為原生表單字段通常包裹在實際應用的組件中。如果確實需要直接使用原生元素，那麼你可以手動將 `v-model` 拆分為 attribute 和事件。\n\n- **參考**：[動態組件](https://cn.vuejs.org/guide/essentials/component-basics.html#dynamic-components)\n" }, "references": [ { "name": "en", "url": "https://vuejs.org/api/built-in-special-elements.html#component" }, { "name": "zh-cn", "url": "https://cn.vuejs.org/api/built-in-special-elements.html#component" }, { "name": "ja", "url": "https://ja.vuejs.org/api/built-in-special-elements.html#component" }, { "name": "ua", "url": "https://ua.vuejs.org/api/built-in-special-elements.html#component" }, { "name": "fr", "url": "https://fr.vuejs.org/api/built-in-special-elements.html#component" }, { "name": "ko", "url": "https://ko.vuejs.org/api/built-in-special-elements.html#component" } ] }, { "name": "slot", "description": { "kind": "markdown", "value": "\n表示模板中的插槽內容出口。\n\n- **Props**\n\n ```ts\n interface SlotProps {\n /**\n * 任何傳遞給 的 prop 都可以作為作用域插槽\n * 的參數傳遞\n */\n [key: string]: any\n /**\n * 保留，用於指定插槽名。\n */\n name?: string\n }\n ```\n\n- **詳細信息**\n\n `` 元素可以使用 `name` attribute 來指定插槽名。當沒有指定 `name` 時，將會渲染默認插槽。傳遞給插槽元素的附加 attributes 將作為插槽 props，傳遞給父級中定義的作用域插槽。\n\n 元素本身將被其所匹配的插槽內容替換。\n\n Vue 模板裡的 `` 元素會被編譯到 JavaScript，因此不要與[原生 `` 元素](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot)進行混淆。\n\n- **參考**：[組件 - 插槽](https://cn.vuejs.org/guide/components/slots.html)\n" }, "references": [ { "name": "en", "url": "https://vuejs.org/api/built-in-special-elements.html#slot" }, { "name": "zh-cn", "url": "https://cn.vuejs.org/api/built-in-special-elements.html#slot" }, { "name": "ja", "url": "https://ja.vuejs.org/api/built-in-special-elements.html#slot" }, { "name": "ua", "url": "https://ua.vuejs.org/api/built-in-special-elements.html#slot" }, { "name": "fr", "url": "https://fr.vuejs.org/api/built-in-special-elements.html#slot" }, { "name": "ko", "url": "https://ko.vuejs.org/api/built-in-special-elements.html#slot" } ] }, { "name": "template", "description": { "kind": "markdown", "value": "\n當我們想要使用內置指令而不在 DOM 中渲染元素時，`