@vue/language-service 2.1.10 → 2.2.2

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.
Files changed (53) hide show
  1. package/data/language-blocks/cs.json +29 -930
  2. package/data/language-blocks/en.json +28 -929
  3. package/data/language-blocks/fr.json +28 -929
  4. package/data/language-blocks/it.json +28 -929
  5. package/data/language-blocks/ja.json +28 -929
  6. package/data/language-blocks/ko.json +28 -929
  7. package/data/language-blocks/pt.json +28 -929
  8. package/data/language-blocks/ru.json +28 -929
  9. package/data/language-blocks/zh-cn.json +30 -931
  10. package/data/language-blocks/zh-hk.json +28 -929
  11. package/data/locale.json +54 -0
  12. package/data/model-modifiers/cs.json +6 -165
  13. package/data/model-modifiers/en.json +6 -165
  14. package/data/model-modifiers/fr.json +6 -165
  15. package/data/model-modifiers/it.json +6 -165
  16. package/data/model-modifiers/ja.json +6 -165
  17. package/data/model-modifiers/ko.json +6 -165
  18. package/data/model-modifiers/pt.json +6 -165
  19. package/data/model-modifiers/ru.json +6 -165
  20. package/data/model-modifiers/zh-cn.json +6 -165
  21. package/data/model-modifiers/zh-hk.json +6 -165
  22. package/data/template/cs.json +59 -1429
  23. package/data/template/en.json +52 -1422
  24. package/data/template/fr.json +55 -1425
  25. package/data/template/it.json +49 -1427
  26. package/data/template/ja.json +53 -1423
  27. package/data/template/ko.json +44 -1422
  28. package/data/template/pt.json +44 -1422
  29. package/data/template/ru.json +52 -1422
  30. package/data/template/zh-cn.json +53 -1423
  31. package/data/template/zh-hk.json +44 -1422
  32. package/index.d.ts +2 -2
  33. package/index.js +14 -10
  34. package/lib/ideFeatures/nameCasing.js +15 -17
  35. package/lib/plugins/data.js +47 -20
  36. package/lib/plugins/utils.d.ts +3 -0
  37. package/lib/plugins/utils.js +14 -0
  38. package/lib/plugins/vue-autoinsert-dotvalue.d.ts +0 -9
  39. package/lib/plugins/vue-autoinsert-dotvalue.js +37 -53
  40. package/lib/plugins/vue-autoinsert-space.js +1 -1
  41. package/lib/plugins/vue-complete-define-assignment.js +14 -16
  42. package/lib/plugins/vue-directive-comments.js +10 -8
  43. package/lib/plugins/vue-document-drop.js +16 -13
  44. package/lib/plugins/vue-document-links.js +45 -39
  45. package/lib/plugins/vue-extract-file.d.ts +2 -1
  46. package/lib/plugins/vue-extract-file.js +29 -15
  47. package/lib/plugins/vue-inlayhints.d.ts +2 -2
  48. package/lib/plugins/vue-inlayhints.js +65 -56
  49. package/lib/plugins/vue-sfc.js +29 -27
  50. package/lib/plugins/vue-template.js +223 -201
  51. package/lib/plugins/vue-twoslash-queries.js +9 -4
  52. package/package.json +12 -11
  53. package/scripts/update-html-data.js +74 -70
@@ -8,60 +8,7 @@
8
8
  "value": "\n**単一の**要素またはコンポーネントにアニメーションのトランジション効果を提供します。\n\n- **props**\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 * トランジションクラスをカスタマイズするための props。\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
- "references": [
12
- {
13
- "name": "en",
14
- "url": "https://vuejs.org/api/built-in-components.html#transition"
15
- },
16
- {
17
- "name": "zh-cn",
18
- "url": "https://cn.vuejs.org/api/built-in-components.html#transition"
19
- },
20
- {
21
- "name": "zh-hk",
22
- "url": "https://zh-hk.vuejs.org/api/built-in-components.html#transition"
23
- },
24
- {
25
- "name": "ja",
26
- "url": "https://ja.vuejs.org/api/built-in-components.html#transition"
27
- },
28
- {
29
- "name": "ua",
30
- "url": "https://ua.vuejs.org/api/built-in-components.html#transition"
31
- },
32
- {
33
- "name": "fr",
34
- "url": "https://fr.vuejs.org/api/built-in-components.html#transition"
35
- },
36
- {
37
- "name": "ko",
38
- "url": "https://ko.vuejs.org/api/built-in-components.html#transition"
39
- },
40
- {
41
- "name": "pt",
42
- "url": "https://pt.vuejs.org/api/built-in-components.html#transition"
43
- },
44
- {
45
- "name": "bn",
46
- "url": "https://bn.vuejs.org/api/built-in-components.html#transition"
47
- },
48
- {
49
- "name": "it",
50
- "url": "https://it.vuejs.org/api/built-in-components.html#transition"
51
- },
52
- {
53
- "name": "cs",
54
- "url": "https://cs.vuejs.org/api/built-in-components.html#transition"
55
- },
56
- {
57
- "name": "ru",
58
- "url": "https://ru.vuejs.org/api/built-in-components.html#transition"
59
- },
60
- {
61
- "name": "fa",
62
- "url": "https://fa.vuejs.org/api/built-in-components.html#transition"
63
- }
64
- ]
11
+ "references": "api/built-in-components.html#transition"
65
12
  },
66
13
  {
67
14
  "name": "TransitionGroup",
@@ -70,60 +17,7 @@
70
17
  "value": "\nリスト内の**複数**の要素またはコンポーネントにトランジション効果を提供します。\n\n- **props**\n\n `<TransitionGroup>` は `<Transition>` と同じ props(`mode` 以外)と追加の 2 つの props を受け取ります:\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` props によって定義できます。\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` props で設定)が適用されます。移動用のクラスが適用されたときに、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"
71
18
  },
72
19
  "attributes": [],
73
- "references": [
74
- {
75
- "name": "en",
76
- "url": "https://vuejs.org/api/built-in-components.html#transitiongroup"
77
- },
78
- {
79
- "name": "zh-cn",
80
- "url": "https://cn.vuejs.org/api/built-in-components.html#transitiongroup"
81
- },
82
- {
83
- "name": "zh-hk",
84
- "url": "https://zh-hk.vuejs.org/api/built-in-components.html#transitiongroup"
85
- },
86
- {
87
- "name": "ja",
88
- "url": "https://ja.vuejs.org/api/built-in-components.html#transitiongroup"
89
- },
90
- {
91
- "name": "ua",
92
- "url": "https://ua.vuejs.org/api/built-in-components.html#transitiongroup"
93
- },
94
- {
95
- "name": "fr",
96
- "url": "https://fr.vuejs.org/api/built-in-components.html#transitiongroup"
97
- },
98
- {
99
- "name": "ko",
100
- "url": "https://ko.vuejs.org/api/built-in-components.html#transitiongroup"
101
- },
102
- {
103
- "name": "pt",
104
- "url": "https://pt.vuejs.org/api/built-in-components.html#transitiongroup"
105
- },
106
- {
107
- "name": "bn",
108
- "url": "https://bn.vuejs.org/api/built-in-components.html#transitiongroup"
109
- },
110
- {
111
- "name": "it",
112
- "url": "https://it.vuejs.org/api/built-in-components.html#transitiongroup"
113
- },
114
- {
115
- "name": "cs",
116
- "url": "https://cs.vuejs.org/api/built-in-components.html#transitiongroup"
117
- },
118
- {
119
- "name": "ru",
120
- "url": "https://ru.vuejs.org/api/built-in-components.html#transitiongroup"
121
- },
122
- {
123
- "name": "fa",
124
- "url": "https://fa.vuejs.org/api/built-in-components.html#transitiongroup"
125
- }
126
- ]
20
+ "references": "api/built-in-components.html#transitiongroup"
127
21
  },
128
22
  {
129
23
  "name": "KeepAlive",
@@ -132,122 +26,16 @@
132
26
  "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 動的コンポーネントをラップすると、`<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"
133
27
  },
134
28
  "attributes": [],
