{ "version": 1.1, "tags": [ { "name": "Transition", "description": { "kind": "markdown", "value": "\n**単一の**要素またはコンポーネントにアニメーションのトランジションを提供します。\n\n- **プロパティ**\n\n ```ts\n interface TransitionProps {\n /**\n * トランジションの CSS クラス名を自動生成するために使用します。\n * 例: `name: 'fade'` は `.fade-enter` や `.fade-enter-active`\n * などに自動展開されます。\n */\n name?: string\n /**\n * CSS のトランジションクラスを適用するかどうか。\n * デフォルト: true\n */\n css?: boolean\n /**\n * トランジション終了タイミングを決定するために待機する、\n * トランジションイベントの種類を指定します。\n * デフォルトの動作は、持続時間がより長い方のタイプを\n * 自動検出します。\n */\n type?: 'transition' | 'animation'\n /**\n * トランジションの持続時間を明示的に指定します。\n * デフォルトの動作は、ルートトランジション要素の最初の\n * `transitionend` または `animationend` イベントを待ちます。\n */\n duration?: number | { enter: number; leave: number }\n /**\n * leaving/entering トランジションのタイミングシーケンスを制御。\n * デフォルトの動作は同時です。\n */\n mode?: 'in-out' | 'out-in' | 'default'\n /**\n * 初回レンダリング時にトランジションを適用するかどうか。\n * デフォルト: false\n */\n appear?: boolean\n\n /**\n * トランジションクラスをカスタマイズするためのプロパティ。\n * テンプレートでは kebab-case を使用（例: 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` のみ）\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://ja.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- **プロパティ**\n\n `` は `` と同じプロパティ（`mode` 以外）と追加の 2 つのプロパティを受け取ります:\n\n ```ts\n interface TransitionGroupProps extends Omit {\n /**\n * 未定義の場合はフラグメントとしてレンダリングされます。\n */\n tag?: string\n /**\n * 移動のトランジション中に適用される CSS クラスのカスタマイズ。\n * テンプレートでは kebab-case を使用（例: move-class=\"xxx\"）\n */\n moveClass?: string\n }\n ```\n\n- **イベント**\n\n `` は `` と同じイベントを発行します。\n\n- **詳細**\n\n デフォルトでは、`` はラッパー DOM 要素をレンダリングしませんが、 `tag` プロパティによって定義できます。\n\n アニメーションが正しく動作するためには、`` 内のすべての子に[**一意なキーを指定**](https://ja.vuejs.org/guide/essentials/list.html#maintaining-state-with-key)する必要があることに注意してください。\n\n `` は CSS の transform による移動トランジションに対応しています。更新後に画面上の子の位置が変化した場合、移動用の CSS クラス（`name` 属性から自動生成されるか、`move-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://ja.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- **プロパティ**\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 `` の直接の子として、アクティブなコンポーネントのインスタンスは常に 1 つだけです。\n\n `` の内部でコンポーネントが切り替えられると、その `activated` と `deactivated` ライフサイクルフックが呼び出されます（`mounted` と `unmounted` は呼び出されず、その代わりとして提供されています）。これは `` の直接の子だけでなく、そのすべての子孫にも適用されます。\n\n- **例**\n\n 基本的な使い方:\n\n ```html\n \n \n \n ```\n\n `v-if` / `v-else` の分岐を使用する場合、一度にレンダリングされるコンポーネントは 1 つだけである必要があります:\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://ja.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- **プロパティ**\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://ja.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- **プロパティ**\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` スロットの 2 つのスロットを受け付けます。default スロットをメモリー内にレンダリングする間、fallback スロットの内容を表示します。\n\n デフォルトスロットのレンダリング中に非同期な依存関係（[非同期コンポーネント](https://ja.vuejs.org/guide/components/async.html)や [`async setup()`](https://ja.vuejs.org/guide/built-ins/suspense.html#async-setup) のコンポーネント）が発生すると、それらが全て解決するまで待ってからデフォルトスロットを表示します。\n\n- **参照:** [ガイド - Suspense](https://ja.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- **プロパティ**\n\n ```ts\n interface DynamicComponentProps {\n is: string | Component\n }\n ```\n\n- **詳細**\n\n 実際にレンダリングするコンポーネントは `is` プロパティによって決定されます。\n\n - `is` が文字列の場合、HTML タグ名か、コンポーネントの登録名となります。\n\n - また、`is` はコンポーネントの定義に直接バインドもできます。\n\n- **例**\n\n 登録名によるコンポーネントのレンダリング（Options 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 例えば `\n\n \n ```\n\n 実際のアプリケーションでは、ネイティブのフォームフィールドはコンポーネントでラップされるのが一般的なので、このようなエッジケースはあまりありません。もし、ネイティブ要素を直接使用する必要がある場合は、 `v-model` を属性とイベントに手動で分割できます。\n\n- **参照:** [動的コンポーネント](https://ja.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- **プロパティ**\n\n ```ts\n interface SlotProps {\n /**\n * に渡されたすべてのプロパティは、スコープ付き\n * スロットの引数として渡されます\n */\n [key: string]: any\n /**\n * スロット名を指定するために予約済み。\n */\n name?: string\n }\n ```\n\n- **詳細**\n\n `` 要素では `name` 属性を使用してスロット名を指定できます。`name` が指定されない場合は、デフォルトのスロットがレンダリングされます。slot 要素に渡された追加の属性は、親で定義されたスコープ付きスロットにスロットプロパティとして渡されます。\n\n この要素そのものは、一致したスロットの内容に置き換えられます。\n\n Vue テンプレートの `` 要素は JavaScript にコンパイルされているので、[ネイティブの `` 要素](https://developer.mozilla.org/ja/docs/Web/HTML/Element/slot)と混同しないように注意してください。\n\n- **参照:** [コンポーネント - スロット](https://ja.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": "\nDOM に要素をレンダリングせずに組み込みディレクティブを使用したい場合、`