@vue/language-service 1.8.0 → 1.8.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/data/template/ja.json +26 -26
- package/package.json +15 -15
package/data/template/ja.json
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
"name": "Transition",
|
|
6
6
|
"description": {
|
|
7
7
|
"kind": "markdown",
|
|
8
|
-
"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 <Transition>\n <div v-if=\"ok\">toggled content</div>\n </Transition>\n ```\n\n `key` 属性を変更することで強制的にトランジションさせる:\n\n ```html\n <Transition>\n <div :key=\"text\">{{ text }}</div>\n </Transition>\n ```\n\n トランジションモードと出現時のアニメーションを備えている動的コンポーネント:\n\n ```html\n <Transition name=\"fade\" mode=\"out-in\" appear>\n <component :is=\"view\"></component>\n </Transition>\n ```\n\n トランジションイベントを購読する:\n\n ```html\n <Transition @after-enter=\"onTransitionComplete\">\n <div v-show=\"ok\">toggled content</div>\n </Transition>\n ```\n\n-
|
|
8
|
+
"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 <Transition>\n <div v-if=\"ok\">toggled content</div>\n </Transition>\n ```\n\n `key` 属性を変更することで強制的にトランジションさせる:\n\n ```html\n <Transition>\n <div :key=\"text\">{{ text }}</div>\n </Transition>\n ```\n\n トランジションモードと出現時のアニメーションを備えている動的コンポーネント:\n\n ```html\n <Transition name=\"fade\" mode=\"out-in\" appear>\n <component :is=\"view\"></component>\n </Transition>\n ```\n\n トランジションイベントを購読する:\n\n ```html\n <Transition @after-enter=\"onTransitionComplete\">\n <div v-show=\"ok\">toggled content</div>\n </Transition>\n ```\n\n- **参照** [`<Transition>` ガイド](https://ja.vuejs.org/guide/built-ins/transition.html)\n"
|
|
9
9
|
},
|
|
10
10
|
"attributes": [],
|
|
11
11
|
"references": [
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
"name": "TransitionGroup",
|
|
40
40
|
"description": {
|
|
41
41
|
"kind": "markdown",
|
|
42
|
-
"value": "\nリスト内の**複数**の要素またはコンポーネントにトランジション効果を提供する。\n\n- **プロパティ**\n\n `<TransitionGroup>` は `<Transition>` と同じプロパティ（`mode` 以外）と追加の 2 つのプロパティを受け取ります:\n\n ```ts\n interface TransitionGroupProps extends Omit<TransitionProps, 'mode'> {\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 `<TransitionGroup>` は `<Transition>` と同じイベントを発行します。\n\n- **詳細**\n\n デフォルトでは、`<TransitionGroup>` はラッパー DOM 要素をレンダリングしませんが、 `tag` プロパティによって定義できます。\n\n アニメーションが正しく動作するためには、`<transition-group>` 内のすべての子に[**一意なキーを指定**](https://ja.vuejs.org/guide/essentials/list.html#maintaining-state-with-key)する必要があることに注意してください。\n\n `<TransitionGroup>` は CSS の transform による移動トランジションに対応しています。更新後に画面上の子の位置が変化した場合、移動用の CSS クラス（`name` 属性から自動生成されるか、`move-class` プロパティで設定）が適用されます。移動用のクラスが適用されたときに、CSS の `transform` プロパティが「トランジション可能」であれば、その要素は [FLIP テクニック](https://aerotwist.com/blog/flip-your-animations/)を使って移動先までスムーズにアニメーションします。\n\n- **例**\n\n ```html\n <TransitionGroup tag=\"ul\" name=\"slide\">\n <li v-for=\"item in items\" :key=\"item.id\">\n {{ item.text }}\n </li>\n </TransitionGroup>\n ```\n\n-
|
|
42
|
+
"value": "\nリスト内の**複数**の要素またはコンポーネントにトランジション効果を提供する。\n\n- **プロパティ**\n\n `<TransitionGroup>` は `<Transition>` と同じプロパティ（`mode` 以外）と追加の 2 つのプロパティを受け取ります:\n\n ```ts\n interface TransitionGroupProps extends Omit<TransitionProps, 'mode'> {\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 `<TransitionGroup>` は `<Transition>` と同じイベントを発行します。\n\n- **詳細**\n\n デフォルトでは、`<TransitionGroup>` はラッパー DOM 要素をレンダリングしませんが、 `tag` プロパティによって定義できます。\n\n アニメーションが正しく動作するためには、`<transition-group>` 内のすべての子に[**一意なキーを指定**](https://ja.vuejs.org/guide/essentials/list.html#maintaining-state-with-key)する必要があることに注意してください。\n\n `<TransitionGroup>` は CSS の transform による移動トランジションに対応しています。更新後に画面上の子の位置が変化した場合、移動用の CSS クラス（`name` 属性から自動生成されるか、`move-class` プロパティで設定）が適用されます。移動用のクラスが適用されたときに、CSS の `transform` プロパティが「トランジション可能」であれば、その要素は [FLIP テクニック](https://aerotwist.com/blog/flip-your-animations/)を使って移動先までスムーズにアニメーションします。\n\n- **例**\n\n ```html\n <TransitionGroup tag=\"ul\" name=\"slide\">\n <li v-for=\"item in items\" :key=\"item.id\">\n {{ item.text }}\n </li>\n </TransitionGroup>\n ```\n\n- **参照** [ガイド - TransitionGroup](https://ja.vuejs.org/guide/built-ins/transition-group.html)\n"
|
|
43
43
|
},
|
|
44
44
|
"attributes": [],
|
|
45
45
|
"references": [
|
|
@@ -73,7 +73,7 @@
|
|
|
73
73
|
"name": "KeepAlive",
|
|
74
74
|
"description": {
|
|
75
75
|
"kind": "markdown",
|
|
76
|
-
"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 動的コンポーネントをラップすると、`<KeepAlive>` は非アクティブなコンポーネントインスタンスを破棄せずにキャッシュします。\n\n `<KeepAlive>` の直接の子として、アクティブなコンポーネントのインスタンスは常に 1 つだけです。\n\n `<KeepAlive>` の内部でコンポーネントが切り替えられると、その `activated` と `deactivated` ライフサイクルフックが呼び出されます（`mounted` と `unmounted` は呼び出されず、その代わりとして提供されています）。これは `<KeepAlive>` の直接の子だけでなく、そのすべての子孫にも適用されます。\n\n- **例**\n\n 基本的な使い方:\n\n ```html\n <KeepAlive>\n <component :is=\"view\"></component>\n </KeepAlive>\n ```\n\n `v-if` / `v-else` の分岐を使用する場合、一度にレンダリングされるコンポーネントは 1 つだけである必要があります:\n\n ```html\n <KeepAlive>\n <comp-a v-if=\"a > 1\"></comp-a>\n <comp-b v-else></comp-b>\n </KeepAlive>\n ```\n\n `<Transition>` と共に使用:\n\n ```html\n <Transition>\n <KeepAlive>\n <component :is=\"view\"></component>\n </KeepAlive>\n </Transition>\n ```\n\n `include` / `exclude` の使用:\n\n ```html\n <!-- カンマ区切りの文字列 -->\n <KeepAlive include=\"a,b\">\n <component :is=\"view\"></component>\n </KeepAlive>\n\n <!-- 正規表現（`v-bind` を使用） -->\n <KeepAlive :include=\"/a|b/\">\n <component :is=\"view\"></component>\n </KeepAlive>\n\n <!-- 配列（`v-bind` を使用） -->\n <KeepAlive :include=\"['a', 'b']\">\n <component :is=\"view\"></component>\n </KeepAlive>\n ```\n\n `max` の使用:\n\n ```html\n <KeepAlive :max=\"10\">\n <component :is=\"view\"></component>\n </KeepAlive>\n ```\n\n-
|
|
76
|
+
"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 動的コンポーネントをラップすると、`<KeepAlive>` は非アクティブなコンポーネントインスタンスを破棄せずにキャッシュします。\n\n `<KeepAlive>` の直接の子として、アクティブなコンポーネントのインスタンスは常に 1 つだけです。\n\n `<KeepAlive>` の内部でコンポーネントが切り替えられると、その `activated` と `deactivated` ライフサイクルフックが呼び出されます（`mounted` と `unmounted` は呼び出されず、その代わりとして提供されています）。これは `<KeepAlive>` の直接の子だけでなく、そのすべての子孫にも適用されます。\n\n- **例**\n\n 基本的な使い方:\n\n ```html\n <KeepAlive>\n <component :is=\"view\"></component>\n </KeepAlive>\n ```\n\n `v-if` / `v-else` の分岐を使用する場合、一度にレンダリングされるコンポーネントは 1 つだけである必要があります:\n\n ```html\n <KeepAlive>\n <comp-a v-if=\"a > 1\"></comp-a>\n <comp-b v-else></comp-b>\n </KeepAlive>\n ```\n\n `<Transition>` と共に使用:\n\n ```html\n <Transition>\n <KeepAlive>\n <component :is=\"view\"></component>\n </KeepAlive>\n </Transition>\n ```\n\n `include` / `exclude` の使用:\n\n ```html\n <!-- カンマ区切りの文字列 -->\n <KeepAlive include=\"a,b\">\n <component :is=\"view\"></component>\n </KeepAlive>\n\n <!-- 正規表現（`v-bind` を使用） -->\n <KeepAlive :include=\"/a|b/\">\n <component :is=\"view\"></component>\n </KeepAlive>\n\n <!-- 配列（`v-bind` を使用） -->\n <KeepAlive :include=\"['a', 'b']\">\n <component :is=\"view\"></component>\n </KeepAlive>\n ```\n\n `max` の使用:\n\n ```html\n <KeepAlive :max=\"10\">\n <component :is=\"view\"></component>\n </KeepAlive>\n ```\n\n- **参照** [ガイド - KeepAlive](https://ja.vuejs.org/guide/built-ins/keep-alive.html)\n"
|
|
77
77
|
},
|
|
78
78
|
"attributes": [],
|
|
79
79
|
"references": [
|
|
@@ -107,7 +107,7 @@
|
|
|
107
107
|
"name": "Teleport",
|
|
108
108
|
"description": {
|
|
109
109
|
"kind": "markdown",
|
|
110
|
-
"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 <teleport to=\"#some-id\" />\n <teleport to=\".some-class\" />\n <teleport to=\"[data-teleport]\" />\n ```\n\n 条件によって無効化:\n\n ```html\n <teleport to=\"#popup\" :disabled=\"displayVideoInline\">\n <video src=\"./my-movie.mp4\">\n </teleport>\n ```\n\n-
|
|
110
|
+
"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 <teleport to=\"#some-id\" />\n <teleport to=\".some-class\" />\n <teleport to=\"[data-teleport]\" />\n ```\n\n 条件によって無効化:\n\n ```html\n <teleport to=\"#popup\" :disabled=\"displayVideoInline\">\n <video src=\"./my-movie.mp4\">\n </teleport>\n ```\n\n- **参照** [ガイド - Teleport](https://ja.vuejs.org/guide/built-ins/teleport.html)\n"
|
|
111
111
|
},
|
|
112
112
|
"attributes": [],
|
|
113
113
|
"references": [
|
|
@@ -141,7 +141,7 @@
|
|
|
141
141
|
"name": "Suspense",
|
|
142
142
|
"description": {
|
|
143
143
|
"kind": "markdown",
|
|
144
|
-
"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 `<Suspense>` は `#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-
|
|
144
|
+
"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 `<Suspense>` は `#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"
|
|
145
145
|
},
|
|
146
146
|
"attributes": [],
|
|
147
147
|
"references": [
|
|
@@ -175,7 +175,7 @@
|
|
|
175
175
|
"name": "component",
|
|
176
176
|
"description": {
|
|
177
177
|
"kind": "markdown",
|
|
178
|
-
"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 <script>\n import Foo from './Foo.vue'\n import Bar from './Bar.vue'\n\n export default {\n components: { Foo, Bar },\n data() {\n return {\n view: 'Foo'\n }\n }\n }\n </script>\n\n <template>\n <component :is=\"view\" />\n </template>\n ```\n\n 定義によるコンポーネントのレンダリング（`<script setup>` の Composition API）:\n\n ```vue\n <script setup>\n import Foo from './Foo.vue'\n import Bar from './Bar.vue'\n </script>\n\n <template>\n <component :is=\"Math.random() > 0.5 ? Foo : Bar\" />\n </template>\n ```\n\n HTML 要素のレンダリング:\n\n ```html\n <component :is=\"href ? 'a' : 'span'\"></component>\n ```\n\n [ビルトインのコンポーネント](./built-in-components)はすべて `is` に渡すことができますが、名前で渡したい場合は登録しなければなりません。例えば:\n\n ```vue\n <script>\n import { Transition, TransitionGroup } from 'vue'\n\n export default {\n components: {\n Transition,\n TransitionGroup\n }\n }\n </script>\n\n <template>\n <component :is=\"isGroup ? 'TransitionGroup' : 'Transition'\">\n ...\n </component>\n </template>\n ```\n\n 例えば `<script setup>` などで、コンポーネント名ではなく、コンポーネント自体を `is` に渡す場合は、登録は必要ありません。\n\n もし `v-model` が `<component>` タグで使用された場合、テンプレートコンパイラーは他のコンポーネントと同じように、`modelValue` プロパティと `update:modelValue` イベントリスナーに展開されます。しかし、これは `<input>` や `<select>` のようなネイティブ HTML 要素とは互換性がありません。そのため、動的に生成されるネイティブ要素に対して `v-model` を使用しても動作しません:\n\n ```vue\n <script setup>\n import { ref } from 'vue'\n
|
|
178
|
+
"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 <script>\n import Foo from './Foo.vue'\n import Bar from './Bar.vue'\n\n export default {\n components: { Foo, Bar },\n data() {\n return {\n view: 'Foo'\n }\n }\n }\n </script>\n\n <template>\n <component :is=\"view\" />\n </template>\n ```\n\n 定義によるコンポーネントのレンダリング（`<script setup>` の Composition API）:\n\n ```vue\n <script setup>\n import Foo from './Foo.vue'\n import Bar from './Bar.vue'\n </script>\n\n <template>\n <component :is=\"Math.random() > 0.5 ? Foo : Bar\" />\n </template>\n ```\n\n HTML 要素のレンダリング:\n\n ```html\n <component :is=\"href ? 'a' : 'span'\"></component>\n ```\n\n [ビルトインのコンポーネント](./built-in-components)はすべて `is` に渡すことができますが、名前で渡したい場合は登録しなければなりません。例えば:\n\n ```vue\n <script>\n import { Transition, TransitionGroup } from 'vue'\n\n export default {\n components: {\n Transition,\n TransitionGroup\n }\n }\n </script>\n\n <template>\n <component :is=\"isGroup ? 'TransitionGroup' : 'Transition'\">\n ...\n </component>\n </template>\n ```\n\n 例えば `<script setup>` などで、コンポーネント名ではなく、コンポーネント自体を `is` に渡す場合は、登録は必要ありません。\n\n もし `v-model` が `<component>` タグで使用された場合、テンプレートコンパイラーは他のコンポーネントと同じように、`modelValue` プロパティと `update:modelValue` イベントリスナーに展開されます。しかし、これは `<input>` や `<select>` のようなネイティブ HTML 要素とは互換性がありません。そのため、動的に生成されるネイティブ要素に対して `v-model` を使用しても動作しません:\n\n ```vue\n <script setup>\n import { ref } from 'vue'\n\n const tag = ref('input')\n const username = ref('')\n </script>\n\n <template>\n <!-- 'input' はネイティブ HTML 要素なので、動作しません -->\n <component :is=\"tag\" v-model=\"username\" />\n </template>\n ```\n\n 実際のアプリケーションでは、ネイティブのフォームフィールドはコンポーネントでラップされるのが一般的なので、このようなエッジケースはあまりありません。もし、ネイティブ要素を直接使用する必要がある場合は、 `v-model` を属性とイベントに手動で分割できます。\n\n- **参照** [動的コンポーネント](https://ja.vuejs.org/guide/essentials/component-basics.html#dynamic-components)\n"
|
|
179
179
|
},
|
|
180
180
|
"attributes": [],
|
|
181
181
|
"references": [
|
|
@@ -209,7 +209,7 @@
|
|
|
209
209
|
"name": "slot",
|
|
210
210
|
"description": {
|
|
211
211
|
"kind": "markdown",
|
|
212
|
-
"value": "\nテンプレート内でスロットコンテンツのアウトレットを表します。\n\n- **プロパティ**\n\n ```ts\n interface SlotProps {\n /**\n * <slot> に渡されたすべてのプロパティは、スコープ付き\n * スロットの引数として渡されます\n */\n [key: string]: any\n /**\n * スロット名を指定するために予約済み。\n */\n name?: string\n }\n ```\n\n- **詳細**\n\n `<slot>` 要素では `name` 属性を使用してスロット名を指定できます。`name` が指定されない場合は、デフォルトのスロットがレンダリングされます。slot 要素に渡された追加の属性は、親で定義されたスコープ付きスロットにスロットプロパティとして渡されます。\n\n この要素そのものは、一致したスロットの内容に置き換えられます。\n\n Vue テンプレートの `<slot>` 要素は JavaScript にコンパイルされているので、[ネイティブの `<slot>` 要素](https://developer.mozilla.org/ja/docs/Web/HTML/Element/slot)と混同しないように注意してください。\n\n-
|
|
212
|
+
"value": "\nテンプレート内でスロットコンテンツのアウトレットを表します。\n\n- **プロパティ**\n\n ```ts\n interface SlotProps {\n /**\n * <slot> に渡されたすべてのプロパティは、スコープ付き\n * スロットの引数として渡されます\n */\n [key: string]: any\n /**\n * スロット名を指定するために予約済み。\n */\n name?: string\n }\n ```\n\n- **詳細**\n\n `<slot>` 要素では `name` 属性を使用してスロット名を指定できます。`name` が指定されない場合は、デフォルトのスロットがレンダリングされます。slot 要素に渡された追加の属性は、親で定義されたスコープ付きスロットにスロットプロパティとして渡されます。\n\n この要素そのものは、一致したスロットの内容に置き換えられます。\n\n Vue テンプレートの `<slot>` 要素は JavaScript にコンパイルされているので、[ネイティブの `<slot>` 要素](https://developer.mozilla.org/ja/docs/Web/HTML/Element/slot)と混同しないように注意してください。\n\n- **参照** [コンポーネント - スロット](https://ja.vuejs.org/guide/components/slots.html)\n"
|
|
213
213
|
},
|
|
214
214
|
"attributes": [],
|
|
215
215
|
"references": [
|
|
@@ -243,7 +243,7 @@
|
|
|
243
243
|
"name": "template",
|
|
244
244
|
"description": {
|
|
245
245
|
"kind": "markdown",
|
|
246
|
-
"value": "\nDOM に要素をレンダリングせずに組み込みディレクティブを使用したい場合、`<template>` タグをプレースホルダーとして使用します。\n\n-
|
|
246
|
+
"value": "\nDOM に要素をレンダリングせずに組み込みディレクティブを使用したい場合、`<template>` タグをプレースホルダーとして使用します。\n\n- **詳細**\n\n `<template>` の特別な処理は、以下のディレクティブと一緒に使われた場合のみ発生します:\n\n - `v-if`、`v-else-if`、または `v-else`\n - `v-for`\n - `v-slot`\n\n これらのディレクティブが存在しない場合は、代わりに[ネイティブの `<template>` 要素](https://developer.mozilla.org/ja/docs/Web/HTML/Element/template)としてレンダリングされます。\n\n `v-for` を持つ `<template>` は [`key` 属性](https://ja.vuejs.org/api/built-in-special-attributes.html#key)を持たせることができます。それ以外の属性やディレクティブは、対応する要素がなければ意味をなさないので、すべて破棄されます。\n\n 単一ファイルコンポーネントは、テンプレート全体をラップするために[トップレベルの `<template>` タグ](https://ja.vuejs.org/api/sfc-spec.html#language-blocks)を使用します。この使い方は、上記で説明した `<template>` の使い方とは別のものです。このトップレベルタグはテンプレート自体の一部ではなく、ディレクティブのようなテンプレートの構文もサポートしていません。\n\n- **参照**\n - [ガイド - `<template>` に `v-if` を適用する](https://ja.vuejs.org/guide/essentials/conditional.html#v-if-on-template)\n - [ガイド - `<template>` に `v-for` を適用する](https://ja.vuejs.org/guide/essentials/list.html#v-for-on-template)\n - [ガイド - 名前付きスロット](https://ja.vuejs.org/guide/components/slots.html#named-slots)\n"
|
|
247
247
|
},
|
|
248
248
|
"attributes": [],
|
|
249
249
|
"references": [
|
|
@@ -279,7 +279,7 @@
|
|
|
279
279
|
"name": "v-text",
|
|
280
280
|
"description": {
|
|
281
281
|
"kind": "markdown",
|
|
282
|
-
"value": "\n要素のテキスト内容を更新します。\n\n- **期待する値:** `string`\n\n- **詳細**\n\n `v-text` は要素の [textContent](https://developer.mozilla.org/ja/docs/Web/API/Node/textContent) プロパティをセットする動作なので、要素内の既存のコンテンツはすべて上書きされます。`textContent` の一部を更新する必要がある場合は、代わりに[マスタッシュ展開](https://ja.vuejs.org/guide/essentials/template-syntax.html#text-interpolation)を使用します。\n\n- **例**\n\n ```html\n <span v-text=\"msg\"></span>\n <!-- same as -->\n <span>{{msg}}</span>\n ```\n\n-
|
|
282
|
+
"value": "\n要素のテキスト内容を更新します。\n\n- **期待する値:** `string`\n\n- **詳細**\n\n `v-text` は要素の [textContent](https://developer.mozilla.org/ja/docs/Web/API/Node/textContent) プロパティをセットする動作なので、要素内の既存のコンテンツはすべて上書きされます。`textContent` の一部を更新する必要がある場合は、代わりに[マスタッシュ展開](https://ja.vuejs.org/guide/essentials/template-syntax.html#text-interpolation)を使用します。\n\n- **例**\n\n ```html\n <span v-text=\"msg\"></span>\n <!-- same as -->\n <span>{{msg}}</span>\n ```\n\n- **参照** [テンプレート構文 - テキスト展開](https://ja.vuejs.org/guide/essentials/template-syntax.html#text-interpolation)\n"
|
|
283
283
|
},
|
|
284
284
|
"references": [
|
|
285
285
|
{
|
|
@@ -312,7 +312,7 @@
|
|
|
312
312
|
"name": "v-html",
|
|
313
313
|
"description": {
|
|
314
314
|
"kind": "markdown",
|
|
315
|
-
"value": "\n要素の [innerHTML](https://developer.mozilla.org/ja/docs/Web/API/Element/innerHTML) を更新します。\n\n- **期待する値:** `string`\n\n-
|
|
315
|
+
"value": "\n要素の [innerHTML](https://developer.mozilla.org/ja/docs/Web/API/Element/innerHTML) を更新します。\n\n- **期待する値:** `string`\n\n- **詳細**\n\n `v-html` の内容は、プレーンな HTML として挿入されます - Vue テンプレートの構文は処理されません。もし、`v-html` を使ってテンプレートを構成しようとしているのであれば、代わりにコンポーネントを使うなどして解決策を見直してみてください。\n\n ::: warning セキュリティーに関する注意\n ウェブサイト上で任意の HTML を動的にレンダリングすることは、[XSS 攻撃](https://ja.wikipedia.org/wiki/%E3%82%AF%E3%83%AD%E3%82%B9%E3%82%B5%E3%82%A4%E3%83%88%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%97%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0)につながりやすいため、非常に危険です。信頼できるコンテンツにのみ `v-html` を使用し、ユーザーが提供するコンテンツには**絶対に**使用しないでください。\n :::\n\n [単一ファイルコンポーネント](https://ja.vuejs.org/guide/scaling-up/sfc.html)では、`scoped` スタイルは `v-html` 内のコンテンツには適用されません。これは、その HTML が Vue のテンプレートコンパイラーによって処理されないからです。もし `v-html` のコンテンツにスコープ付き CSS を適用したい場合は、代わりに [CSS modules](./sfc-css-features#css-modules) を使ったり、BEM などの手動スコープ戦略を持つ追加のグローバル `<style>` 要素を使用可能です。\n\n- **例**\n\n ```html\n <div v-html=\"html\"></div>\n ```\n\n- **参照** [テンプレート構文 - 生の HTML](https://ja.vuejs.org/guide/essentials/template-syntax.html#raw-html)\n"
|
|
316
316
|
},
|
|
317
317
|
"references": [
|
|
318
318
|
{
|
|
@@ -345,7 +345,7 @@
|
|
|
345
345
|
"name": "v-show",
|
|
346
346
|
"description": {
|
|
347
347
|
"kind": "markdown",
|
|
348
|
-
"value": "\n式の値の真偽に基づいて、要素の可視性を切り替えます。\n\n- **期待する値:** `any`\n\n- **詳細**\n\n `v-show` はインラインスタイルで `display` CSS プロパティをセットする動作で、要素が表示されている場合は `display` の初期値を尊重しようとします。また、その状態が変化したときにトランジションを引き起こします。\n\n-
|
|
348
|
+
"value": "\n式の値の真偽に基づいて、要素の可視性を切り替えます。\n\n- **期待する値:** `any`\n\n- **詳細**\n\n `v-show` はインラインスタイルで `display` CSS プロパティをセットする動作で、要素が表示されている場合は `display` の初期値を尊重しようとします。また、その状態が変化したときにトランジションを引き起こします。\n\n- **参照** [条件付きレンダリング - v-show](https://ja.vuejs.org/guide/essentials/conditional.html#v-show)\n"
|
|
349
349
|
},
|
|
350
350
|
"references": [
|
|
351
351
|
{
|
|
@@ -378,7 +378,7 @@
|
|
|
378
378
|
"name": "v-if",
|
|
379
379
|
"description": {
|
|
380
380
|
"kind": "markdown",
|
|
381
|
-
"value": "\n式の値の真偽に基づいて、要素またはテンプレートフラグメントを条件付きでレンダリングします。\n\n- **期待する値:** `any`\n\n- **詳細**\n\n `v-if` 要素がトグルされると、要素とそれに含まれるディレクティブ/コンポーネントは破棄され、再構築されます。初期条件が falsy な場合、内部のコンテンツは全くレンダリングされません。\n\n `<template>` に使用すると、テキストのみ、または複数の要素を含む条件ブロックを表すことができます。\n\n このディレクティブは、条件が変化したときにトランジションをトリガーします。\n\n 一緒に使用した場合、 `v-if` は `v-for` よりも高い優先度を持ちます。この 2 つのディレクティブを 1 つの要素で同時に使うことはお勧めしません。詳しくは [リストレンダリングガイド](https://ja.vuejs.org/guide/essentials/list.html#v-for-with-v-if) を参照してください。\n\n-
|
|
381
|
+
"value": "\n式の値の真偽に基づいて、要素またはテンプレートフラグメントを条件付きでレンダリングします。\n\n- **期待する値:** `any`\n\n- **詳細**\n\n `v-if` 要素がトグルされると、要素とそれに含まれるディレクティブ/コンポーネントは破棄され、再構築されます。初期条件が falsy な場合、内部のコンテンツは全くレンダリングされません。\n\n `<template>` に使用すると、テキストのみ、または複数の要素を含む条件ブロックを表すことができます。\n\n このディレクティブは、条件が変化したときにトランジションをトリガーします。\n\n 一緒に使用した場合、 `v-if` は `v-for` よりも高い優先度を持ちます。この 2 つのディレクティブを 1 つの要素で同時に使うことはお勧めしません。詳しくは [リストレンダリングガイド](https://ja.vuejs.org/guide/essentials/list.html#v-for-with-v-if) を参照してください。\n\n- **参照** [条件付きレンダリング - v-if](https://ja.vuejs.org/guide/essentials/conditional.html#v-if)\n"
|
|
382
382
|
},
|
|
383
383
|
"references": [
|
|
384
384
|
{
|
|
@@ -412,7 +412,7 @@
|
|
|
412
412
|
"valueSet": "v",
|
|
413
413
|
"description": {
|
|
414
414
|
"kind": "markdown",
|
|
415
|
-
"value": "\n`v-if` または `v-if` / `v-else-if` チェーンの「else ブロック」を表します。\n\n- **式を受け取りません**\n\n- **詳細**\n\n - 制限: 直前の兄弟要素には `v-if` または `v-else-if` が必要です。\n\n - `<template>` に使用すると、テキストのみ、または複数の要素を含む条件ブロックを表すことができます。\n\n- **例**\n\n ```html\n <div v-if=\"Math.random() > 0.5\">\n Now you see me\n </div>\n <div v-else>\n Now you don't\n </div>\n ```\n\n-
|
|
415
|
+
"value": "\n`v-if` または `v-if` / `v-else-if` チェーンの「else ブロック」を表します。\n\n- **式を受け取りません**\n\n- **詳細**\n\n - 制限: 直前の兄弟要素には `v-if` または `v-else-if` が必要です。\n\n - `<template>` に使用すると、テキストのみ、または複数の要素を含む条件ブロックを表すことができます。\n\n- **例**\n\n ```html\n <div v-if=\"Math.random() > 0.5\">\n Now you see me\n </div>\n <div v-else>\n Now you don't\n </div>\n ```\n\n- **参照** [条件付きレンダリング - v-else](https://ja.vuejs.org/guide/essentials/conditional.html#v-else)\n"
|
|
416
416
|
},
|
|
417
417
|
"references": [
|
|
418
418
|
{
|
|
@@ -445,7 +445,7 @@
|
|
|
445
445
|
"name": "v-else-if",
|
|
446
446
|
"description": {
|
|
447
447
|
"kind": "markdown",
|
|
448
|
-
"value": "\n`v-if` の「else if ブロック」を表します。連鎖させることができます。\n\n- **期待する値:** `any`\n\n- **詳細**\n\n - 制限: 直前の兄弟要素には `v-if` または `v-else-if` が必要です。\n\n - `<template>` に使用すると、テキストのみ、または複数の要素を含む条件ブロックを表すことができます。\n\n- **例**\n\n ```html\n <div v-if=\"type === 'A'\">\n A\n </div>\n <div v-else-if=\"type === 'B'\">\n B\n </div>\n <div v-else-if=\"type === 'C'\">\n C\n </div>\n <div v-else>\n Not A/B/C\n </div>\n ```\n\n-
|
|
448
|
+
"value": "\n`v-if` の「else if ブロック」を表します。連鎖させることができます。\n\n- **期待する値:** `any`\n\n- **詳細**\n\n - 制限: 直前の兄弟要素には `v-if` または `v-else-if` が必要です。\n\n - `<template>` に使用すると、テキストのみ、または複数の要素を含む条件ブロックを表すことができます。\n\n- **例**\n\n ```html\n <div v-if=\"type === 'A'\">\n A\n </div>\n <div v-else-if=\"type === 'B'\">\n B\n </div>\n <div v-else-if=\"type === 'C'\">\n C\n </div>\n <div v-else>\n Not A/B/C\n </div>\n ```\n\n- **参照** [条件付きレンダリング - v-else-if](https://ja.vuejs.org/guide/essentials/conditional.html#v-else-if)\n"
|
|
449
449
|
},
|
|
450
450
|
"references": [
|
|
451
451
|
{
|
|
@@ -478,7 +478,7 @@
|
|
|
478
478
|
"name": "v-for",
|
|
479
479
|
"description": {
|
|
480
480
|
"kind": "markdown",
|
|
481
|
-
"value": "\n元となるデータに基づいて、要素またはテンプレートブロックを複数回レンダリングします。\n\n- **期待する値:** `Array | Object | number | string | Iterable`\n\n- **詳細**\n\n ディレクティブの値は、反復処理されている現在の要素のエイリアスを提供するために、特別な構文 `エイリアス in 式` を使用する必要があります:\n\n ```html\n <div v-for=\"item in items\">\n {{ item.text }}\n </div>\n ```\n\n または、インデックス（Object で使用する場合はキー）のエイリアスも指定できます:\n\n ```html\n <div v-for=\"(item, index) in items\"></div>\n <div v-for=\"(value, key) in object\"></div>\n <div v-for=\"(value, name, index) in object\"></div>\n ```\n\n `v-for` のデフォルトの動作は、要素を移動することなく、その場でパッチを適用しようとします。強制的に要素を並べ替えるには、特別な属性 `key` で順番のヒントを指定する必要があります:\n\n ```html\n <div v-for=\"item in items\" :key=\"item.id\">\n {{ item.text }}\n </div>\n ```\n\n また、`v-for` はネイティブの `Map` や `Set` を含む、[反復処理プロトコル](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol)を実装した値に対しても動作させることができます。\n\n-
|
|
481
|
+
"value": "\n元となるデータに基づいて、要素またはテンプレートブロックを複数回レンダリングします。\n\n- **期待する値:** `Array | Object | number | string | Iterable`\n\n- **詳細**\n\n ディレクティブの値は、反復処理されている現在の要素のエイリアスを提供するために、特別な構文 `エイリアス in 式` を使用する必要があります:\n\n ```html\n <div v-for=\"item in items\">\n {{ item.text }}\n </div>\n ```\n\n または、インデックス（Object で使用する場合はキー）のエイリアスも指定できます:\n\n ```html\n <div v-for=\"(item, index) in items\"></div>\n <div v-for=\"(value, key) in object\"></div>\n <div v-for=\"(value, name, index) in object\"></div>\n ```\n\n `v-for` のデフォルトの動作は、要素を移動することなく、その場でパッチを適用しようとします。強制的に要素を並べ替えるには、特別な属性 `key` で順番のヒントを指定する必要があります:\n\n ```html\n <div v-for=\"item in items\" :key=\"item.id\">\n {{ item.text }}\n </div>\n ```\n\n また、`v-for` はネイティブの `Map` や `Set` を含む、[反復処理プロトコル](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol)を実装した値に対しても動作させることができます。\n\n- **参照**\n - [リストレンダリング](https://ja.vuejs.org/guide/essentials/list.html)\n"
|
|
482
482
|
},
|
|
483
483
|
"references": [
|
|
484
484
|
{
|
|
@@ -511,7 +511,7 @@
|
|
|
511
511
|
"name": "v-on",
|
|
512
512
|
"description": {
|
|
513
513
|
"kind": "markdown",
|
|
514
|
-
"value": "\n要素にイベントリスナーを追加します。\n\n- **省略記法:** `@`\n\n- **期待する値:** `Function | Inline Statement | Object (without argument)`\n\n- **引数:** `event`（オブジェクト構文を使用する場合は省略可能）\n\n-
|
|
514
|
+
"value": "\n要素にイベントリスナーを追加します。\n\n- **省略記法:** `@`\n\n- **期待する値:** `Function | Inline Statement | Object (without argument)`\n\n- **引数:** `event`（オブジェクト構文を使用する場合は省略可能）\n\n- **修飾子**\n\n - `.stop` - `event.stopPropagation()` を呼び出します。\n - `.prevent` - `event.preventDefault()` を呼び出します。\n - `.capture` - キャプチャーモードでイベントリスナーを追加します。\n - `.self` - イベントがこの要素からディスパッチされた場合にのみハンドラーをトリガーします。\n - `.{keyAlias}` - 特定のキーでのみハンドラーをトリガーします。\n - `.once` - 一度だけハンドラーをトリガーします。\n - `.left` - 左ボタンのマウスイベントに対してのみ、ハンドラーをトリガーします。\n - `.right` - 右ボタンのマウスイベントに対してのみ、ハンドラーをトリガーします。\n - `.middle` - 中央ボタンのマウスイベントに対してのみ、ハンドラーをトリガーします。\n - `.passive` - DOM イベントを `{ passive: true }` で追加します。\n\n- **詳細**\n\n イベントの種類は引数で示されます。式はメソッド名かインラインステートメントで、修飾子が存在する場合は省略可能です。\n\n 通常の要素で使用する場合、[**ネイティブ DOM イベント**](https://developer.mozilla.org/ja/docs/Web/Events)のみを購読します。カスタム要素コンポーネントで使用された場合、その子コンポーネントで発行された**カスタムイベント**を購読します。\n\n ネイティブ DOM イベントを購読する場合、このメソッドは唯一の引数としてネイティブイベントを受け取ります。インラインステートメントを使用する場合、ステートメントは特別な `$event` プロパティにアクセスできます: `v-on:click=\"handle('ok', $event)\"`\n\n `v-on` は引数なしで、イベントとリスナーのペアのオブジェクトにバインドすることもサポートしています。オブジェクト構文を使用する場合、修飾子をサポートしないことに注意してください。\n\n- **例**\n\n ```html\n <!-- メソッドハンドラー -->\n <button v-on:click=\"doThis\"></button>\n\n <!-- 動的イベント -->\n <button v-on:[event]=\"doThis\"></button>\n\n <!-- インラインステートメント -->\n <button v-on:click=\"doThat('hello', $event)\"></button>\n\n <!-- 省略記法 -->\n <button @click=\"doThis\"></button>\n\n <!-- 動的イベントの省略記法 -->\n <button @[event]=\"doThis\"></button>\n\n <!-- stop propagation -->\n <button @click.stop=\"doThis\"></button>\n\n <!-- prevent default -->\n <button @click.prevent=\"doThis\"></button>\n\n <!-- 式なしで prevent default -->\n <form @submit.prevent></form>\n\n <!-- 修飾子の連鎖 -->\n <button @click.stop.prevent=\"doThis\"></button>\n\n <!-- キーのエイリアスを用いたキー修飾子 -->\n <input @keyup.enter=\"onEnter\" />\n\n <!-- 一度だけトリガーされるクリックイベント -->\n <button v-on:click.once=\"doThis\"></button>\n\n <!-- オブジェクト構文 -->\n <button v-on=\"{ mousedown: doThis, mouseup: doThat }\"></button>\n ```\n\n 子コンポーネントのカスタムイベントを購読する（子コンポーネントで \"my-event\" が発行されたときにハンドラーが呼び出される）:\n\n ```html\n <MyComponent @my-event=\"handleThis\" />\n\n <!-- インラインステートメント -->\n <MyComponent @my-event=\"handleThis(123, $event)\" />\n ```\n\n- **参照**\n - [イベントハンドリング](https://ja.vuejs.org/guide/essentials/event-handling.html)\n - [コンポーネント - カスタムイベント](https://ja.vuejs.org/guide/essentials/component-basics.html#listening-to-events)\n"
|
|
515
515
|
},
|
|
516
516
|
"references": [
|
|
517
517
|
{
|
|
@@ -544,7 +544,7 @@
|
|
|
544
544
|
"name": "v-bind",
|
|
545
545
|
"description": {
|
|
546
546
|
"kind": "markdown",
|
|
547
|
-
"value": "\n1 つ以上の属性やコンポーネントのプロパティを式に動的にバインドします。\n\n- **省略記法:** `:` or `.`（`.prop` 修飾子使用時）\n\n- **期待する値:** `any（引数ありの場合） | Object（引数なしの場合）`\n\n- **引数:** `attrOrProp（省略可能）`\n\n-
|
|
547
|
+
"value": "\n1 つ以上の属性やコンポーネントのプロパティを式に動的にバインドします。\n\n- **省略記法:** `:` or `.`（`.prop` 修飾子使用時）\n\n- **期待する値:** `any（引数ありの場合） | Object（引数なしの場合）`\n\n- **引数:** `attrOrProp（省略可能）`\n\n- **修飾子**\n\n - `.camel` - kebab-case の属性名を camelCase に変換します。\n - `.prop` - バインディングを DOM プロパティとして設定するよう強制します。<sup class=\"vt-badge\">3.2+</sup>\n - `.attr` - バインディングを DOM 属性として設定するよう強制します。<sup class=\"vt-badge\">3.2+</sup>\n\n- **使用法**\n\n `class` や `style` 属性をバインドする際に使用する `v-bind` は、Array や Object などの追加の値の型をサポートします。詳しくは、以下のリンク先のガイドを参照してください。\n\n 要素にバインディングを設定するとき、Vue はデフォルトで、`in` 演算子チェックを使用して、プロパティとして定義されたキーが要素にあるかどうかを確認します。プロパティが定義されている場合、Vue はその値を属性ではなく DOM プロパティとして設定します。これはほとんどの場合において有効ですが、`.prop` や `.attr` という修飾子を明示的に使用することでこの動作をオーバーライドできます。これは、特に[カスタム要素を扱う](https://ja.vuejs.org/guide/extras/web-components.html#passing-dom-properties)ときに必要になることがあります。\n\n コンポーネントのプロパティをバインドするために使用する場合、そのプロパティは子コンポーネントで適切に宣言されている必要があります。\n\n 引数なしで使用する場合、属性の名前と値のペアを含むオブジェクトをバインドするために使用できます。\n\n- **例**\n\n ```html\n <!-- 属性をバインドする -->\n <img v-bind:src=\"imageSrc\" />\n\n <!-- 動的な属性名 -->\n <button v-bind:[key]=\"value\"></button>\n\n <!-- 省略記法 -->\n <img :src=\"imageSrc\" />\n\n <!-- 動的な属性名の省略記法 -->\n <button :[key]=\"value\"></button>\n\n <!-- インラインの文字列連結 -->\n <img :src=\"'/path/to/images/' + fileName\" />\n\n <!-- クラスのバインド -->\n <div :class=\"{ red: isRed }\"></div>\n <div :class=\"[classA, classB]\"></div>\n <div :class=\"[classA, { classB: isB, classC: isC }]\"></div>\n\n <!-- スタイルのバインド -->\n <div :style=\"{ fontSize: size + 'px' }\"></div>\n <div :style=\"[styleObjectA, styleObjectB]\"></div>\n\n <!-- 属性のオブジェクトをバインド -->\n <div v-bind=\"{ id: someProp, 'other-attr': otherProp }\"></div>\n\n <!-- プロパティのバインド。\"prop\" は子コンポーネントで宣言する必要があります。 -->\n <MyComponent :prop=\"someThing\" />\n\n <!-- 親のプロパティを子コンポーネントと共有するために渡す -->\n <MyComponent v-bind=\"$props\" />\n\n <!-- XLink -->\n <svg><a :xlink:special=\"foo\"></a></svg>\n ```\n\n `.prop` 修飾子には、専用の短縮形 `.` もあります:\n\n ```html\n <div :someProperty.prop=\"someObject\"></div>\n\n <!-- 以下とと同じ -->\n <div .someProperty=\"someObject\"></div>\n ```\n\n `.camel` 修飾子は、DOM 内テンプレートを使用する際に、 `v-bind` 属性名をキャメル化できます（例: SVG の `viewBox` 属性）:\n\n ```html\n <svg :view-box.camel=\"viewBox\"></svg>\n ```\n\n 文字列テンプレートを使用する場合や、ビルドステップでテンプレートを事前コンパイルする場合は、`.camel` は必要ありません。\n\n- **参照**\n - [クラスとスタイルのバインディング](https://ja.vuejs.org/guide/essentials/class-and-style.html)\n - [コンポーネント - プロパティ渡しの詳細](https://ja.vuejs.org/guide/components/props.html#prop-passing-details)\n"
|
|
548
548
|
},
|
|
549
549
|
"references": [
|
|
550
550
|
{
|
|
@@ -577,7 +577,7 @@
|
|
|
577
577
|
"name": "v-model",
|
|
578
578
|
"description": {
|
|
579
579
|
"kind": "markdown",
|
|
580
|
-
"value": "\nフォーム入力要素またはコンポーネントに双方向バインディングを作成します。\n\n- **期待する値:** フォームの入力要素の値や構成要素の出力によって異なります\n\n- **以下に限定:**\n\n - `<input>`\n - `<select>`\n - `<textarea>`\n - コンポーネント\n\n-
|
|
580
|
+
"value": "\nフォーム入力要素またはコンポーネントに双方向バインディングを作成します。\n\n- **期待する値:** フォームの入力要素の値や構成要素の出力によって異なります\n\n- **以下に限定:**\n\n - `<input>`\n - `<select>`\n - `<textarea>`\n - コンポーネント\n\n- **修飾子**\n\n - [`.lazy`](https://ja.vuejs.org/guide/essentials/forms.html#lazy) - `input` の代わりに `change` イベントを購読する\n - [`.number`](https://ja.vuejs.org/guide/essentials/forms.html#number) - 有効な入力文字列を数値に変換する\n - [`.trim`](https://ja.vuejs.org/guide/essentials/forms.html#trim) - 入力をトリムする\n\n- **参照**\n\n - [フォーム入力バインディング](https://ja.vuejs.org/guide/essentials/forms.html)\n - [コンポーネントのイベント - `v-model` での使用](https://ja.vuejs.org/guide/components/v-model.html)\n"
|
|
581
581
|
},
|
|
582
582
|
"references": [
|
|
583
583
|
{
|
|
@@ -610,7 +610,7 @@
|
|
|
610
610
|
"name": "v-slot",
|
|
611
611
|
"description": {
|
|
612
612
|
"kind": "markdown",
|
|
613
|
-
"value": "\nプロパティの受け取りを期待する名前付きスロットまたはスコープ付きスロットを表します。\n\n- **省略記法:** `#`\n\n- **期待する値:** 関数の引数の位置で有効な JavaScript 式（分割代入のサポートを含む）。省略可能 - プロパティがスロットに渡されることを期待している場合のみ必要です。\n\n- **引数:** スロット名（省略可能で、デフォルトは `default`）\n\n- **以下に限定:**\n\n - `<template>`\n - [コンポーネント](https://ja.vuejs.org/guide/components/slots.html#scoped-slots)（プロパティのある単独のデフォルトスロット用）\n\n-
|
|
613
|
+
"value": "\nプロパティの受け取りを期待する名前付きスロットまたはスコープ付きスロットを表します。\n\n- **省略記法:** `#`\n\n- **期待する値:** 関数の引数の位置で有効な JavaScript 式（分割代入のサポートを含む）。省略可能 - プロパティがスロットに渡されることを期待している場合のみ必要です。\n\n- **引数:** スロット名（省略可能で、デフォルトは `default`）\n\n- **以下に限定:**\n\n - `<template>`\n - [コンポーネント](https://ja.vuejs.org/guide/components/slots.html#scoped-slots)（プロパティのある単独のデフォルトスロット用）\n\n- **例**\n\n ```html\n <!-- 名前付きスロット -->\n <BaseLayout>\n <template v-slot:header>\n Header content\n </template>\n\n <template v-slot:default>\n Default slot content\n </template>\n\n <template v-slot:footer>\n Footer content\n </template>\n </BaseLayout>\n\n <!-- プロパティを受け取る名前付きスロット -->\n <InfiniteScroll>\n <template v-slot:item=\"slotProps\">\n <div class=\"item\">\n {{ slotProps.item.text }}\n </div>\n </template>\n </InfiniteScroll>\n\n <!-- プロパティを受け取るデフォルトスロット、分割代入あり -->\n <Mouse v-slot=\"{ x, y }\">\n Mouse position: {{ x }}, {{ y }}\n </Mouse>\n ```\n\n- **参照**\n - [コンポーネント - スロット](https://ja.vuejs.org/guide/components/slots.html)\n"
|
|
614
614
|
},
|
|
615
615
|
"references": [
|
|
616
616
|
{
|
|
@@ -643,7 +643,7 @@
|
|
|
643
643
|
"name": "v-pre",
|
|
644
644
|
"description": {
|
|
645
645
|
"kind": "markdown",
|
|
646
|
-
"value": "\nこの要素とすべての子要素のコンパイルをスキップします。\n\n- **式を受け取りません**\n\n- **詳細**\n\n `v-pre` を指定した要素の内部では、Vue テンプレートの構文はすべて維持され、そのままレンダリングされます。この最も一般的な使用例は、未加工のマスタッシュタグを表示することです。\n\n-
|
|
646
|
+
"value": "\nこの要素とすべての子要素のコンパイルをスキップします。\n\n- **式を受け取りません**\n\n- **詳細**\n\n `v-pre` を指定した要素の内部では、Vue テンプレートの構文はすべて維持され、そのままレンダリングされます。この最も一般的な使用例は、未加工のマスタッシュタグを表示することです。\n\n- **例**\n\n ```html\n <span v-pre>{{ this will not be compiled }}</span>\n ```\n"
|
|
647
647
|
},
|
|
648
648
|
"references": [
|
|
649
649
|
{
|
|
@@ -676,7 +676,7 @@
|
|
|
676
676
|
"name": "v-once",
|
|
677
677
|
"description": {
|
|
678
678
|
"kind": "markdown",
|
|
679
|
-
"value": "\n要素やコンポーネントを一度だけレンダリングし、その後の更新はスキップします。\n\n- **式を受け取りません**\n\n- **詳細**\n\n その後の再レンダリングでは、要素/コンポーネントとそのすべての子要素は静的コンテンツとして扱われ、スキップされます。これは、更新のパフォーマンスを最適化するために使用できます。\n\n ```html\n <!-- 単一要素 -->\n <span v-once>This will never change: {{msg}}</span>\n <!-- 子要素を持つ要素 -->\n <div v-once>\n <h1>comment</h1>\n <p>{{msg}}</p>\n </div>\n <!-- コンポーネント -->\n <MyComponent v-once :comment=\"msg\"></MyComponent>\n <!-- `v-for` ディレクティブ -->\n <ul>\n <li v-for=\"i in list\" v-once>{{i}}</li>\n </ul>\n ```\n\n 3.2 以降では、[`v-memo`](#v-memo) を使って、テンプレートの一部を無効化する条件付きでメモ化できます。\n\n-
|
|
679
|
+
"value": "\n要素やコンポーネントを一度だけレンダリングし、その後の更新はスキップします。\n\n- **式を受け取りません**\n\n- **詳細**\n\n その後の再レンダリングでは、要素/コンポーネントとそのすべての子要素は静的コンテンツとして扱われ、スキップされます。これは、更新のパフォーマンスを最適化するために使用できます。\n\n ```html\n <!-- 単一要素 -->\n <span v-once>This will never change: {{msg}}</span>\n <!-- 子要素を持つ要素 -->\n <div v-once>\n <h1>comment</h1>\n <p>{{msg}}</p>\n </div>\n <!-- コンポーネント -->\n <MyComponent v-once :comment=\"msg\"></MyComponent>\n <!-- `v-for` ディレクティブ -->\n <ul>\n <li v-for=\"i in list\" v-once>{{i}}</li>\n </ul>\n ```\n\n 3.2 以降では、[`v-memo`](#v-memo) を使って、テンプレートの一部を無効化する条件付きでメモ化できます。\n\n- **参照**\n - [データバインディング構文 - 展開](https://ja.vuejs.org/guide/essentials/template-syntax.html#text-interpolation)\n - [v-memo](#v-memo)\n"
|
|
680
680
|
},
|
|
681
681
|
"references": [
|
|
682
682
|
{
|
|
@@ -709,7 +709,7 @@
|
|
|
709
709
|
"name": "v-memo",
|
|
710
710
|
"description": {
|
|
711
711
|
"kind": "markdown",
|
|
712
|
-
"value": "\n- **期待する値:** `any[]`\n\n- **詳細**\n\n テンプレートのサブツリーをメモ化します。要素とコンポーネントの両方で使用できます。このディレクティブは、メモ化のために比較する依存関係の値の固定長の配列を受け取ります。配列内のすべての値が直前のレンダリングと同じであった場合、サブツリー全体の更新はスキップされます。たとえば:\n\n ```html\n <div v-memo=\"[valueA, valueB]\">\n ...\n </div>\n ```\n\n コンポーネントの再レンダリング時に、 `valueA` と `valueB` の両方が同じであれば、この `<div>` とその子のすべての更新はスキップされます。実際には、仮想 DOM の VNode の生成もスキップされます。なぜなら、サブツリーのメモ化されたコピーを再利用できるからです。\n\n メモ化の配列を正しく指定することは重要であり、そうでない場合は、実際に適用されるべき更新をスキップしてしまう可能性があります。依存関係の配列を空にした `v-memo`（`v-memo=\"[]\"`）は、機能的には `v-once` と同等です。\n\n **`v-for` での使用**\n\n `v-memo` は、パフォーマンスが重要なシナリオでのミクロな最適化を行うためにのみ提供されており、ほとんど必要ありません。この機能が役に立つ最も一般的なケースは、大きな `v-for` リスト（`length > 1000`）をレンダリングするときです:\n\n ```html\n <div v-for=\"item in list\" :key=\"item.id\" v-memo=\"[item.id === selected]\">\n <p>ID: {{ item.id }} - selected: {{ item.id === selected }}</p>\n <p>...more child nodes</p>\n </div>\n ```\n\n コンポーネントの `selected` 状態が変化すると、ほとんどの項目がまったく同じままであっても、大量の VNode が作成されます。ここでの `v-memo` の使い方は、基本的に「非選択状態から選択状態になった場合のみ、またはその逆の場合のみ、この項目を更新する」というものです。これにより、影響を受けない項目はすべて以前の VNode を再利用し、差分を完全にスキップできます。メモの依存関係の配列に `item.id` を含める必要はないことに注意してください。Vue は自動的に項目の `:key` から推測します。\n\n :::warning\n `v-memo` と `v-for` を併用する場合は、同じ要素で使用されているか確認してください。**`v-memo` は `v-for` の中では動作しません。**\n :::\n\n 子コンポーネントの更新チェックが最適化されていない特定のエッジケースで、不要な更新を手動で防ぐために `v-memo` をコンポーネントに使用できます。しかし、ここでも、必要な更新をスキップしないように正しい依存関係を指定するのは、開発者の責任です。\n\n-
|
|
712
|
+
"value": "\n- **期待する値:** `any[]`\n\n- **詳細**\n\n テンプレートのサブツリーをメモ化します。要素とコンポーネントの両方で使用できます。このディレクティブは、メモ化のために比較する依存関係の値の固定長の配列を受け取ります。配列内のすべての値が直前のレンダリングと同じであった場合、サブツリー全体の更新はスキップされます。たとえば:\n\n ```html\n <div v-memo=\"[valueA, valueB]\">\n ...\n </div>\n ```\n\n コンポーネントの再レンダリング時に、 `valueA` と `valueB` の両方が同じであれば、この `<div>` とその子のすべての更新はスキップされます。実際には、仮想 DOM の VNode の生成もスキップされます。なぜなら、サブツリーのメモ化されたコピーを再利用できるからです。\n\n メモ化の配列を正しく指定することは重要であり、そうでない場合は、実際に適用されるべき更新をスキップしてしまう可能性があります。依存関係の配列を空にした `v-memo`（`v-memo=\"[]\"`）は、機能的には `v-once` と同等です。\n\n **`v-for` での使用**\n\n `v-memo` は、パフォーマンスが重要なシナリオでのミクロな最適化を行うためにのみ提供されており、ほとんど必要ありません。この機能が役に立つ最も一般的なケースは、大きな `v-for` リスト（`length > 1000`）をレンダリングするときです:\n\n ```html\n <div v-for=\"item in list\" :key=\"item.id\" v-memo=\"[item.id === selected]\">\n <p>ID: {{ item.id }} - selected: {{ item.id === selected }}</p>\n <p>...more child nodes</p>\n </div>\n ```\n\n コンポーネントの `selected` 状態が変化すると、ほとんどの項目がまったく同じままであっても、大量の VNode が作成されます。ここでの `v-memo` の使い方は、基本的に「非選択状態から選択状態になった場合のみ、またはその逆の場合のみ、この項目を更新する」というものです。これにより、影響を受けない項目はすべて以前の VNode を再利用し、差分を完全にスキップできます。メモの依存関係の配列に `item.id` を含める必要はないことに注意してください。Vue は自動的に項目の `:key` から推測します。\n\n :::warning\n `v-memo` と `v-for` を併用する場合は、同じ要素で使用されているか確認してください。**`v-memo` は `v-for` の中では動作しません。**\n :::\n\n 子コンポーネントの更新チェックが最適化されていない特定のエッジケースで、不要な更新を手動で防ぐために `v-memo` をコンポーネントに使用できます。しかし、ここでも、必要な更新をスキップしないように正しい依存関係を指定するのは、開発者の責任です。\n\n- **参照**\n - [v-once](#v-once)\n"
|
|
713
713
|
},
|
|
714
714
|
"references": [
|
|
715
715
|
{
|
|
@@ -742,7 +742,7 @@
|
|
|
742
742
|
"name": "v-cloak",
|
|
743
743
|
"description": {
|
|
744
744
|
"kind": "markdown",
|
|
745
|
-
"value": "\nコンパイルされていないテンプレートを、準備が整うまで非表示にするために使用します。\n\n- **式を受け取りません**\n\n- **詳細**\n\n **このディレクティブは、ビルドステップがないセットアップでのみ必要です。**\n\n DOM 内テンプレートを使用する場合、「コンパイルされていないテンプレートのフラッシュ」が発生することがあります。マウントされたコンポーネントがそれをレンダリングされたコンテンツに置き換えるまで、未加工のマスタッシュタグがユーザーに表示される場合があります。\n\n `v-cloak` は関連するコンポーネントインスタンスがマウントされるまで、その要素に残ります。`[v-cloak] { display: none }` のような CSS ルールと組み合わせることで、コンポーネントの準備が整うまで未加工のテンプレートを非表示にできます。\n\n-
|
|
745
|
+
"value": "\nコンパイルされていないテンプレートを、準備が整うまで非表示にするために使用します。\n\n- **式を受け取りません**\n\n- **詳細**\n\n **このディレクティブは、ビルドステップがないセットアップでのみ必要です。**\n\n DOM 内テンプレートを使用する場合、「コンパイルされていないテンプレートのフラッシュ」が発生することがあります。マウントされたコンポーネントがそれをレンダリングされたコンテンツに置き換えるまで、未加工のマスタッシュタグがユーザーに表示される場合があります。\n\n `v-cloak` は関連するコンポーネントインスタンスがマウントされるまで、その要素に残ります。`[v-cloak] { display: none }` のような CSS ルールと組み合わせることで、コンポーネントの準備が整うまで未加工のテンプレートを非表示にできます。\n\n- **例**\n\n ```css\n [v-cloak] {\n display: none;\n }\n ```\n\n ```html\n <div v-cloak>\n {{ message }}\n </div>\n ```\n\n この `<div>` はコンパイルが完了するまで表示されません。\n"
|
|
746
746
|
},
|
|
747
747
|
"references": [
|
|
748
748
|
{
|
|
@@ -775,7 +775,7 @@
|
|
|
775
775
|
"name": "key",
|
|
776
776
|
"description": {
|
|
777
777
|
"kind": "markdown",
|
|
778
|
-
"value": "\n特別な属性 `key` は、主に Vue の仮想 DOM アルゴリズムが新しいノードリストを古いリストに対して差分する際に、vnode を識別するためのヒントとして使用されます。\n\n- **期待する値:** `number | string | symbol`\n\n- **詳細**\n\n キーがない場合、Vue は要素の移動を最小限に抑え、同じタイプの要素をできるだけその場でパッチ/再利用しようとするアルゴリズムを使用します。キーがある場合は、キーの順序変更に基づいて要素を並べ替え、存在しなくなったキーを持つ要素は常に削除/破棄されます。\n\n 共通の同じ親を持つ子は、**ユニークなキー**を持つ必要があります。キーが重複するとレンダリングエラーになります。\n\n `v-for` と組み合わせるのが最も一般的な使用例です:\n\n ```html\n <ul>\n <li v-for=\"item in items\" :key=\"item.id\">...</li>\n </ul>\n ```\n\n また、要素/コンポーネントを再利用するのではなく、強制的に置き換えるためにも使用できます。これは、次のような場合に便利です:\n\n - コンポーネントのライフサイクルフックを適切にトリガーする\n - トランジションをトリガーする\n\n 例えば:\n\n ```html\n <transition>\n <span :key=\"text\">{{ text }}</span>\n </transition>\n ```\n\n `text` が変更されると、`<span>` はパッチされるのではなく、常に置き換えられるので、トランジションがトリガーされます。\n\n-
|
|
778
|
+
"value": "\n特別な属性 `key` は、主に Vue の仮想 DOM アルゴリズムが新しいノードリストを古いリストに対して差分する際に、vnode を識別するためのヒントとして使用されます。\n\n- **期待する値:** `number | string | symbol`\n\n- **詳細**\n\n キーがない場合、Vue は要素の移動を最小限に抑え、同じタイプの要素をできるだけその場でパッチ/再利用しようとするアルゴリズムを使用します。キーがある場合は、キーの順序変更に基づいて要素を並べ替え、存在しなくなったキーを持つ要素は常に削除/破棄されます。\n\n 共通の同じ親を持つ子は、**ユニークなキー**を持つ必要があります。キーが重複するとレンダリングエラーになります。\n\n `v-for` と組み合わせるのが最も一般的な使用例です:\n\n ```html\n <ul>\n <li v-for=\"item in items\" :key=\"item.id\">...</li>\n </ul>\n ```\n\n また、要素/コンポーネントを再利用するのではなく、強制的に置き換えるためにも使用できます。これは、次のような場合に便利です:\n\n - コンポーネントのライフサイクルフックを適切にトリガーする\n - トランジションをトリガーする\n\n 例えば:\n\n ```html\n <transition>\n <span :key=\"text\">{{ text }}</span>\n </transition>\n ```\n\n `text` が変更されると、`<span>` はパッチされるのではなく、常に置き換えられるので、トランジションがトリガーされます。\n\n- **参照** [ガイド - リストレンダリング - `key` による状態管理](https://ja.vuejs.org/guide/essentials/list.html#maintaining-state-with-key)\n"
|
|
779
779
|
},
|
|
780
780
|
"references": [
|
|
781
781
|
{
|
|
@@ -808,7 +808,7 @@
|
|
|
808
808
|
"name": "ref",
|
|
809
809
|
"description": {
|
|
810
810
|
"kind": "markdown",
|
|
811
|
-
"value": "\n[テンプレート参照](https://ja.vuejs.org/guide/essentials/template-refs.html)を表します。\n\n- **期待する値:** `string | Function`\n\n- **詳細**\n\n `ref` は、要素や子コンポーネントへの参照を登録するために使用します。\n\n Options API では、この参照はコンポーネントの `this.$refs` オブジェクトの下に登録されます:\n\n ```html\n <!-- this.$refs.p として格納される -->\n <p ref=\"p\">hello</p>\n ```\n\n Composition API では、一致する名前の ref に参照が格納されます:\n\n ```vue\n <script setup>\n import { ref } from 'vue'\n\n const p = ref()\n </script>\n\n <template>\n <p ref=\"p\">hello</p>\n </template>\n ```\n\n もしプレーンな DOM 要素で使用された場合、その要素への参照になります。もし子コンポーネントで使用された場合は、そのコンポーネントのインスタンスへの参照になります。\n\n また、`ref` には関数も受け付けるので、参照を保存する場所を完全に制御できます:\n\n ```html\n <ChildComponent :ref=\"(el) => child = el\" />\n ```\n\n ref の登録タイミングに関する重要な注意点として、ref 自体はレンダー関数の結果として作成されるので、コンポーネントがマウントされるまで待ってからアクセスする必要があります。\n\n `this.$refs` はリアクティブではないので、テンプレート内でデータバインディングのために使わないでください。\n\n-
|
|
811
|
+
"value": "\n[テンプレート参照](https://ja.vuejs.org/guide/essentials/template-refs.html)を表します。\n\n- **期待する値:** `string | Function`\n\n- **詳細**\n\n `ref` は、要素や子コンポーネントへの参照を登録するために使用します。\n\n Options API では、この参照はコンポーネントの `this.$refs` オブジェクトの下に登録されます:\n\n ```html\n <!-- this.$refs.p として格納される -->\n <p ref=\"p\">hello</p>\n ```\n\n Composition API では、一致する名前の ref に参照が格納されます:\n\n ```vue\n <script setup>\n import { ref } from 'vue'\n\n const p = ref()\n </script>\n\n <template>\n <p ref=\"p\">hello</p>\n </template>\n ```\n\n もしプレーンな DOM 要素で使用された場合、その要素への参照になります。もし子コンポーネントで使用された場合は、そのコンポーネントのインスタンスへの参照になります。\n\n また、`ref` には関数も受け付けるので、参照を保存する場所を完全に制御できます:\n\n ```html\n <ChildComponent :ref=\"(el) => child = el\" />\n ```\n\n ref の登録タイミングに関する重要な注意点として、ref 自体はレンダー関数の結果として作成されるので、コンポーネントがマウントされるまで待ってからアクセスする必要があります。\n\n `this.$refs` はリアクティブではないので、テンプレート内でデータバインディングのために使わないでください。\n\n- **参照**\n - [ガイド - テンプレート参照](https://ja.vuejs.org/guide/essentials/template-refs.html)\n - [ガイド - テンプレート参照の型付け](https://ja.vuejs.org/guide/typescript/composition-api.html#typing-template-refs) <sup class=\"vt-badge ts\" />\n - [ガイド - コンポーネントのテンプレート参照の型付け](https://ja.vuejs.org/guide/typescript/composition-api.html#typing-component-template-refs) <sup class=\"vt-badge ts\" />\n"
|
|
812
812
|
},
|
|
813
813
|
"references": [
|
|
814
814
|
{
|
|
@@ -841,7 +841,7 @@
|
|
|
841
841
|
"name": "is",
|
|
842
842
|
"description": {
|
|
843
843
|
"kind": "markdown",
|
|
844
|
-
"value": "\n[動的コンポーネント](https://ja.vuejs.org/guide/essentials/component-basics.html#dynamic-components)のバインディングに使用します。\n\n- **期待する値:** `string | Component`\n\n- **ネイティブ要素での使用** <sup class=\"vt-badge\">3.1+</sup>\n\n ネイティブの HTML 要素で `is` 属性が使われている場合、[Customized built-in element](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-customized-builtin-example) として解釈されます。これは、ネイティブの Web プラットフォームの機能です。\n\n しかし、[DOM テンプレート解析の注意点](https://ja.vuejs.org/guide/essentials/component-basics.html#dom-template-parsing-caveats)で説明したように、ネイティブ要素を Vue コンポーネントに置き換えるためには Vue が必要になる場合があります。`is` 属性の値の前に `vue:` を付けると、Vue はその要素を Vue コンポーネントとしてレンダリングします:\n\n ```html\n <table>\n <tr is=\"vue:my-row-component\"></tr>\n </table>\n ```\n\n-
|
|
844
|
+
"value": "\n[動的コンポーネント](https://ja.vuejs.org/guide/essentials/component-basics.html#dynamic-components)のバインディングに使用します。\n\n- **期待する値:** `string | Component`\n\n- **ネイティブ要素での使用** <sup class=\"vt-badge\">3.1+</sup>\n\n ネイティブの HTML 要素で `is` 属性が使われている場合、[Customized built-in element](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-customized-builtin-example) として解釈されます。これは、ネイティブの Web プラットフォームの機能です。\n\n しかし、[DOM テンプレート解析の注意点](https://ja.vuejs.org/guide/essentials/component-basics.html#dom-template-parsing-caveats)で説明したように、ネイティブ要素を Vue コンポーネントに置き換えるためには Vue が必要になる場合があります。`is` 属性の値の前に `vue:` を付けると、Vue はその要素を Vue コンポーネントとしてレンダリングします:\n\n ```html\n <table>\n <tr is=\"vue:my-row-component\"></tr>\n </table>\n ```\n\n- **参照**\n\n - [ビルトインの特別な要素 - `<component>`](https://ja.vuejs.org/api/built-in-special-elements.html#component)\n - [動的コンポーネント](https://ja.vuejs.org/guide/essentials/component-basics.html#dynamic-components)\n"
|
|
845
845
|
},
|
|
846
846
|
"references": [
|
|
847
847
|
{
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vue/language-service",
|
|
3
|
-
"version": "1.8.
|
|
3
|
+
"version": "1.8.1",
|
|
4
4
|
"main": "out/index.js",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"files": [
|
|
@@ -17,28 +17,28 @@
|
|
|
17
17
|
"update-html-data": "node ./scripts/update-html-data.js"
|
|
18
18
|
},
|
|
19
19
|
"dependencies": {
|
|
20
|
-
"@volar/language-core": "1.7.
|
|
21
|
-
"@volar/language-service": "1.7.
|
|
22
|
-
"@volar/typescript": "1.7.
|
|
20
|
+
"@volar/language-core": "1.7.8",
|
|
21
|
+
"@volar/language-service": "1.7.8",
|
|
22
|
+
"@volar/typescript": "1.7.8",
|
|
23
23
|
"@vue/compiler-dom": "^3.3.0",
|
|
24
|
-
"@vue/language-core": "1.8.
|
|
24
|
+
"@vue/language-core": "1.8.1",
|
|
25
25
|
"@vue/reactivity": "^3.3.0",
|
|
26
26
|
"@vue/shared": "^3.3.0",
|
|
27
|
-
"volar-service-css": "0.0.
|
|
28
|
-
"volar-service-emmet": "0.0.
|
|
29
|
-
"volar-service-html": "0.0.
|
|
30
|
-
"volar-service-json": "0.0.
|
|
31
|
-
"volar-service-pug": "0.0.
|
|
32
|
-
"volar-service-pug-beautify": "0.0.
|
|
33
|
-
"volar-service-typescript": "0.0.
|
|
34
|
-
"volar-service-typescript-twoslash-queries": "0.0.
|
|
27
|
+
"volar-service-css": "0.0.8",
|
|
28
|
+
"volar-service-emmet": "0.0.8",
|
|
29
|
+
"volar-service-html": "0.0.8",
|
|
30
|
+
"volar-service-json": "0.0.8",
|
|
31
|
+
"volar-service-pug": "0.0.8",
|
|
32
|
+
"volar-service-pug-beautify": "0.0.8",
|
|
33
|
+
"volar-service-typescript": "0.0.8",
|
|
34
|
+
"volar-service-typescript-twoslash-queries": "0.0.8",
|
|
35
35
|
"vscode-html-languageservice": "^5.0.4",
|
|
36
36
|
"vscode-languageserver-textdocument": "^1.0.8"
|
|
37
37
|
},
|
|
38
38
|
"devDependencies": {
|
|
39
|
-
"@volar/kit": "1.7.
|
|
39
|
+
"@volar/kit": "1.7.8",
|
|
40
40
|
"vscode-languageserver-protocol": "^3.17.3",
|
|
41
41
|
"vscode-uri": "^3.0.7"
|
|
42
42
|
},
|
|
43
|
-
"gitHead": "
|
|
43
|
+
"gitHead": "3e31c6eb412a9e8145188190472f59c8b43aa9e6"
|
|
44
44
|
}
|