135
- "references": [
136
- {
137
- "name": "en",
138
- "url": "https://vuejs.org/api/built-in-components.html#keepalive"
139
- },
140
- {
141
- "name": "zh-cn",
142
- "url": "https://cn.vuejs.org/api/built-in-components.html#keepalive"
143
- },
144
- {
145
- "name": "zh-hk",
146
- "url": "https://zh-hk.vuejs.org/api/built-in-components.html#keepalive"
147
- },
148
- {
149
- "name": "ja",
150
- "url": "https://ja.vuejs.org/api/built-in-components.html#keepalive"
151
- },
152
- {
153
- "name": "ua",
154
- "url": "https://ua.vuejs.org/api/built-in-components.html#keepalive"
155
- },
156
- {
157
- "name": "fr",
158
- "url": "https://fr.vuejs.org/api/built-in-components.html#keepalive"
159
- },
160
- {
161
- "name": "ko",
162
- "url": "https://ko.vuejs.org/api/built-in-components.html#keepalive"
163
- },
164
- {
165
- "name": "pt",
166
- "url": "https://pt.vuejs.org/api/built-in-components.html#keepalive"
167
- },
168
- {
169
- "name": "bn",
170
- "url": "https://bn.vuejs.org/api/built-in-components.html#keepalive"
171
- },
172
- {
173
- "name": "it",
174
- "url": "https://it.vuejs.org/api/built-in-components.html#keepalive"
175
- },
176
- {
177
- "name": "cs",
178
- "url": "https://cs.vuejs.org/api/built-in-components.html#keepalive"
179
- },
180
- {
181
- "name": "ru",
182
- "url": "https://ru.vuejs.org/api/built-in-components.html#keepalive"
183
- },
184
- {
185
- "name": "fa",
186
- "url": "https://fa.vuejs.org/api/built-in-components.html#keepalive"
187
- }
188
- ]
29
+ "references": "api/built-in-components.html#keepalive"
189
30
  },
190
31
  {
191
32
  "name": "Teleport",
192
33
  "description": {
193
34
  "kind": "markdown",
194
- "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 <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"
35
+ "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 * `true` の場合、Teleport は\n * ターゲットを解決する前にアプリケーションの他の部分が\n * マウントされるまで遅延します。(3.5+)\n */\n defer?: 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 ターゲットの解決を遅延する <sup class=\"vt-badge\" data-text=\"3.5+\" />:\n\n ```html\n <Teleport defer to=\"#late-div\">...</Teleport>\n\n <!-- テンプレートの後の方 -->\n <div id=\"late-div\"></div>\n ```\n\n- **参照** [ガイド - Teleport](https://ja.vuejs.org/guide/built-ins/teleport.html)\n"
195
36
  },
196
37
  "attributes": [],
197
- "references": [
198
- {
199
- "name": "en",
200
- "url": "https://vuejs.org/api/built-in-components.html#teleport"
201
- },
202
- {
203
- "name": "zh-cn",
204
- "url": "https://cn.vuejs.org/api/built-in-components.html#teleport"
205
- },
206
- {
207
- "name": "zh-hk",
208
- "url": "https://zh-hk.vuejs.org/api/built-in-components.html#teleport"
209
- },
210
- {
211
- "name": "ja",
212
- "url": "https://ja.vuejs.org/api/built-in-components.html#teleport"
213
- },
214
- {
215
- "name": "ua",
216
- "url": "https://ua.vuejs.org/api/built-in-components.html#teleport"
217
- },
218
- {
219
- "name": "fr",
220
- "url": "https://fr.vuejs.org/api/built-in-components.html#teleport"
221
- },
222
- {
223
- "name": "ko",
224
- "url": "https://ko.vuejs.org/api/built-in-components.html#teleport"
225
- },
226
- {
227
- "name": "pt",
228
- "url": "https://pt.vuejs.org/api/built-in-components.html#teleport"
229
- },
230
- {
231
- "name": "bn",
232
- "url": "https://bn.vuejs.org/api/built-in-components.html#teleport"
233
- },
234
- {
235
- "name": "it",
236
- "url": "https://it.vuejs.org/api/built-in-components.html#teleport"
237
- },
238
- {
239
- "name": "cs",
240
- "url": "https://cs.vuejs.org/api/built-in-components.html#teleport"
241
- },
242
- {
243
- "name": "ru",
244
- "url": "https://ru.vuejs.org/api/built-in-components.html#teleport"
245
- },
246
- {
247
- "name": "fa",
248
- "url": "https://fa.vuejs.org/api/built-in-components.html#teleport"
249
- }
250
- ]
38
+ "references": "api/built-in-components.html#teleport"
251
39
  },
252
40
  {
253
41
  "name": "Suspense",
@@ -256,60 +44,7 @@
256
44
  "value": "\nコンポーネントツリー内のネストした非同期な依存関係を管理するために使用します。\n\n- **props**\n\n ```ts\n interface SuspenseProps {\n timeout?: string | number\n suspensible?: boolean\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 を `suspensible` に設定することで、すべての非同期依存処理は親の Suspense によって処理されます。[実装の詳細](https://github.com/vuejs/core/pull/6736) を参照してください。\n\n- **参照** [ガイド - Suspense](https://ja.vuejs.org/guide/built-ins/suspense.html)\n"
257
45
  },
258
46
  "attributes": [],
259
- "references": [
260
- {
261
- "name": "en",
262
- "url": "https://vuejs.org/api/built-in-components.html#suspense"
263
- },
264
- {
265
- "name": "zh-cn",
266
- "url": "https://cn.vuejs.org/api/built-in-components.html#suspense"
267
- },
268
- {
269
- "name": "zh-hk",
270
- "url": "https://zh-hk.vuejs.org/api/built-in-components.html#suspense"
271
- },
272
- {
273
- "name": "ja",
274
- "url": "https://ja.vuejs.org/api/built-in-components.html#suspense"
275
- },
276
- {
277
- "name": "ua",
278
- "url": "https://ua.vuejs.org/api/built-in-components.html#suspense"
279
- },
280
- {
281
- "name": "fr",
282
- "url": "https://fr.vuejs.org/api/built-in-components.html#suspense"
283
- },
284
- {
285
- "name": "ko",
286
- "url": "https://ko.vuejs.org/api/built-in-components.html#suspense"
287
- },
288
- {
289
- "name": "pt",
290
- "url": "https://pt.vuejs.org/api/built-in-components.html#suspense"
291
- },
292
- {
293
- "name": "bn",
294
- "url": "https://bn.vuejs.org/api/built-in-components.html#suspense"
295
- },
296
- {
297
- "name": "it",
298
- "url": "https://it.vuejs.org/api/built-in-components.html#suspense"
299
- },
300
- {
301
- "name": "cs",
302
- "url": "https://cs.vuejs.org/api/built-in-components.html#suspense"
303
- },
304
- {
305
- "name": "ru",
306
- "url": "https://ru.vuejs.org/api/built-in-components.html#suspense"
307
- },
308
- {
309
- "name": "fa",
310
- "url": "https://fa.vuejs.org/api/built-in-components.html#suspense"
311
- }
312
- ]
47
+ "references": "api/built-in-components.html#suspense"
313
48
  },
314
49
  {
315
50
  "name": "component",
@@ -318,60 +53,7 @@
318
53
  "value": "\n動的コンポーネントや動的な要素をレンダリングするための「メタ・コンポーネント」です。\n\n- **props**\n\n ```ts\n interface DynamicComponentProps {\n is: string | Component\n }\n ```\n\n- **詳細**\n\n 実際にレンダリングするコンポーネントは `is` props によって決定されます。\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` props と `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"
319
54
  },
320
55
  "attributes": [],
321
- "references": [
322
- {
323
- "name": "en",
324
- "url": "https://vuejs.org/api/built-in-special-elements.html#component"
325
- },
326
- {
327
- "name": "zh-cn",
328
- "url": "https://cn.vuejs.org/api/built-in-special-elements.html#component"
329
- },
330
- {
331
- "name": "zh-hk",
332
- "url": "https://zh-hk.vuejs.org/api/built-in-special-elements.html#component"
333
- },
334
- {
335
- "name": "ja",
336
- "url": "https://ja.vuejs.org/api/built-in-special-elements.html#component"
337
- },
338
- {
339
- "name": "ua",
340
- "url": "https://ua.vuejs.org/api/built-in-special-elements.html#component"
341
- },
342
- {
343
- "name": "fr",
344
- "url": "https://fr.vuejs.org/api/built-in-special-elements.html#component"
345
- },
346
- {
347
- "name": "ko",
348
- "url": "https://ko.vuejs.org/api/built-in-special-elements.html#component"
349
- },
350
- {
351
- "name": "pt",
352
- "url": "https://pt.vuejs.org/api/built-in-special-elements.html#component"
353
- },
354
- {
355
- "name": "bn",
356
- "url": "https://bn.vuejs.org/api/built-in-special-elements.html#component"
357
- },
358
- {
359
- "name": "it",
360
- "url": "https://it.vuejs.org/api/built-in-special-elements.html#component"
361
- },
362
- {
363
- "name": "cs",
364
- "url": "https://cs.vuejs.org/api/built-in-special-elements.html#component"
365
- },
366
- {
367
- "name": "ru",
368
- "url": "https://ru.vuejs.org/api/built-in-special-elements.html#component"
369
- },
370
- {
371
- "name": "fa",
372
- "url": "https://fa.vuejs.org/api/built-in-special-elements.html#component"
373
- }
374
- ]
56
+ "references": "api/built-in-special-elements.html#component"
375
57
  },
376
58
  {
377
59
  "name": "slot",
@@ -380,60 +62,7 @@
380
62
  "value": "\nテンプレート内でスロットコンテンツのアウトレットを表します。\n\n- **props**\n\n ```ts\n interface SlotProps {\n /**\n * <slot> に渡されたすべての props は、スコープ付き\n * スロットの引数として渡されます\n */\n [key: string]: any\n /**\n * スロット名を指定するために予約済み。\n */\n name?: string\n }\n ```\n\n- **詳細**\n\n `<slot>` 要素では `name` 属性を使用してスロット名を指定できます。`name` が指定されない場合は、デフォルトのスロットがレンダリングされます。slot 要素に渡された追加の属性は、親で定義されたスコープ付きスロットにスロット props として渡されます。\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"
381
63
  },
382
64
  "attributes": [],
383
- "references": [
384
- {
385
- "name": "en",
386
- "url": "https://vuejs.org/api/built-in-special-elements.html#slot"
387
- },
388
- {
389
- "name": "zh-cn",
390
- "url": "https://cn.vuejs.org/api/built-in-special-elements.html#slot"
391
- },
392
- {
393
- "name": "zh-hk",
394
- "url": "https://zh-hk.vuejs.org/api/built-in-special-elements.html#slot"
395
- },
396
- {
397
- "name": "ja",
398
- "url": "https://ja.vuejs.org/api/built-in-special-elements.html#slot"
399
- },
400
- {
401
- "name": "ua",
402
- "url": "https://ua.vuejs.org/api/built-in-special-elements.html#slot"
403
- },
404
- {
405
- "name": "fr",
406
- "url": "https://fr.vuejs.org/api/built-in-special-elements.html#slot"
407
- },
408
- {
409
- "name": "ko",
410
- "url": "https://ko.vuejs.org/api/built-in-special-elements.html#slot"
411
- },
412
- {
413
- "name": "pt",
414
- "url": "https://pt.vuejs.org/api/built-in-special-elements.html#slot"
415
- },
416
- {
417
- "name": "bn",
418
- "url": "https://bn.vuejs.org/api/built-in-special-elements.html#slot"
419
- },
420
- {
421
- "name": "it",
422
- "url": "https://it.vuejs.org/api/built-in-special-elements.html#slot"
423
- },
424
- {
425
- "name": "cs",
426
- "url": "https://cs.vuejs.org/api/built-in-special-elements.html#slot"
427
- },
428
- {
429
- "name": "ru",
430
- "url": "https://ru.vuejs.org/api/built-in-special-elements.html#slot"
431
- },
432
- {
433
- "name": "fa",
434
- "url": "https://fa.vuejs.org/api/built-in-special-elements.html#slot"
435
- }
436
- ]
65
+ "references": "api/built-in-special-elements.html#slot"
437
66
  },
438
67
  {
439
68
  "name": "template",
@@ -442,60 +71,7 @@
442
71
  "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"
443
72
  },
444
73
  "attributes": [],
445
- "references": [
446
- {
447
- "name": "en",
448
- "url": "https://vuejs.org/api/built-in-special-elements.html#template"
449
- },
450
- {
451
- "name": "zh-cn",
452
- "url": "https://cn.vuejs.org/api/built-in-special-elements.html#template"
453
- },
454
- {
455
- "name": "zh-hk",
456
- "url": "https://zh-hk.vuejs.org/api/built-in-special-elements.html#template"
457
- },
458
- {
459
- "name": "ja",
460
- "url": "https://ja.vuejs.org/api/built-in-special-elements.html#template"
461
- },
462
- {
463
- "name": "ua",
464
- "url": "https://ua.vuejs.org/api/built-in-special-elements.html#template"
465
- },
466
- {
467
- "name": "fr",
468
- "url": "https://fr.vuejs.org/api/built-in-special-elements.html#template"
469
- },
470
- {
471
- "name": "ko",
472
- "url": "https://ko.vuejs.org/api/built-in-special-elements.html#template"
473
- },
474
- {
475
- "name": "pt",
476
- "url": "https://pt.vuejs.org/api/built-in-special-elements.html#template"
477
- },
478
- {
479
- "name": "bn",
480
- "url": "https://bn.vuejs.org/api/built-in-special-elements.html#template"
481
- },
482
- {
483
- "name": "it",
484
- "url": "https://it.vuejs.org/api/built-in-special-elements.html#template"
485
- },
486
- {
487
- "name": "cs",
488
- "url": "https://cs.vuejs.org/api/built-in-special-elements.html#template"
489
- },
490
- {
491
- "name": "ru",
492
- "url": "https://ru.vuejs.org/api/built-in-special-elements.html#template"
493
- },
494
- {
495
- "name": "fa",
496
- "url": "https://fa.vuejs.org/api/built-in-special-elements.html#template"
497
- }
498
- ]
74
+ "references": "api/built-in-special-elements.html#template"
499
75
  }
500
76
  ],
501
77
  "globalAttributes": [
@@ -503,1103 +79,157 @@
503
79
  "name": "v-text",
504
80
  "description": {
505
81
  "kind": "markdown",
506
- "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"
82
+ "value": "要素のテキスト内容を更新します。\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)"
507
83
  },
508
- "references": [
509
- {
510
- "name": "en",
511
- "url": "https://vuejs.org/api/built-in-directives.html#v-text"
512
- },
513
- {
514
- "name": "zh-cn",
515
- "url": "https://cn.vuejs.org/api/built-in-directives.html#v-text"
516
- },
517
- {
518
- "name": "zh-hk",
519
- "url": "https://zh-hk.vuejs.org/api/built-in-directives.html#v-text"
520
- },
521
- {
522
- "name": "ja",
523
- "url": "https://ja.vuejs.org/api/built-in-directives.html#v-text"
524
- },
525
- {
526
- "name": "ua",
527
- "url": "https://ua.vuejs.org/api/built-in-directives.html#v-text"
528
- },
529
- {
530
- "name": "fr",
531
- "url": "https://fr.vuejs.org/api/built-in-directives.html#v-text"
532
- },
533
- {
534
- "name": "ko",
535
- "url": "https://ko.vuejs.org/api/built-in-directives.html#v-text"
536
- },
537
- {
538
- "name": "pt",
539
- "url": "https://pt.vuejs.org/api/built-in-directives.html#v-text"
540
- },
541
- {
542
- "name": "bn",
543
- "url": "https://bn.vuejs.org/api/built-in-directives.html#v-text"
544
- },
545
- {
546
- "name": "it",
547
- "url": "https://it.vuejs.org/api/built-in-directives.html#v-text"
548
- },
549
- {
550
- "name": "cs",
551
- "url": "https://cs.vuejs.org/api/built-in-directives.html#v-text"
552
- },
553
- {
554
- "name": "ru",
555
- "url": "https://ru.vuejs.org/api/built-in-directives.html#v-text"
556
- },
557
- {
558
- "name": "fa",
559
- "url": "https://fa.vuejs.org/api/built-in-directives.html#v-text"
560
- }
561
- ]
84
+ "references": "api/built-in-directives.html#v-text"
562
85
  },
563
86
  {
564
87
  "name": "v-html",
565
88
  "description": {
566
89
  "kind": "markdown",
567
- "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"
90
+ "value": "要素の [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)"
568
91
  },
569
- "references": [
570
- {
571
- "name": "en",
572
- "url": "https://vuejs.org/api/built-in-directives.html#v-html"
573
- },
574
- {
575
- "name": "zh-cn",
576
- "url": "https://cn.vuejs.org/api/built-in-directives.html#v-html"
577
- },
578
- {
579
- "name": "zh-hk",
580
- "url": "https://zh-hk.vuejs.org/api/built-in-directives.html#v-html"
581
- },
582
- {
583
- "name": "ja",
584
- "url": "https://ja.vuejs.org/api/built-in-directives.html#v-html"
585
- },
586
- {
587
- "name": "ua",
588
- "url": "https://ua.vuejs.org/api/built-in-directives.html#v-html"
589
- },
590
- {
591
- "name": "fr",
592
- "url": "https://fr.vuejs.org/api/built-in-directives.html#v-html"
593
- },
594
- {
595
- "name": "ko",
596
- "url": "https://ko.vuejs.org/api/built-in-directives.html#v-html"
597
- },
598
- {
599
- "name": "pt",
600
- "url": "https://pt.vuejs.org/api/built-in-directives.html#v-html"
601
- },
602
- {
603
- "name": "bn",
604
- "url": "https://bn.vuejs.org/api/built-in-directives.html#v-html"
605
- },
606
- {
607
- "name": "it",
608
- "url": "https://it.vuejs.org/api/built-in-directives.html#v-html"
609
- },
610
- {
611
- "name": "cs",
612
- "url": "https://cs.vuejs.org/api/built-in-directives.html#v-html"
613
- },
614
- {
615
- "name": "ru",
616
- "url": "https://ru.vuejs.org/api/built-in-directives.html#v-html"
617
- },
618
- {
619
- "name": "fa",
620
- "url": "https://fa.vuejs.org/api/built-in-directives.html#v-html"
621
- }
622
- ]
92
+ "references": "api/built-in-directives.html#v-html"
623
93
  },
624
94
  {
625
95
  "name": "v-show",
626
96
  "description": {
627
97
  "kind": "markdown",
628
- "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"
98
+ "value": "式の値の真偽に基づいて、要素の可視性を切り替えます。\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)"
629
99
  },
630
- "references": [
631
- {
632
- "name": "en",
633
- "url": "https://vuejs.org/api/built-in-directives.html#v-show"
634
- },
635
- {
636
- "name": "zh-cn",
637
- "url": "https://cn.vuejs.org/api/built-in-directives.html#v-show"
638
- },
639
- {
640
- "name": "zh-hk",
641
- "url": "https://zh-hk.vuejs.org/api/built-in-directives.html#v-show"
642
- },
643
- {
644
- "name": "ja",
645
- "url": "https://ja.vuejs.org/api/built-in-directives.html#v-show"
646
- },
647
- {
648
- "name": "ua",
649
- "url": "https://ua.vuejs.org/api/built-in-directives.html#v-show"
650
- },
651
- {
652
- "name": "fr",
653
- "url": "https://fr.vuejs.org/api/built-in-directives.html#v-show"
654
- },
655
- {
656
- "name": "ko",
657
- "url": "https://ko.vuejs.org/api/built-in-directives.html#v-show"
658
- },
659
- {
660
- "name": "pt",
661
- "url": "https://pt.vuejs.org/api/built-in-directives.html#v-show"
662
- },
663
- {
664
- "name": "bn",
665
- "url": "https://bn.vuejs.org/api/built-in-directives.html#v-show"
666
- },
667
- {
668
- "name": "it",
669
- "url": "https://it.vuejs.org/api/built-in-directives.html#v-show"
670
- },
671
- {
672
- "name": "cs",
673
- "url": "https://cs.vuejs.org/api/built-in-directives.html#v-show"
674
- },
675
- {
676
- "name": "ru",
677
- "url": "https://ru.vuejs.org/api/built-in-directives.html#v-show"
678
- },
679
- {
680
- "name": "fa",
681
- "url": "https://fa.vuejs.org/api/built-in-directives.html#v-show"
682
- }
683
- ]
100
+ "references": "api/built-in-directives.html#v-show"
684
101
  },
685
102
  {
686
103
  "name": "v-if",
687
104
  "description": {
688
105
  "kind": "markdown",
689
- "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"
106
+ "value": "式の値の真偽に基づいて、要素またはテンプレートフラグメントを条件付きでレンダリングします。\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)"
690
107
  },
691
- "references": [
692
- {
693
- "name": "en",
694
- "url": "https://vuejs.org/api/built-in-directives.html#v-if"
695
- },
696
- {
697
- "name": "zh-cn",
698
- "url": "https://cn.vuejs.org/api/built-in-directives.html#v-if"
699
- },
700
- {
701
- "name": "zh-hk",
702
- "url": "https://zh-hk.vuejs.org/api/built-in-directives.html#v-if"
703
- },
704
- {
705
- "name": "ja",
706
- "url": "https://ja.vuejs.org/api/built-in-directives.html#v-if"
707
- },
708
- {
709
- "name": "ua",
710
- "url": "https://ua.vuejs.org/api/built-in-directives.html#v-if"
711
- },
712
- {
713
- "name": "fr",
714
- "url": "https://fr.vuejs.org/api/built-in-directives.html#v-if"
715
- },
716
- {
717
- "name": "ko",
718
- "url": "https://ko.vuejs.org/api/built-in-directives.html#v-if"
719
- },
720
- {
721
- "name": "pt",
722
- "url": "https://pt.vuejs.org/api/built-in-directives.html#v-if"
723
- },
724
- {
725
- "name": "bn",
726
- "url": "https://bn.vuejs.org/api/built-in-directives.html#v-if"
727
- },
728
- {
729
- "name": "it",
730
- "url": "https://it.vuejs.org/api/built-in-directives.html#v-if"
731
- },
732
- {
733
- "name": "cs",
734
- "url": "https://cs.vuejs.org/api/built-in-directives.html#v-if"
735
- },
736
- {
737
- "name": "ru",
738
- "url": "https://ru.vuejs.org/api/built-in-directives.html#v-if"
739
- },
740
- {
741
- "name": "fa",
742
- "url": "https://fa.vuejs.org/api/built-in-directives.html#v-if"
743
- }
744
- ]
108
+ "references": "api/built-in-directives.html#v-if"
745
109
  },
746
110
  {
747
111
  "name": "v-else",
748
112
  "valueSet": "v",
749
113
  "description": {
750
114
  "kind": "markdown",
751
- "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"
115
+ "value": "`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)"
752
116
  },
753
- "references": [
754
- {
755
- "name": "en",
756
- "url": "https://vuejs.org/api/built-in-directives.html#v-else"
757
- },
758
- {
759
- "name": "zh-cn",
760
- "url": "https://cn.vuejs.org/api/built-in-directives.html#v-else"
761
- },
762
- {
763
- "name": "zh-hk",
764
- "url": "https://zh-hk.vuejs.org/api/built-in-directives.html#v-else"
765
- },
766
- {
767
- "name": "ja",
768
- "url": "https://ja.vuejs.org/api/built-in-directives.html#v-else"
769
- },
770
- {
771
- "name": "ua",
772
- "url": "https://ua.vuejs.org/api/built-in-directives.html#v-else"
773
- },
774
- {
775
- "name": "fr",
776
- "url": "https://fr.vuejs.org/api/built-in-directives.html#v-else"
777
- },
778
- {
779
- "name": "ko",
780
- "url": "https://ko.vuejs.org/api/built-in-directives.html#v-else"
781
- },
782
- {
783
- "name": "pt",
784
- "url": "https://pt.vuejs.org/api/built-in-directives.html#v-else"
785
- },
786
- {
787
- "name": "bn",
788
- "url": "https://bn.vuejs.org/api/built-in-directives.html#v-else"
789
- },
790
- {
791
- "name": "it",
792
- "url": "https://it.vuejs.org/api/built-in-directives.html#v-else"
793
- },
794
- {
795
- "name": "cs",
796
- "url": "https://cs.vuejs.org/api/built-in-directives.html#v-else"
797
- },
798
- {
799
- "name": "ru",
800
- "url": "https://ru.vuejs.org/api/built-in-directives.html#v-else"
801
- },
802
- {
803
- "name": "fa",
804
- "url": "https://fa.vuejs.org/api/built-in-directives.html#v-else"
805
- }
806
- ]
117
+ "references": "api/built-in-directives.html#v-else"
807
118
  },
808
119
  {
809
120
  "name": "v-else-if",
810
121
  "description": {
811
122
  "kind": "markdown",
812
- "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"
123
+ "value": "`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)"
813
124
  },
814
- "references": [
815
- {
816
- "name": "en",
817
- "url": "https://vuejs.org/api/built-in-directives.html#v-else-if"
818
- },
819
- {
820
- "name": "zh-cn",
821
- "url": "https://cn.vuejs.org/api/built-in-directives.html#v-else-if"
822
- },
823
- {
824
- "name": "zh-hk",
825
- "url": "https://zh-hk.vuejs.org/api/built-in-directives.html#v-else-if"
826
- },
827
- {
828
- "name": "ja",
829
- "url": "https://ja.vuejs.org/api/built-in-directives.html#v-else-if"
830
- },
831
- {
832
- "name": "ua",
833
- "url": "https://ua.vuejs.org/api/built-in-directives.html#v-else-if"
834
- },
835
- {
836
- "name": "fr",
837
- "url": "https://fr.vuejs.org/api/built-in-directives.html#v-else-if"
838
- },
839
- {
840
- "name": "ko",
841
- "url": "https://ko.vuejs.org/api/built-in-directives.html#v-else-if"
842
- },
843
- {
844
- "name": "pt",
845
- "url": "https://pt.vuejs.org/api/built-in-directives.html#v-else-if"
846
- },
847
- {
848
- "name": "bn",
849
- "url": "https://bn.vuejs.org/api/built-in-directives.html#v-else-if"
850
- },
851
- {
852
- "name": "it",
853
- "url": "https://it.vuejs.org/api/built-in-directives.html#v-else-if"
854
- },
855
- {
856
- "name": "cs",
857
- "url": "https://cs.vuejs.org/api/built-in-directives.html#v-else-if"
858
- },
859
- {
860
- "name": "ru",
861
- "url": "https://ru.vuejs.org/api/built-in-directives.html#v-else-if"
862
- },
863
- {
864
- "name": "fa",
865
- "url": "https://fa.vuejs.org/api/built-in-directives.html#v-else-if"
866
- }
867
- ]
125
+ "references": "api/built-in-directives.html#v-else-if"
868
126
  },
869
127
  {
870
128
  "name": "v-for",
871
129
  "description": {
872
130
  "kind": "markdown",
873
- "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"
131
+ "value": "元となるデータに基づいて、要素またはテンプレートブロックを複数回レンダリングします。\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)"
874
132
  },
875
- "references": [
876
- {
877
- "name": "en",
878
- "url": "https://vuejs.org/api/built-in-directives.html#v-for"
879
- },
880
- {
881
- "name": "zh-cn",
882
- "url": "https://cn.vuejs.org/api/built-in-directives.html#v-for"
883
- },
884
- {
885
- "name": "zh-hk",
886
- "url": "https://zh-hk.vuejs.org/api/built-in-directives.html#v-for"
887
- },
888
- {
889
- "name": "ja",
890
- "url": "https://ja.vuejs.org/api/built-in-directives.html#v-for"
891
- },
892
- {
893
- "name": "ua",
894
- "url": "https://ua.vuejs.org/api/built-in-directives.html#v-for"
895
- },
896
- {
897
- "name": "fr",
898
- "url": "https://fr.vuejs.org/api/built-in-directives.html#v-for"
899
- },
900
- {
901
- "name": "ko",
902
- "url": "https://ko.vuejs.org/api/built-in-directives.html#v-for"
903
- },
904
- {
905
- "name": "pt",
906
- "url": "https://pt.vuejs.org/api/built-in-directives.html#v-for"
907
- },
908
- {
909
- "name": "bn",
910
- "url": "https://bn.vuejs.org/api/built-in-directives.html#v-for"
911
- },
912
- {
913
- "name": "it",
914
- "url": "https://it.vuejs.org/api/built-in-directives.html#v-for"
915
- },
916
- {
917
- "name": "cs",
918
- "url": "https://cs.vuejs.org/api/built-in-directives.html#v-for"
919
- },
920
- {
921
- "name": "ru",
922
- "url": "https://ru.vuejs.org/api/built-in-directives.html#v-for"
923
- },
924
- {
925
- "name": "fa",
926
- "url": "https://fa.vuejs.org/api/built-in-directives.html#v-for"
927
- }
928
- ]
133
+ "references": "api/built-in-directives.html#v-for"
929
134
  },
930
135
  {
931
136
  "name": "v-on",
932
137
  "description": {
933
138
  "kind": "markdown",
934
- "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"
139
+ "value": "要素にイベントリスナーを追加します。\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)"
935
140
  },
936
- "references": [
937
- {
938
- "name": "en",
939
- "url": "https://vuejs.org/api/built-in-directives.html#v-on"
940
- },
941
- {
942
- "name": "zh-cn",
943
- "url": "https://cn.vuejs.org/api/built-in-directives.html#v-on"
944
- },
945
- {
946
- "name": "zh-hk",
947
- "url": "https://zh-hk.vuejs.org/api/built-in-directives.html#v-on"
948
- },
949
- {
950
- "name": "ja",
951
- "url": "https://ja.vuejs.org/api/built-in-directives.html#v-on"
952
- },
953
- {
954
- "name": "ua",
955
- "url": "https://ua.vuejs.org/api/built-in-directives.html#v-on"
956
- },
957
- {
958
- "name": "fr",
959
- "url": "https://fr.vuejs.org/api/built-in-directives.html#v-on"
960
- },
961
- {
962
- "name": "ko",
963
- "url": "https://ko.vuejs.org/api/built-in-directives.html#v-on"
964
- },
965
- {
966
- "name": "pt",
967
- "url": "https://pt.vuejs.org/api/built-in-directives.html#v-on"
968
- },
969
- {
970
- "name": "bn",
971
- "url": "https://bn.vuejs.org/api/built-in-directives.html#v-on"
972
- },
973
- {
974
- "name": "it",
975
- "url": "https://it.vuejs.org/api/built-in-directives.html#v-on"
976
- },
977
- {
978
- "name": "cs",
979
- "url": "https://cs.vuejs.org/api/built-in-directives.html#v-on"
980
- },
981
- {
982
- "name": "ru",
983
- "url": "https://ru.vuejs.org/api/built-in-directives.html#v-on"
984
- },
985
- {
986
- "name": "fa",
987
- "url": "https://fa.vuejs.org/api/built-in-directives.html#v-on"
988
- }
989
- ]
141
+ "references": "api/built-in-directives.html#v-on"
990
142
  },
991
143
  {
992
144
  "name": "v-bind",
993
145
  "description": {
994
146
  "kind": "markdown",
995
- "value": "\n1 つ以上の属性やコンポーネントの props を式に動的にバインドします。\n\n- **省略記法:**\n - `:` or `.`(`.prop` 修飾子使用時)\n - 値の省略(属性とバインドされた値が同じ名前の場合)<sup class=\"vt-badge\">3.4+</sup>\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 コンポーネントの props をバインドするために使用する場合、その props は子コンポーネントで適切に宣言されている必要があります。\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 <!-- 同名省略記法(3.4+), :src=\"src\" のように展開する -->\n <img :src />\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 <!-- props のバインド。\"prop\" は子コンポーネントで宣言する必要があります。 -->\n <MyComponent :prop=\"someThing\" />\n\n <!-- 親の props を子コンポーネントと共有するために渡す -->\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 - [コンポーネント - props 渡しの詳細](https://ja.vuejs.org/guide/components/props.html#prop-passing-details)\n"
147
+ "value": "1 つ以上の属性やコンポーネントの props を式に動的にバインドします。\n\n- **省略記法:**\n - `:` or `.`(`.prop` 修飾子使用時)\n - 値の省略(属性とバインドされた値が同じ名前の場合、3.4 以上が必要)\n\n- **期待する値:** `any(引数ありの場合)| Object(引数なしの場合)`\n\n- **引数:** `attrOrProp(省略可能)`\n\n- **修飾子**\n\n - `.camel` - kebab-case の属性名を camelCase に変換します。\n - `.prop` - バインディングを DOM プロパティとして設定するよう強制します(3.2 以上)。\n - `.attr` - バインディングを DOM 属性として設定するよう強制します(3.2 以上)。\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 コンポーネントの props をバインドするために使用する場合、その props は子コンポーネントで適切に宣言されている必要があります。\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 <!-- 同名省略記法(3.4+), :src=\"src\" のように展開する -->\n <img :src />\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 <!-- props のバインド。\"prop\" は子コンポーネントで宣言する必要があります。 -->\n <MyComponent :prop=\"someThing\" />\n\n <!-- 親の props を子コンポーネントと共有するために渡す -->\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 - [コンポーネント - props 渡しの詳細](https://ja.vuejs.org/guide/components/props.html#prop-passing-details)"
996
148
  },
997
- "references": [
998
- {
999
- "name": "en",
1000
- "url": "https://vuejs.org/api/built-in-directives.html#v-bind"
1001
- },
1002
- {
1003
- "name": "zh-cn",
1004
- "url": "https://cn.vuejs.org/api/built-in-directives.html#v-bind"
1005
- },
1006
- {
1007
- "name": "zh-hk",
1008
- "url": "https://zh-hk.vuejs.org/api/built-in-directives.html#v-bind"
1009
- },
1010
- {
1011
- "name": "ja",
1012
- "url": "https://ja.vuejs.org/api/built-in-directives.html#v-bind"
1013
- },
1014
- {
1015
- "name": "ua",
1016
- "url": "https://ua.vuejs.org/api/built-in-directives.html#v-bind"
1017
- },
1018
- {
1019
- "name": "fr",
1020
- "url": "https://fr.vuejs.org/api/built-in-directives.html#v-bind"
1021
- },
1022
- {
1023
- "name": "ko",
1024
- "url": "https://ko.vuejs.org/api/built-in-directives.html#v-bind"
1025
- },
1026
- {
1027
- "name": "pt",
1028
- "url": "https://pt.vuejs.org/api/built-in-directives.html#v-bind"
1029
- },
1030
- {
1031
- "name": "bn",
1032
- "url": "https://bn.vuejs.org/api/built-in-directives.html#v-bind"
1033
- },
1034
- {
1035
- "name": "it",
1036
- "url": "https://it.vuejs.org/api/built-in-directives.html#v-bind"
1037
- },
1038
- {
1039
- "name": "cs",
1040
- "url": "https://cs.vuejs.org/api/built-in-directives.html#v-bind"
1041
- },
1042
- {
1043
- "name": "ru",
1044
- "url": "https://ru.vuejs.org/api/built-in-directives.html#v-bind"
1045
- },
1046
- {
1047
- "name": "fa",
1048
- "url": "https://fa.vuejs.org/api/built-in-directives.html#v-bind"
1049
- }
1050
- ]
149
+ "references": "api/built-in-directives.html#v-bind"
1051
150
  },
1052
151
  {
1053
152
  "name": "v-model",
1054
153
  "description": {
1055
154
  "kind": "markdown",
1056
- "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"
155
+ "value": "フォーム入力要素またはコンポーネントに双方向バインディングを作成します。\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)"
1057
156
  },
1058
- "references": [
1059
- {
1060
- "name": "en",
1061
- "url": "https://vuejs.org/api/built-in-directives.html#v-model"
1062
- },
1063
- {
1064
- "name": "zh-cn",
1065
- "url": "https://cn.vuejs.org/api/built-in-directives.html#v-model"
1066
- },
1067
- {
1068
- "name": "zh-hk",
1069
- "url": "https://zh-hk.vuejs.org/api/built-in-directives.html#v-model"
1070
- },
1071
- {
1072
- "name": "ja",
1073
- "url": "https://ja.vuejs.org/api/built-in-directives.html#v-model"
1074
- },
1075
- {
1076
- "name": "ua",
1077
- "url": "https://ua.vuejs.org/api/built-in-directives.html#v-model"
1078
- },
1079
- {
1080
- "name": "fr",
1081
- "url": "https://fr.vuejs.org/api/built-in-directives.html#v-model"
1082
- },
1083
- {
1084
- "name": "ko",
1085
- "url": "https://ko.vuejs.org/api/built-in-directives.html#v-model"
1086
- },
1087
- {
1088
- "name": "pt",
1089
- "url": "https://pt.vuejs.org/api/built-in-directives.html#v-model"
1090
- },
1091
- {
1092
- "name": "bn",
1093
- "url": "https://bn.vuejs.org/api/built-in-directives.html#v-model"
1094
- },
1095
- {
1096
- "name": "it",
1097
- "url": "https://it.vuejs.org/api/built-in-directives.html#v-model"
1098
- },
1099
- {
1100
- "name": "cs",
1101
- "url": "https://cs.vuejs.org/api/built-in-directives.html#v-model"
1102
- },
1103
- {
1104
- "name": "ru",
1105
- "url": "https://ru.vuejs.org/api/built-in-directives.html#v-model"
1106
- },
1107
- {
1108
- "name": "fa",
1109
- "url": "https://fa.vuejs.org/api/built-in-directives.html#v-model"
1110
- }
1111
- ]
157
+ "references": "api/built-in-directives.html#v-model"
1112
158
  },
1113
159
  {
1114
160
  "name": "v-slot",
1115
161
  "description": {
1116
162
  "kind": "markdown",
1117
- "value": "\nprops の受け取りを期待する名前付きスロットまたはスコープ付きスロットを表します。\n\n- **省略記法:** `#`\n\n- **期待する値:** 関数の引数の位置で有効な JavaScript 式(分割代入のサポートを含む)。省略可能 - props がスロットに渡されることを期待している場合のみ必要です。\n\n- **引数:** スロット名(省略可能で、デフォルトは `default`)\n\n- **以下に限定:**\n\n - `<template>`\n - [コンポーネント](https://ja.vuejs.org/guide/components/slots.html#scoped-slots)(props のある単独のデフォルトスロット用)\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 <!-- props を受け取る名前付きスロット -->\n <InfiniteScroll>\n <template v-slot:item=\"slotProps\">\n <div class=\"item\">\n {{ slotProps.item.text }}\n </div>\n </template>\n </InfiniteScroll>\n\n <!-- props を受け取るデフォルトスロット、分割代入あり -->\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"
163
+ "value": "props の受け取りを期待する名前付きスロットまたはスコープ付きスロットを表します。\n\n- **省略記法:** `#`\n\n- **期待する値:** 関数の引数の位置で有効な JavaScript 式(分割代入のサポートを含む)。省略可能 - props がスロットに渡されることを期待している場合のみ必要です。\n\n- **引数:** スロット名(省略可能で、デフォルトは `default`)\n\n- **以下に限定:**\n\n - `<template>`\n - [コンポーネント](https://ja.vuejs.org/guide/components/slots.html#scoped-slots)(props のある単独のデフォルトスロット用)\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 <!-- props を受け取る名前付きスロット -->\n <InfiniteScroll>\n <template v-slot:item=\"slotProps\">\n <div class=\"item\">\n {{ slotProps.item.text }}\n </div>\n </template>\n </InfiniteScroll>\n\n <!-- props を受け取るデフォルトスロット、分割代入あり -->\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)"
1118
164
  },
1119
- "references": [
1120
- {
1121
- "name": "en",
1122
- "url": "https://vuejs.org/api/built-in-directives.html#v-slot"
1123
- },
1124
- {
1125
- "name": "zh-cn",
1126
- "url": "https://cn.vuejs.org/api/built-in-directives.html#v-slot"
1127
- },
1128
- {
1129
- "name": "zh-hk",
1130
- "url": "https://zh-hk.vuejs.org/api/built-in-directives.html#v-slot"
1131
- },
1132
- {
1133
- "name": "ja",
1134
- "url": "https://ja.vuejs.org/api/built-in-directives.html#v-slot"
1135
- },
1136
- {
1137
- "name": "ua",
1138
- "url": "https://ua.vuejs.org/api/built-in-directives.html#v-slot"
1139
- },
1140
- {
1141
- "name": "fr",
1142
- "url": "https://fr.vuejs.org/api/built-in-directives.html#v-slot"
1143
- },
1144
- {
1145
- "name": "ko",
1146
- "url": "https://ko.vuejs.org/api/built-in-directives.html#v-slot"
1147
- },
1148
- {
1149
- "name": "pt",
1150
- "url": "https://pt.vuejs.org/api/built-in-directives.html#v-slot"
1151
- },
1152
- {
1153
- "name": "bn",
1154
- "url": "https://bn.vuejs.org/api/built-in-directives.html#v-slot"
1155
- },
1156
- {
1157
- "name": "it",
1158
- "url": "https://it.vuejs.org/api/built-in-directives.html#v-slot"
1159
- },
1160
- {
1161
- "name": "cs",
1162
- "url": "https://cs.vuejs.org/api/built-in-directives.html#v-slot"
1163
- },
1164
- {
1165
- "name": "ru",
1166
- "url": "https://ru.vuejs.org/api/built-in-directives.html#v-slot"
1167
- },
1168
- {
1169
- "name": "fa",
1170
- "url": "https://fa.vuejs.org/api/built-in-directives.html#v-slot"
1171
- }
1172
- ]
165
+ "references": "api/built-in-directives.html#v-slot"
1173
166
  },
1174
167
  {
1175
168
  "name": "v-pre",
1176
169
  "valueSet": "v",
1177
170
  "description": {
1178
171
  "kind": "markdown",
1179
- "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"
172
+ "value": "この要素とすべての子要素のコンパイルをスキップします。\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 ```"
1180
173
  },
1181
- "references": [
1182
- {
1183
- "name": "en",
1184
- "url": "https://vuejs.org/api/built-in-directives.html#v-pre"
1185
- },
1186
- {
1187
- "name": "zh-cn",
1188
- "url": "https://cn.vuejs.org/api/built-in-directives.html#v-pre"
1189
- },
1190
- {
1191
- "name": "zh-hk",
1192
- "url": "https://zh-hk.vuejs.org/api/built-in-directives.html#v-pre"
1193
- },
1194
- {
1195
- "name": "ja",
1196
- "url": "https://ja.vuejs.org/api/built-in-directives.html#v-pre"
1197
- },
1198
- {
1199
- "name": "ua",
1200
- "url": "https://ua.vuejs.org/api/built-in-directives.html#v-pre"
1201
- },
1202
- {
1203
- "name": "fr",
1204
- "url": "https://fr.vuejs.org/api/built-in-directives.html#v-pre"
1205
- },
1206
- {
1207
- "name": "ko",
1208
- "url": "https://ko.vuejs.org/api/built-in-directives.html#v-pre"
1209
- },
1210
- {
1211
- "name": "pt",
1212
- "url": "https://pt.vuejs.org/api/built-in-directives.html#v-pre"
1213
- },
1214
- {
1215
- "name": "bn",
1216
- "url": "https://bn.vuejs.org/api/built-in-directives.html#v-pre"
1217
- },
1218
- {
1219
- "name": "it",
1220
- "url": "https://it.vuejs.org/api/built-in-directives.html#v-pre"
1221
- },
1222
- {
1223
- "name": "cs",
1224
- "url": "https://cs.vuejs.org/api/built-in-directives.html#v-pre"
1225
- },
1226
- {
1227
- "name": "ru",
1228
- "url": "https://ru.vuejs.org/api/built-in-directives.html#v-pre"
1229
- },
1230
- {
1231
- "name": "fa",
1232
- "url": "https://fa.vuejs.org/api/built-in-directives.html#v-pre"
1233
- }
1234
- ]
174
+ "references": "api/built-in-directives.html#v-pre"
1235
175
  },
1236
176
  {
1237
177
  "name": "v-once",
1238
178
  "valueSet": "v",
1239
179
  "description": {
1240
180
  "kind": "markdown",
1241
- "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"
181
+ "value": "要素やコンポーネントを一度だけレンダリングし、その後の更新はスキップします。\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)"
1242
182
  },
1243
- "references": [
1244
- {
1245
- "name": "en",
1246
- "url": "https://vuejs.org/api/built-in-directives.html#v-once"
1247
- },
1248
- {
1249
- "name": "zh-cn",
1250
- "url": "https://cn.vuejs.org/api/built-in-directives.html#v-once"
1251
- },
1252
- {
1253
- "name": "zh-hk",
1254
- "url": "https://zh-hk.vuejs.org/api/built-in-directives.html#v-once"
1255
- },
1256
- {
1257
- "name": "ja",
1258
- "url": "https://ja.vuejs.org/api/built-in-directives.html#v-once"
1259
- },
1260
- {
1261
- "name": "ua",
1262
- "url": "https://ua.vuejs.org/api/built-in-directives.html#v-once"
1263
- },
1264
- {
1265
- "name": "fr",
1266
- "url": "https://fr.vuejs.org/api/built-in-directives.html#v-once"
1267
- },
1268
- {
1269
- "name": "ko",
1270
- "url": "https://ko.vuejs.org/api/built-in-directives.html#v-once"
1271
- },
1272
- {
1273
- "name": "pt",
1274
- "url": "https://pt.vuejs.org/api/built-in-directives.html#v-once"
1275
- },
1276
- {
1277
- "name": "bn",
1278
- "url": "https://bn.vuejs.org/api/built-in-directives.html#v-once"
1279
- },
1280
- {
1281
- "name": "it",
1282
- "url": "https://it.vuejs.org/api/built-in-directives.html#v-once"
1283
- },
1284
- {
1285
- "name": "cs",
1286
- "url": "https://cs.vuejs.org/api/built-in-directives.html#v-once"
1287
- },
1288
- {
1289
- "name": "ru",
1290
- "url": "https://ru.vuejs.org/api/built-in-directives.html#v-once"
1291
- },
1292
- {
1293
- "name": "fa",
1294
- "url": "https://fa.vuejs.org/api/built-in-directives.html#v-once"
1295
- }
1296
- ]
183
+ "references": "api/built-in-directives.html#v-once"
1297
184
  },
1298
185
  {
1299
186
  "name": "v-memo",
1300
187
  "description": {
1301
188
  "kind": "markdown",
1302
- "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"
189
+ "value": "- 3.2 以上でのみサポートされています\n\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)"
1303
190
  },
1304
- "references": [
1305
- {
1306
- "name": "en",
1307
- "url": "https://vuejs.org/api/built-in-directives.html#v-memo"
1308
- },
1309
- {
1310
- "name": "zh-cn",
1311
- "url": "https://cn.vuejs.org/api/built-in-directives.html#v-memo"
1312
- },
1313
- {
1314
- "name": "zh-hk",
1315
- "url": "https://zh-hk.vuejs.org/api/built-in-directives.html#v-memo"
1316
- },
1317
- {
1318
- "name": "ja",
1319
- "url": "https://ja.vuejs.org/api/built-in-directives.html#v-memo"
1320
- },
1321
- {
1322
- "name": "ua",
1323
- "url": "https://ua.vuejs.org/api/built-in-directives.html#v-memo"
1324
- },
1325
- {
1326
- "name": "fr",
1327
- "url": "https://fr.vuejs.org/api/built-in-directives.html#v-memo"
1328
- },
1329
- {
1330
- "name": "ko",
1331
- "url": "https://ko.vuejs.org/api/built-in-directives.html#v-memo"
1332
- },
1333
- {
1334
- "name": "pt",
1335
- "url": "https://pt.vuejs.org/api/built-in-directives.html#v-memo"
1336
- },
1337
- {
1338
- "name": "bn",
1339
- "url": "https://bn.vuejs.org/api/built-in-directives.html#v-memo"
1340
- },
1341
- {
1342
- "name": "it",
1343
- "url": "https://it.vuejs.org/api/built-in-directives.html#v-memo"
1344
- },
1345
- {
1346
- "name": "cs",
1347
- "url": "https://cs.vuejs.org/api/built-in-directives.html#v-memo"
1348
- },
1349
- {
1350
- "name": "ru",
1351
- "url": "https://ru.vuejs.org/api/built-in-directives.html#v-memo"
1352
- },
1353
- {
1354
- "name": "fa",
1355
- "url": "https://fa.vuejs.org/api/built-in-directives.html#v-memo"
1356
- }
1357
- ]
191
+ "references": "api/built-in-directives.html#v-memo"
1358
192
  },
1359
193
  {
1360
194
  "name": "v-cloak",
1361
195
  "valueSet": "v",
1362
196
  "description": {
1363
197
  "kind": "markdown",
1364
- "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"
198
+ "value": "コンパイルされていないテンプレートを、準備が整うまで非表示にするために使用します。\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>` はコンパイルが完了するまで表示されません。"
1365
199
  },
1366
- "references": [
1367
- {
1368
- "name": "en",
1369
- "url": "https://vuejs.org/api/built-in-directives.html#v-cloak"
1370
- },
1371
- {
1372
- "name": "zh-cn",
1373
- "url": "https://cn.vuejs.org/api/built-in-directives.html#v-cloak"
1374
- },
1375
- {
1376
- "name": "zh-hk",
1377
- "url": "https://zh-hk.vuejs.org/api/built-in-directives.html#v-cloak"
1378
- },
1379
- {
1380
- "name": "ja",
1381
- "url": "https://ja.vuejs.org/api/built-in-directives.html#v-cloak"
1382
- },
1383
- {
1384
- "name": "ua",
1385
- "url": "https://ua.vuejs.org/api/built-in-directives.html#v-cloak"
1386
- },
1387
- {
1388
- "name": "fr",
1389
- "url": "https://fr.vuejs.org/api/built-in-directives.html#v-cloak"
1390
- },
1391
- {
1392
- "name": "ko",
1393
- "url": "https://ko.vuejs.org/api/built-in-directives.html#v-cloak"
1394
- },
1395
- {
1396
- "name": "pt",
1397
- "url": "https://pt.vuejs.org/api/built-in-directives.html#v-cloak"
1398
- },
1399
- {
1400
- "name": "bn",
1401
- "url": "https://bn.vuejs.org/api/built-in-directives.html#v-cloak"
1402
- },
1403
- {
1404
- "name": "it",
1405
- "url": "https://it.vuejs.org/api/built-in-directives.html#v-cloak"
1406
- },
1407
- {
1408
- "name": "cs",
1409
- "url": "https://cs.vuejs.org/api/built-in-directives.html#v-cloak"
1410
- },
1411
- {
1412
- "name": "ru",
1413
- "url": "https://ru.vuejs.org/api/built-in-directives.html#v-cloak"
1414
- },
1415
- {
1416
- "name": "fa",
1417
- "url": "https://fa.vuejs.org/api/built-in-directives.html#v-cloak"
1418
- }
1419
- ]
200
+ "references": "api/built-in-directives.html#v-cloak"
1420
201
  },
1421
202
  {
1422
203
  "name": "key",
1423
204
  "description": {
1424
205
  "kind": "markdown",
1425
- "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"
206
+ "value": "特別な属性 `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)"
1426
207
  },
1427
- "references": [
1428
- {
1429
- "name": "en",
1430
- "url": "https://vuejs.org/api/built-in-special-attributes.html#key"
1431
- },
1432
- {
1433
- "name": "zh-cn",
1434
- "url": "https://cn.vuejs.org/api/built-in-special-attributes.html#key"
1435
- },
1436
- {
1437
- "name": "zh-hk",
1438
- "url": "https://zh-hk.vuejs.org/api/built-in-special-attributes.html#key"
1439
- },
1440
- {
1441
- "name": "ja",
1442
- "url": "https://ja.vuejs.org/api/built-in-special-attributes.html#key"
1443
- },
1444
- {
1445
- "name": "ua",
1446
- "url": "https://ua.vuejs.org/api/built-in-special-attributes.html#key"
1447
- },
1448
- {
1449
- "name": "fr",
1450
- "url": "https://fr.vuejs.org/api/built-in-special-attributes.html#key"
1451
- },
1452
- {
1453
- "name": "ko",
1454
- "url": "https://ko.vuejs.org/api/built-in-special-attributes.html#key"
1455
- },
1456
- {
1457
- "name": "pt",
1458
- "url": "https://pt.vuejs.org/api/built-in-special-attributes.html#key"
1459
- },
1460
- {
1461
- "name": "bn",
1462
- "url": "https://bn.vuejs.org/api/built-in-special-attributes.html#key"
1463
- },
1464
- {
1465
- "name": "it",
1466
- "url": "https://it.vuejs.org/api/built-in-special-attributes.html#key"
1467
- },
1468
- {
1469
- "name": "cs",
1470
- "url": "https://cs.vuejs.org/api/built-in-special-attributes.html#key"
1471
- },
1472
- {
1473
- "name": "ru",
1474
- "url": "https://ru.vuejs.org/api/built-in-special-attributes.html#key"
1475
- },
1476
- {
1477
- "name": "fa",
1478
- "url": "https://fa.vuejs.org/api/built-in-special-attributes.html#key"
1479
- }
1480
- ]
208
+ "references": "api/built-in-special-attributes.html#key"
1481
209
  },
1482
210
  {
1483
211
  "name": "ref",
1484
212
  "description": {
1485
213
  "kind": "markdown",
1486
- "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"
214
+ "value": "[テンプレート参照](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 { useTemplateRef } from 'vue'\n\n const pRef = useTemplateRef('p')\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\" />"
1487
215
  },
1488
- "references": [
1489
- {
1490
- "name": "en",
1491
- "url": "https://vuejs.org/api/built-in-special-attributes.html#ref"
1492
- },
1493
- {
1494
- "name": "zh-cn",
1495
- "url": "https://cn.vuejs.org/api/built-in-special-attributes.html#ref"
1496
- },
1497
- {
1498
- "name": "zh-hk",
1499
- "url": "https://zh-hk.vuejs.org/api/built-in-special-attributes.html#ref"
1500
- },
1501
- {
1502
- "name": "ja",
1503
- "url": "https://ja.vuejs.org/api/built-in-special-attributes.html#ref"
1504
- },
1505
- {
1506
- "name": "ua",
1507
- "url": "https://ua.vuejs.org/api/built-in-special-attributes.html#ref"
1508
- },
1509
- {
1510
- "name": "fr",
1511
- "url": "https://fr.vuejs.org/api/built-in-special-attributes.html#ref"
1512
- },
1513
- {
1514
- "name": "ko",
1515
- "url": "https://ko.vuejs.org/api/built-in-special-attributes.html#ref"
1516
- },
1517
- {
1518
- "name": "pt",
1519
- "url": "https://pt.vuejs.org/api/built-in-special-attributes.html#ref"
1520
- },
1521
- {
1522
- "name": "bn",
1523
- "url": "https://bn.vuejs.org/api/built-in-special-attributes.html#ref"
1524
- },
1525
- {
1526
- "name": "it",
1527
- "url": "https://it.vuejs.org/api/built-in-special-attributes.html#ref"
1528
- },
1529
- {
1530
- "name": "cs",
1531
- "url": "https://cs.vuejs.org/api/built-in-special-attributes.html#ref"
1532
- },
1533
- {
1534
- "name": "ru",
1535
- "url": "https://ru.vuejs.org/api/built-in-special-attributes.html#ref"
1536
- },
1537
- {
1538
- "name": "fa",
1539
- "url": "https://fa.vuejs.org/api/built-in-special-attributes.html#ref"
1540
- }
1541
- ]
216
+ "references": "api/built-in-special-attributes.html#ref"
1542
217
  },
1543
218
  {
1544
219
  "name": "is",
1545
220
  "description": {
1546
221
  "kind": "markdown",
1547
- "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#in-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"
222
+ "value": "[動的コンポーネント](https://ja.vuejs.org/guide/essentials/component-basics.html#dynamic-components)のバインディングに使用します。\n\n- **期待する値:** `string | Component`\n\n- **ネイティブ要素での使用**\n\n- 3.1 以上でのみサポートされています\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#in-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)"
1548
223
  },
1549
- "references": [
1550
- {
1551
- "name": "en",
1552
- "url": "https://vuejs.org/api/built-in-special-attributes.html#is"
1553
- },
1554
- {
1555
- "name": "zh-cn",
1556
- "url": "https://cn.vuejs.org/api/built-in-special-attributes.html#is"
1557
- },
1558
- {
1559
- "name": "zh-hk",
1560
- "url": "https://zh-hk.vuejs.org/api/built-in-special-attributes.html#is"
1561
- },
1562
- {
1563
- "name": "ja",
1564
- "url": "https://ja.vuejs.org/api/built-in-special-attributes.html#is"
1565
- },
1566
- {
1567
- "name": "ua",
1568
- "url": "https://ua.vuejs.org/api/built-in-special-attributes.html#is"
1569
- },
1570
- {
1571
- "name": "fr",
1572
- "url": "https://fr.vuejs.org/api/built-in-special-attributes.html#is"
1573
- },
1574
- {
1575
- "name": "ko",
1576
- "url": "https://ko.vuejs.org/api/built-in-special-attributes.html#is"
1577
- },
1578
- {
1579
- "name": "pt",
1580
- "url": "https://pt.vuejs.org/api/built-in-special-attributes.html#is"
1581
- },
1582
- {
1583
- "name": "bn",
1584
- "url": "https://bn.vuejs.org/api/built-in-special-attributes.html#is"
1585
- },
1586
- {
1587
- "name": "it",
1588
- "url": "https://it.vuejs.org/api/built-in-special-attributes.html#is"
1589
- },
1590
- {
1591
- "name": "cs",
1592
- "url": "https://cs.vuejs.org/api/built-in-special-attributes.html#is"
1593
- },
1594
- {
1595
- "name": "ru",
1596
- "url": "https://ru.vuejs.org/api/built-in-special-attributes.html#is"
1597
- },
1598
- {
1599
- "name": "fa",
1600
- "url": "https://fa.vuejs.org/api/built-in-special-attributes.html#is"
1601
- }
1602
- ]
224
+ "references": "api/built-in-special-attributes.html#is"
225
+ },
226
+ {
227
+ "name": "data-allow-mismatch",
228
+ "description": {
229
+ "kind": "markdown",
230
+ "value": "[ハイドレーション・ミスマッチ](https://ja.vuejs.org/guide/scaling-up/ssr.html#hydration-mismatch) の警告を抑制するために使用できる特別な属性です。\n\n- **例**\n\n ```html\n <div data-allow-mismatch=\"text\">{{ data.toLocaleString() }}</div>\n ```\n\n この値で特定のタイプのミスマッチを許可することができます。指定できる値は以下の通りです:\n\n - `text`\n - `children`(直下の子要素に対してのみミスマッチを許可します)\n - `class`\n - `style`\n - `attribute`\n\n 値を指定しない場合、すべてのタイプのミスマッチが許可されます。\n"
231
+ },
232
+ "references": "api/ssr.html#data-allow-mismatch"
1603
233
  }
1604
234
  ]
1605
235
  }