@vue/language-service 1.7.13 → 1.8.0-patch.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/data/template/en.json +26 -26
- package/data/template/ja.json +26 -26
- package/package.json +15 -15
package/data/template/en.json
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
"name": "Transition",
|
|
6
6
|
"description": {
|
|
7
7
|
"kind": "markdown",
|
|
8
|
-
"value": "\nProvides animated transition effects to a **single** element or component.\n\n- **Props**\n\n ```ts\n interface TransitionProps {\n /**\n * Used to automatically generate transition CSS class names.\n * e.g. `name: 'fade'` will auto expand to `.fade-enter`,\n * `.fade-enter-active`, etc.\n */\n name?: string\n /**\n * Whether to apply CSS transition classes.\n * Default: true\n */\n css?: boolean\n /**\n * Specifies the type of transition events to wait for to\n * determine transition end timing.\n * Default behavior is auto detecting the type that has\n * longer duration.\n */\n type?: 'transition' | 'animation'\n /**\n * Specifies explicit durations of the transition.\n * Default behavior is wait for the first `transitionend`\n * or `animationend` event on the root transition element.\n */\n duration?: number | { enter: number; leave: number }\n /**\n * Controls the timing sequence of leaving/entering transitions.\n * Default behavior is simultaneous.\n */\n mode?: 'in-out' | 'out-in' | 'default'\n /**\n * Whether to apply transition on initial render.\n * Default: false\n */\n appear?: boolean\n\n /**\n * Props for customizing transition classes.\n * Use kebab-case in templates, e.g. 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- **Events**\n\n - `@before-enter`\n - `@before-leave`\n - `@enter`\n - `@leave`\n - `@appear`\n - `@after-enter`\n - `@after-leave`\n - `@after-appear`\n - `@enter-cancelled`\n - `@leave-cancelled` (`v-show` only)\n - `@appear-cancelled`\n\n- **Example**\n\n Simple element:\n\n ```html\n <Transition>\n <div v-if=\"ok\">toggled content</div>\n </Transition>\n ```\n\n Forcing a transition by changing the `key` attribute:\n
|
|
8
|
+
"value": "\nProvides animated transition effects to a **single** element or component.\n\n- **Props**\n\n ```ts\n interface TransitionProps {\n /**\n * Used to automatically generate transition CSS class names.\n * e.g. `name: 'fade'` will auto expand to `.fade-enter`,\n * `.fade-enter-active`, etc.\n */\n name?: string\n /**\n * Whether to apply CSS transition classes.\n * Default: true\n */\n css?: boolean\n /**\n * Specifies the type of transition events to wait for to\n * determine transition end timing.\n * Default behavior is auto detecting the type that has\n * longer duration.\n */\n type?: 'transition' | 'animation'\n /**\n * Specifies explicit durations of the transition.\n * Default behavior is wait for the first `transitionend`\n * or `animationend` event on the root transition element.\n */\n duration?: number | { enter: number; leave: number }\n /**\n * Controls the timing sequence of leaving/entering transitions.\n * Default behavior is simultaneous.\n */\n mode?: 'in-out' | 'out-in' | 'default'\n /**\n * Whether to apply transition on initial render.\n * Default: false\n */\n appear?: boolean\n\n /**\n * Props for customizing transition classes.\n * Use kebab-case in templates, e.g. 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- **Events**\n\n - `@before-enter`\n - `@before-leave`\n - `@enter`\n - `@leave`\n - `@appear`\n - `@after-enter`\n - `@after-leave`\n - `@after-appear`\n - `@enter-cancelled`\n - `@leave-cancelled` (`v-show` only)\n - `@appear-cancelled`\n\n- **Example**\n\n Simple element:\n\n ```html\n <Transition>\n <div v-if=\"ok\">toggled content</div>\n </Transition>\n ```\n\n Forcing a transition by changing the `key` attribute:\n\n ```html\n <Transition>\n <div :key=\"text\">{{ text }}</div>\n </Transition>\n ```\n\n Dynamic component, with transition mode + animate on appear:\n\n ```html\n <Transition name=\"fade\" mode=\"out-in\" appear>\n <component :is=\"view\"></component>\n </Transition>\n ```\n\n Listening to transition events:\n\n ```html\n <Transition @after-enter=\"onTransitionComplete\">\n <div v-show=\"ok\">toggled content</div>\n </Transition>\n ```\n\n- **See also** [`<Transition>` Guide](https://vuejs.org/guide/built-ins/transition.html)\n"
|
|
9
9
|
},
|
|
10
10
|
"attributes": [],
|
|
11
11
|
"references": [
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
"name": "TransitionGroup",
|
|
40
40
|
"description": {
|
|
41
41
|
"kind": "markdown",
|
|
42
|
-
"value": "\nProvides transition effects for **multiple** elements or components in a list.\n\n- **Props**\n\n `<TransitionGroup>` accepts the same props as `<Transition>` except `mode`, plus two additional props:\n\n ```ts\n interface TransitionGroupProps extends Omit<TransitionProps, 'mode'> {\n /**\n * If not defined, renders as a fragment.\n */\n tag?: string\n /**\n * For customizing the CSS class applied during move transitions.\n * Use kebab-case in templates, e.g. move-class=\"xxx\"\n */\n moveClass?: string\n }\n ```\n\n- **Events**\n\n `<TransitionGroup>` emits the same events as `<Transition>`.\n\n- **Details**\n\n By default, `<TransitionGroup>` doesn't render a wrapper DOM element, but one can be defined via the `tag` prop.\n\n Note that every child in a `<transition-group>` must be [**uniquely keyed**](https://vuejs.org/guide/essentials/list.html#maintaining-state-with-key) for the animations to work properly.\n\n `<TransitionGroup>` supports moving transitions via CSS transform. When a child's position on screen has changed after an update, it will get applied a moving CSS class (auto generated from the `name` attribute or configured with the `move-class` prop). If the CSS `transform` property is \"transition-able\" when the moving class is applied, the element will be smoothly animated to its destination using the [FLIP technique](https://aerotwist.com/blog/flip-your-animations/).\n\n- **Example**\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- **See also
|
|
42
|
+
"value": "\nProvides transition effects for **multiple** elements or components in a list.\n\n- **Props**\n\n `<TransitionGroup>` accepts the same props as `<Transition>` except `mode`, plus two additional props:\n\n ```ts\n interface TransitionGroupProps extends Omit<TransitionProps, 'mode'> {\n /**\n * If not defined, renders as a fragment.\n */\n tag?: string\n /**\n * For customizing the CSS class applied during move transitions.\n * Use kebab-case in templates, e.g. move-class=\"xxx\"\n */\n moveClass?: string\n }\n ```\n\n- **Events**\n\n `<TransitionGroup>` emits the same events as `<Transition>`.\n\n- **Details**\n\n By default, `<TransitionGroup>` doesn't render a wrapper DOM element, but one can be defined via the `tag` prop.\n\n Note that every child in a `<transition-group>` must be [**uniquely keyed**](https://vuejs.org/guide/essentials/list.html#maintaining-state-with-key) for the animations to work properly.\n\n `<TransitionGroup>` supports moving transitions via CSS transform. When a child's position on screen has changed after an update, it will get applied a moving CSS class (auto generated from the `name` attribute or configured with the `move-class` prop). If the CSS `transform` property is \"transition-able\" when the moving class is applied, the element will be smoothly animated to its destination using the [FLIP technique](https://aerotwist.com/blog/flip-your-animations/).\n\n- **Example**\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- **See also** [Guide - TransitionGroup](https://vuejs.org/guide/built-ins/transition-group.html)\n"
|
|
43
43
|
},
|
|
44
44
|
"attributes": [],
|
|
45
45
|
"references": [
|
|
@@ -73,7 +73,7 @@
|
|
|
73
73
|
"name": "KeepAlive",
|
|
74
74
|
"description": {
|
|
75
75
|
"kind": "markdown",
|
|
76
|
-
"value": "\nCaches dynamically toggled components wrapped inside.\n\n- **Props**\n\n ```ts\n interface KeepAliveProps {\n /**\n * If specified, only components with names matched by\n * `include` will be cached.\n */\n include?: MatchPattern\n /**\n * Any component with a name matched by `exclude` will\n * not be cached.\n */\n exclude?: MatchPattern\n /**\n * The maximum number of component instances to cache.\n */\n max?: number | string\n }\n\n type MatchPattern = string | RegExp | (string | RegExp)[]\n ```\n\n- **Details**\n\n When wrapped around a dynamic component, `<KeepAlive>` caches the inactive component instances without destroying them.\n\n There can only be one active component instance as the direct child of `<KeepAlive>` at any time.\n\n When a component is toggled inside `<KeepAlive>`, its `activated` and `deactivated` lifecycle hooks will be invoked accordingly, providing an alternative to `mounted` and `unmounted`, which are not called. This applies to the direct child of `<KeepAlive>` as well as to all of its descendants.\n\n- **Example**\n\n Basic usage:\n\n ```html\n <KeepAlive>\n <component :is=\"view\"></component>\n </KeepAlive>\n ```\n\n When used with `v-if` / `v-else` branches, there must be only one component rendered at a time:\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 Used together with `<Transition>`:\n\n ```html\n <Transition>\n <KeepAlive>\n <component :is=\"view\"></component>\n </KeepAlive>\n </Transition>\n ```\n\n Using `include` / `exclude`:\n\n ```html\n <!-- comma-delimited string -->\n <KeepAlive include=\"a,b\">\n <component :is=\"view\"></component>\n </KeepAlive>\n\n <!-- regex (use `v-bind`) -->\n <KeepAlive :include=\"/a|b/\">\n <component :is=\"view\"></component>\n </KeepAlive>\n\n <!-- Array (use `v-bind`) -->\n <KeepAlive :include=\"['a', 'b']\">\n <component :is=\"view\"></component>\n </KeepAlive>\n ```\n\n Usage with `max`:\n\n ```html\n <KeepAlive :max=\"10\">\n <component :is=\"view\"></component>\n </KeepAlive>\n ```\n\n- **See also
|
|
76
|
+
"value": "\nCaches dynamically toggled components wrapped inside.\n\n- **Props**\n\n ```ts\n interface KeepAliveProps {\n /**\n * If specified, only components with names matched by\n * `include` will be cached.\n */\n include?: MatchPattern\n /**\n * Any component with a name matched by `exclude` will\n * not be cached.\n */\n exclude?: MatchPattern\n /**\n * The maximum number of component instances to cache.\n */\n max?: number | string\n }\n\n type MatchPattern = string | RegExp | (string | RegExp)[]\n ```\n\n- **Details**\n\n When wrapped around a dynamic component, `<KeepAlive>` caches the inactive component instances without destroying them.\n\n There can only be one active component instance as the direct child of `<KeepAlive>` at any time.\n\n When a component is toggled inside `<KeepAlive>`, its `activated` and `deactivated` lifecycle hooks will be invoked accordingly, providing an alternative to `mounted` and `unmounted`, which are not called. This applies to the direct child of `<KeepAlive>` as well as to all of its descendants.\n\n- **Example**\n\n Basic usage:\n\n ```html\n <KeepAlive>\n <component :is=\"view\"></component>\n </KeepAlive>\n ```\n\n When used with `v-if` / `v-else` branches, there must be only one component rendered at a time:\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 Used together with `<Transition>`:\n\n ```html\n <Transition>\n <KeepAlive>\n <component :is=\"view\"></component>\n </KeepAlive>\n </Transition>\n ```\n\n Using `include` / `exclude`:\n\n ```html\n <!-- comma-delimited string -->\n <KeepAlive include=\"a,b\">\n <component :is=\"view\"></component>\n </KeepAlive>\n\n <!-- regex (use `v-bind`) -->\n <KeepAlive :include=\"/a|b/\">\n <component :is=\"view\"></component>\n </KeepAlive>\n\n <!-- Array (use `v-bind`) -->\n <KeepAlive :include=\"['a', 'b']\">\n <component :is=\"view\"></component>\n </KeepAlive>\n ```\n\n Usage with `max`:\n\n ```html\n <KeepAlive :max=\"10\">\n <component :is=\"view\"></component>\n </KeepAlive>\n ```\n\n- **See also** [Guide - KeepAlive](https://vuejs.org/guide/built-ins/keep-alive.html)\n"
|
|
77
77
|
},
|
|
78
78
|
"attributes": [],
|
|
79
79
|
"references": [
|
|
@@ -107,7 +107,7 @@
|
|
|
107
107
|
"name": "Teleport",
|
|
108
108
|
"description": {
|
|
109
109
|
"kind": "markdown",
|
|
110
|
-
"value": "\nRenders its slot content to another part of the DOM.\n\n- **Props**\n\n ```ts\n interface TeleportProps {\n /**\n * Required. Specify target container.\n * Can either be a selector or an actual element.\n */\n to: string | HTMLElement\n /**\n * When `true`, the content will remain in its original\n * location instead of moved into the target container.\n * Can be changed dynamically.\n */\n disabled?: boolean\n }\n ```\n\n- **Example**\n\n Specifying target container:\n\n ```html\n <teleport to=\"#some-id\" />\n <teleport to=\".some-class\" />\n <teleport to=\"[data-teleport]\" />\n ```\n\n Conditionally disabling:\n\n ```html\n <teleport to=\"#popup\" :disabled=\"displayVideoInline\">\n <video src=\"./my-movie.mp4\">\n </teleport>\n ```\n\n- **See also
|
|
110
|
+
"value": "\nRenders its slot content to another part of the DOM.\n\n- **Props**\n\n ```ts\n interface TeleportProps {\n /**\n * Required. Specify target container.\n * Can either be a selector or an actual element.\n */\n to: string | HTMLElement\n /**\n * When `true`, the content will remain in its original\n * location instead of moved into the target container.\n * Can be changed dynamically.\n */\n disabled?: boolean\n }\n ```\n\n- **Example**\n\n Specifying target container:\n\n ```html\n <teleport to=\"#some-id\" />\n <teleport to=\".some-class\" />\n <teleport to=\"[data-teleport]\" />\n ```\n\n Conditionally disabling:\n\n ```html\n <teleport to=\"#popup\" :disabled=\"displayVideoInline\">\n <video src=\"./my-movie.mp4\">\n </teleport>\n ```\n\n- **See also** [Guide - Teleport](https://vuejs.org/guide/built-ins/teleport.html)\n"
|
|
111
111
|
},
|
|
112
112
|
"attributes": [],
|
|
113
113
|
"references": [
|
|
@@ -141,7 +141,7 @@
|
|
|
141
141
|
"name": "Suspense",
|
|
142
142
|
"description": {
|
|
143
143
|
"kind": "markdown",
|
|
144
|
-
"value": "\nUsed for orchestrating nested async dependencies in a component tree.\n\n- **Props**\n\n ```ts\n interface SuspenseProps {\n timeout?: string | number\n }\n ```\n\n- **Events**\n\n - `@resolve`\n - `@pending`\n - `@fallback`\n\n- **Details**\n\n `<Suspense>` accepts two slots: the `#default` slot and the `#fallback` slot. It will display the content of the fallback slot while rendering the default slot in memory.\n\n If it encounters async dependencies ([Async Components](https://vuejs.org/guide/components/async.html) and components with [`async setup()`](https://vuejs.org/guide/built-ins/suspense.html#async-setup)) while rendering the default slot, it will wait until all of them are resolved before displaying the default slot.\n\n- **See also
|
|
144
|
+
"value": "\nUsed for orchestrating nested async dependencies in a component tree.\n\n- **Props**\n\n ```ts\n interface SuspenseProps {\n timeout?: string | number\n }\n ```\n\n- **Events**\n\n - `@resolve`\n - `@pending`\n - `@fallback`\n\n- **Details**\n\n `<Suspense>` accepts two slots: the `#default` slot and the `#fallback` slot. It will display the content of the fallback slot while rendering the default slot in memory.\n\n If it encounters async dependencies ([Async Components](https://vuejs.org/guide/components/async.html) and components with [`async setup()`](https://vuejs.org/guide/built-ins/suspense.html#async-setup)) while rendering the default slot, it will wait until all of them are resolved before displaying the default slot.\n\n- **See also** [Guide - Suspense](https://vuejs.org/guide/built-ins/suspense.html)\n"
|
|
145
145
|
},
|
|
146
146
|
"attributes": [],
|
|
147
147
|
"references": [
|
|
@@ -175,7 +175,7 @@
|
|
|
175
175
|
"name": "component",
|
|
176
176
|
"description": {
|
|
177
177
|
"kind": "markdown",
|
|
178
|
-
"value": "\nA \"meta component\" for rendering dynamic components or elements.\n\n- **Props**\n\n ```ts\n interface DynamicComponentProps {\n is: string | Component\n }\n ```\n\n- **Details**\n\n The actual component to render is determined by the `is` prop.\n\n - When `is` is a string, it could be either an HTML tag name or a component's registered name.\n\n - Alternatively, `is` can also be directly bound to the definition of a component.\n\n- **Example**\n\n Rendering components by registered name (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 Rendering components by definition (Composition API with `<script setup>`):\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 Rendering HTML elements:\n\n ```html\n <component :is=\"href ? 'a' : 'span'\"></component>\n ```\n\n The [built-in components](./built-in-components) can all be passed to `is`, but you must register them if you want to pass them by name. For example:\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 Registration is not required if you pass the component itself to `is` rather than its name, e.g. in `<script setup>`.\n\n If `v-model` is used on a `<component>` tag, the template compiler will expand it to a `modelValue` prop and `update:modelValue` event listener, much like it would for any other component. However, this won't be compatible with native HTML elements, such as `<input>` or `<select>`. As a result, using `v-model` with a dynamically created native element won't work:\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 <!-- This won't work as 'input' is a native HTML element -->\n <component :is=\"tag\" v-model=\"username\" />\n </template>\n ```\n\n In practice, this edge case isn't common as native form fields are typically wrapped in components in real applications. If you do need to use a native element directly then you can split the `v-model` into an attribute and event manually.\n\n- **See also
|
|
178
|
+
"value": "\nA \"meta component\" for rendering dynamic components or elements.\n\n- **Props**\n\n ```ts\n interface DynamicComponentProps {\n is: string | Component\n }\n ```\n\n- **Details**\n\n The actual component to render is determined by the `is` prop.\n\n - When `is` is a string, it could be either an HTML tag name or a component's registered name.\n\n - Alternatively, `is` can also be directly bound to the definition of a component.\n\n- **Example**\n\n Rendering components by registered name (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 Rendering components by definition (Composition API with `<script setup>`):\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 Rendering HTML elements:\n\n ```html\n <component :is=\"href ? 'a' : 'span'\"></component>\n ```\n\n The [built-in components](./built-in-components) can all be passed to `is`, but you must register them if you want to pass them by name. For example:\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 Registration is not required if you pass the component itself to `is` rather than its name, e.g. in `<script setup>`.\n\n If `v-model` is used on a `<component>` tag, the template compiler will expand it to a `modelValue` prop and `update:modelValue` event listener, much like it would for any other component. However, this won't be compatible with native HTML elements, such as `<input>` or `<select>`. As a result, using `v-model` with a dynamically created native element won't work:\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 <!-- This won't work as 'input' is a native HTML element -->\n <component :is=\"tag\" v-model=\"username\" />\n </template>\n ```\n\n In practice, this edge case isn't common as native form fields are typically wrapped in components in real applications. If you do need to use a native element directly then you can split the `v-model` into an attribute and event manually.\n\n- **See also** [Dynamic Components](https://vuejs.org/guide/essentials/component-basics.html#dynamic-components)\n"
|
|
179
179
|
},
|
|
180
180
|
"attributes": [],
|
|
181
181
|
"references": [
|
|
@@ -209,7 +209,7 @@
|
|
|
209
209
|
"name": "slot",
|
|
210
210
|
"description": {
|
|
211
211
|
"kind": "markdown",
|
|
212
|
-
"value": "\nDenotes slot content outlets in templates.\n\n- **Props**\n\n ```ts\n interface SlotProps {\n /**\n * Any props passed to <slot> to passed as arguments\n * for scoped slots\n */\n [key: string]: any\n /**\n * Reserved for specifying slot name.\n */\n name?: string\n }\n ```\n\n- **Details**\n\n The `<slot>` element can use the `name` attribute to specify a slot name. When no `name` is specified, it will render the default slot. Additional attributes passed to the slot element will be passed as slot props to the scoped slot defined in the parent.\n\n The element itself will be replaced by its matched slot content.\n\n `<slot>` elements in Vue templates are compiled into JavaScript, so they are not to be confused with [native `<slot>` elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot).\n\n- **See also
|
|
212
|
+
"value": "\nDenotes slot content outlets in templates.\n\n- **Props**\n\n ```ts\n interface SlotProps {\n /**\n * Any props passed to <slot> to passed as arguments\n * for scoped slots\n */\n [key: string]: any\n /**\n * Reserved for specifying slot name.\n */\n name?: string\n }\n ```\n\n- **Details**\n\n The `<slot>` element can use the `name` attribute to specify a slot name. When no `name` is specified, it will render the default slot. Additional attributes passed to the slot element will be passed as slot props to the scoped slot defined in the parent.\n\n The element itself will be replaced by its matched slot content.\n\n `<slot>` elements in Vue templates are compiled into JavaScript, so they are not to be confused with [native `<slot>` elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot).\n\n- **See also** [Component - Slots](https://vuejs.org/guide/components/slots.html)\n"
|
|
213
213
|
},
|
|
214
214
|
"attributes": [],
|
|
215
215
|
"references": [
|
|
@@ -243,7 +243,7 @@
|
|
|
243
243
|
"name": "template",
|
|
244
244
|
"description": {
|
|
245
245
|
"kind": "markdown",
|
|
246
|
-
"value": "\nThe `<template>` tag is used as a placeholder when we want to use a built-in directive without rendering an element in the DOM.\n\n- **Details
|
|
246
|
+
"value": "\nThe `<template>` tag is used as a placeholder when we want to use a built-in directive without rendering an element in the DOM.\n\n- **Details**\n\n The special handling for `<template>` is only triggered if it is used with one of these directives:\n\n - `v-if`, `v-else-if`, or `v-else`\n - `v-for`\n - `v-slot`\n\n If none of those directives are present then it will be rendered as a [native `<template>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template) instead.\n\n A `<template>` with a `v-for` can also have a [`key` attribute](https://vuejs.org/api/built-in-special-attributes.html#key). All other attributes and directives will be discarded, as they aren't meaningful without a corresponding element.\n\n Single-file components use a [top-level `<template>` tag](https://vuejs.org/api/sfc-spec.html#language-blocks) to wrap the entire template. That usage is separate from the use of `<template>` described above. That top-level tag is not part of the template itself and doesn't support template syntax, such as directives.\n\n- **See also**\n - [Guide - `v-if` on `<template>`](https://vuejs.org/guide/essentials/conditional.html#v-if-on-template)\n - [Guide - `v-for` on `<template>`](https://vuejs.org/guide/essentials/list.html#v-for-on-template)\n - [Guide - Named slots](https://vuejs.org/guide/components/slots.html#named-slots)\n"
|
|
247
247
|
},
|
|
248
248
|
"attributes": [],
|
|
249
249
|
"references": [
|
|
@@ -279,7 +279,7 @@
|
|
|
279
279
|
"name": "v-text",
|
|
280
280
|
"description": {
|
|
281
281
|
"kind": "markdown",
|
|
282
|
-
"value": "\nUpdate the element's text content.\n\n- **Expects:** `string`\n\n- **Details**\n\n `v-text` works by setting the element's [textContent](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) property, so it will overwrite any existing content inside the element. If you need to update the part of `textContent`, you should use [mustache interpolations](https://vuejs.org/guide/essentials/template-syntax.html#text-interpolation) instead.\n\n- **Example**\n\n ```html\n <span v-text=\"msg\"></span>\n <!-- same as -->\n <span>{{msg}}</span>\n ```\n\n- **See also
|
|
282
|
+
"value": "\nUpdate the element's text content.\n\n- **Expects:** `string`\n\n- **Details**\n\n `v-text` works by setting the element's [textContent](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) property, so it will overwrite any existing content inside the element. If you need to update the part of `textContent`, you should use [mustache interpolations](https://vuejs.org/guide/essentials/template-syntax.html#text-interpolation) instead.\n\n- **Example**\n\n ```html\n <span v-text=\"msg\"></span>\n <!-- same as -->\n <span>{{msg}}</span>\n ```\n\n- **See also** [Template Syntax - Text Interpolation](https://vuejs.org/guide/essentials/template-syntax.html#text-interpolation)\n"
|
|
283
283
|
},
|
|
284
284
|
"references": [
|
|
285
285
|
{
|
|
@@ -312,7 +312,7 @@
|
|
|
312
312
|
"name": "v-html",
|
|
313
313
|
"description": {
|
|
314
314
|
"kind": "markdown",
|
|
315
|
-
"value": "\nUpdate the element's [innerHTML](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML).\n\n- **Expects:** `string`\n\n- **Details
|
|
315
|
+
"value": "\nUpdate the element's [innerHTML](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML).\n\n- **Expects:** `string`\n\n- **Details**\n\n Contents of `v-html` are inserted as plain HTML - Vue template syntax will not be processed. If you find yourself trying to compose templates using `v-html`, try to rethink the solution by using components instead.\n\n ::: warning Security Note\n Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting). Only use `v-html` on trusted content and **never** on user-provided content.\n :::\n\n In [Single-File Components](https://vuejs.org/guide/scaling-up/sfc.html), `scoped` styles will not apply to content inside `v-html`, because that HTML is not processed by Vue's template compiler. If you want to target `v-html` content with scoped CSS, you can instead use [CSS modules](./sfc-css-features#css-modules) or an additional, global `<style>` element with a manual scoping strategy such as BEM.\n\n- **Example**\n\n ```html\n <div v-html=\"html\"></div>\n ```\n\n- **See also** [Template Syntax - Raw HTML](https://vuejs.org/guide/essentials/template-syntax.html#raw-html)\n"
|
|
316
316
|
},
|
|
317
317
|
"references": [
|
|
318
318
|
{
|
|
@@ -345,7 +345,7 @@
|
|
|
345
345
|
"name": "v-show",
|
|
346
346
|
"description": {
|
|
347
347
|
"kind": "markdown",
|
|
348
|
-
"value": "\nToggle the element's visibility based on the truthy-ness of the expression value.\n\n- **Expects:** `any`\n\n- **Details**\n\n `v-show` works by setting the `display` CSS property via inline styles, and will try to respect the initial `display` value when the element is visible. It also triggers transitions when its condition changes.\n\n- **See also
|
|
348
|
+
"value": "\nToggle the element's visibility based on the truthy-ness of the expression value.\n\n- **Expects:** `any`\n\n- **Details**\n\n `v-show` works by setting the `display` CSS property via inline styles, and will try to respect the initial `display` value when the element is visible. It also triggers transitions when its condition changes.\n\n- **See also** [Conditional Rendering - v-show](https://vuejs.org/guide/essentials/conditional.html#v-show)\n"
|
|
349
349
|
},
|
|
350
350
|
"references": [
|
|
351
351
|
{
|
|
@@ -378,7 +378,7 @@
|
|
|
378
378
|
"name": "v-if",
|
|
379
379
|
"description": {
|
|
380
380
|
"kind": "markdown",
|
|
381
|
-
"value": "\nConditionally render an element or a template fragment based on the truthy-ness of the expression value.\n\n- **Expects:** `any`\n\n- **Details**\n\n When a `v-if` element is toggled, the element and its contained directives / components are destroyed and re-constructed. If the initial condition is falsy, then the inner content won't be rendered at all.\n\n Can be used on `<template>` to denote a conditional block containing only text or multiple elements.\n\n This directive triggers transitions when its condition changes.\n\n When used together, `v-if` has a higher priority than `v-for`. We don't recommend using these two directives together on one element — see the [list rendering guide](https://vuejs.org/guide/essentials/list.html#v-for-with-v-if) for details.\n\n- **See also
|
|
381
|
+
"value": "\nConditionally render an element or a template fragment based on the truthy-ness of the expression value.\n\n- **Expects:** `any`\n\n- **Details**\n\n When a `v-if` element is toggled, the element and its contained directives / components are destroyed and re-constructed. If the initial condition is falsy, then the inner content won't be rendered at all.\n\n Can be used on `<template>` to denote a conditional block containing only text or multiple elements.\n\n This directive triggers transitions when its condition changes.\n\n When used together, `v-if` has a higher priority than `v-for`. We don't recommend using these two directives together on one element — see the [list rendering guide](https://vuejs.org/guide/essentials/list.html#v-for-with-v-if) for details.\n\n- **See also** [Conditional Rendering - v-if](https://vuejs.org/guide/essentials/conditional.html#v-if)\n"
|
|
382
382
|
},
|
|
383
383
|
"references": [
|
|
384
384
|
{
|
|
@@ -412,7 +412,7 @@
|
|
|
412
412
|
"valueSet": "v",
|
|
413
413
|
"description": {
|
|
414
414
|
"kind": "markdown",
|
|
415
|
-
"value": "\nDenote the \"else block\" for `v-if` or a `v-if` / `v-else-if` chain.\n\n- **Does not expect expression**\n\n- **Details**\n\n - Restriction: previous sibling element must have `v-if` or `v-else-if`.\n\n - Can be used on `<template>` to denote a conditional block containing only text or multiple elements.\n\n- **Example**\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- **See also
|
|
415
|
+
"value": "\nDenote the \"else block\" for `v-if` or a `v-if` / `v-else-if` chain.\n\n- **Does not expect expression**\n\n- **Details**\n\n - Restriction: previous sibling element must have `v-if` or `v-else-if`.\n\n - Can be used on `<template>` to denote a conditional block containing only text or multiple elements.\n\n- **Example**\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- **See also** [Conditional Rendering - v-else](https://vuejs.org/guide/essentials/conditional.html#v-else)\n"
|
|
416
416
|
},
|
|
417
417
|
"references": [
|
|
418
418
|
{
|
|
@@ -445,7 +445,7 @@
|
|
|
445
445
|
"name": "v-else-if",
|
|
446
446
|
"description": {
|
|
447
447
|
"kind": "markdown",
|
|
448
|
-
"value": "\nDenote the \"else if block\" for `v-if`. Can be chained.\n\n- **Expects:** `any`\n\n- **Details**\n\n - Restriction: previous sibling element must have `v-if` or `v-else-if`.\n\n - Can be used on `<template>` to denote a conditional block containing only text or multiple elements.\n\n- **Example**\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- **See also
|
|
448
|
+
"value": "\nDenote the \"else if block\" for `v-if`. Can be chained.\n\n- **Expects:** `any`\n\n- **Details**\n\n - Restriction: previous sibling element must have `v-if` or `v-else-if`.\n\n - Can be used on `<template>` to denote a conditional block containing only text or multiple elements.\n\n- **Example**\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- **See also** [Conditional Rendering - v-else-if](https://vuejs.org/guide/essentials/conditional.html#v-else-if)\n"
|
|
449
449
|
},
|
|
450
450
|
"references": [
|
|
451
451
|
{
|
|
@@ -478,7 +478,7 @@
|
|
|
478
478
|
"name": "v-for",
|
|
479
479
|
"description": {
|
|
480
480
|
"kind": "markdown",
|
|
481
|
-
"value": "\nRender the element or template block multiple times based on the source data.\n\n- **Expects:** `Array | Object | number | string | Iterable`\n\n- **Details**\n\n The directive's value must use the special syntax `alias in expression` to provide an alias for the current element being iterated on:\n\n ```html\n <div v-for=\"item in items\">\n {{ item.text }}\n </div>\n ```\n\n Alternatively, you can also specify an alias for the index (or the key if used on an 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 The default behavior of `v-for` will try to patch the elements in-place without moving them. To force it to reorder elements, you should provide an ordering hint with the `key` special attribute:\n\n ```html\n <div v-for=\"item in items\" :key=\"item.id\">\n {{ item.text }}\n </div>\n ```\n\n `v-for` can also work on values that implement the [Iterable Protocol](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol), including native `Map` and `Set`.\n\n- **See also
|
|
481
|
+
"value": "\nRender the element or template block multiple times based on the source data.\n\n- **Expects:** `Array | Object | number | string | Iterable`\n\n- **Details**\n\n The directive's value must use the special syntax `alias in expression` to provide an alias for the current element being iterated on:\n\n ```html\n <div v-for=\"item in items\">\n {{ item.text }}\n </div>\n ```\n\n Alternatively, you can also specify an alias for the index (or the key if used on an 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 The default behavior of `v-for` will try to patch the elements in-place without moving them. To force it to reorder elements, you should provide an ordering hint with the `key` special attribute:\n\n ```html\n <div v-for=\"item in items\" :key=\"item.id\">\n {{ item.text }}\n </div>\n ```\n\n `v-for` can also work on values that implement the [Iterable Protocol](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol), including native `Map` and `Set`.\n\n- **See also**\n - [List Rendering](https://vuejs.org/guide/essentials/list.html)\n"
|
|
482
482
|
},
|
|
483
483
|
"references": [
|
|
484
484
|
{
|
|
@@ -511,7 +511,7 @@
|
|
|
511
511
|
"name": "v-on",
|
|
512
512
|
"description": {
|
|
513
513
|
"kind": "markdown",
|
|
514
|
-
"value": "\nAttach an event listener to the element.\n\n- **Shorthand:** `@`\n\n- **Expects:** `Function | Inline Statement | Object (without argument)`\n\n- **Argument:** `event` (optional if using Object syntax)\n\n- **Modifiers
|
|
514
|
+
"value": "\nAttach an event listener to the element.\n\n- **Shorthand:** `@`\n\n- **Expects:** `Function | Inline Statement | Object (without argument)`\n\n- **Argument:** `event` (optional if using Object syntax)\n\n- **Modifiers**\n\n - `.stop` - call `event.stopPropagation()`.\n - `.prevent` - call `event.preventDefault()`.\n - `.capture` - add event listener in capture mode.\n - `.self` - only trigger handler if event was dispatched from this element.\n - `.{keyAlias}` - only trigger handler on certain keys.\n - `.once` - trigger handler at most once.\n - `.left` - only trigger handler for left button mouse events.\n - `.right` - only trigger handler for right button mouse events.\n - `.middle` - only trigger handler for middle button mouse events.\n - `.passive` - attaches a DOM event with `{ passive: true }`.\n\n- **Details**\n\n The event type is denoted by the argument. The expression can be a method name, an inline statement, or omitted if there are modifiers present.\n\n When used on a normal element, it listens to [**native DOM events**](https://developer.mozilla.org/en-US/docs/Web/Events) only. When used on a custom element component, it listens to **custom events** emitted on that child component.\n\n When listening to native DOM events, the method receives the native event as the only argument. If using inline statement, the statement has access to the special `$event` property: `v-on:click=\"handle('ok', $event)\"`.\n\n `v-on` also supports binding to an object of event / listener pairs without an argument. Note when using the object syntax, it does not support any modifiers.\n\n- **Example**\n\n ```html\n <!-- method handler -->\n <button v-on:click=\"doThis\"></button>\n\n <!-- dynamic event -->\n <button v-on:[event]=\"doThis\"></button>\n\n <!-- inline statement -->\n <button v-on:click=\"doThat('hello', $event)\"></button>\n\n <!-- shorthand -->\n <button @click=\"doThis\"></button>\n\n <!-- shorthand dynamic event -->\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 without expression -->\n <form @submit.prevent></form>\n\n <!-- chain modifiers -->\n <button @click.stop.prevent=\"doThis\"></button>\n\n <!-- key modifier using keyAlias -->\n <input @keyup.enter=\"onEnter\" />\n\n <!-- the click event will be triggered at most once -->\n <button v-on:click.once=\"doThis\"></button>\n\n <!-- object syntax -->\n <button v-on=\"{ mousedown: doThis, mouseup: doThat }\"></button>\n ```\n\n Listening to custom events on a child component (the handler is called when \"my-event\" is emitted on the child):\n\n ```html\n <MyComponent @my-event=\"handleThis\" />\n\n <!-- inline statement -->\n <MyComponent @my-event=\"handleThis(123, $event)\" />\n ```\n\n- **See also**\n - [Event Handling](https://vuejs.org/guide/essentials/event-handling.html)\n - [Components - Custom Events](https://vuejs.org/guide/essentials/component-basics.html#listening-to-events)\n"
|
|
515
515
|
},
|
|
516
516
|
"references": [
|
|
517
517
|
{
|
|
@@ -544,7 +544,7 @@
|
|
|
544
544
|
"name": "v-bind",
|
|
545
545
|
"description": {
|
|
546
546
|
"kind": "markdown",
|
|
547
|
-
"value": "\nDynamically bind one or more attributes, or a component prop to an expression.\n\n- **Shorthand:** `:` or `.` (when using `.prop` modifier)\n\n- **Expects:** `any (with argument) | Object (without argument)`\n\n- **Argument:** `attrOrProp (optional)`\n\n- **Modifiers
|
|
547
|
+
"value": "\nDynamically bind one or more attributes, or a component prop to an expression.\n\n- **Shorthand:** `:` or `.` (when using `.prop` modifier)\n\n- **Expects:** `any (with argument) | Object (without argument)`\n\n- **Argument:** `attrOrProp (optional)`\n\n- **Modifiers**\n\n - `.camel` - transform the kebab-case attribute name into camelCase.\n - `.prop` - force a binding to be set as a DOM property. <sup class=\"vt-badge\">3.2+</sup>\n - `.attr` - force a binding to be set as a DOM attribute. <sup class=\"vt-badge\">3.2+</sup>\n\n- **Usage**\n\n When used to bind the `class` or `style` attribute, `v-bind` supports additional value types such as Array or Objects. See linked guide section below for more details.\n\n When setting a binding on an element, Vue by default checks whether the element has the key defined as a property using an `in` operator check. If the property is defined, Vue will set the value as a DOM property instead of an attribute. This should work in most cases, but you can override this behavior by explicitly using `.prop` or `.attr` modifiers. This is sometimes necessary, especially when [working with custom elements](https://vuejs.org/guide/extras/web-components.html#passing-dom-properties).\n\n When used for component prop binding, the prop must be properly declared in the child component.\n\n When used without an argument, can be used to bind an object containing attribute name-value pairs.\n\n- **Example**\n\n ```html\n <!-- bind an attribute -->\n <img v-bind:src=\"imageSrc\" />\n\n <!-- dynamic attribute name -->\n <button v-bind:[key]=\"value\"></button>\n\n <!-- shorthand -->\n <img :src=\"imageSrc\" />\n\n <!-- shorthand dynamic attribute name -->\n <button :[key]=\"value\"></button>\n\n <!-- with inline string concatenation -->\n <img :src=\"'/path/to/images/' + fileName\" />\n\n <!-- class binding -->\n <div :class=\"{ red: isRed }\"></div>\n <div :class=\"[classA, classB]\"></div>\n <div :class=\"[classA, { classB: isB, classC: isC }]\"></div>\n\n <!-- style binding -->\n <div :style=\"{ fontSize: size + 'px' }\"></div>\n <div :style=\"[styleObjectA, styleObjectB]\"></div>\n\n <!-- binding an object of attributes -->\n <div v-bind=\"{ id: someProp, 'other-attr': otherProp }\"></div>\n\n <!-- prop binding. \"prop\" must be declared in the child component. -->\n <MyComponent :prop=\"someThing\" />\n\n <!-- pass down parent props in common with a child component -->\n <MyComponent v-bind=\"$props\" />\n\n <!-- XLink -->\n <svg><a :xlink:special=\"foo\"></a></svg>\n ```\n\n The `.prop` modifier also has a dedicated shorthand, `.`:\n\n ```html\n <div :someProperty.prop=\"someObject\"></div>\n\n <!-- equivalent to -->\n <div .someProperty=\"someObject\"></div>\n ```\n\n The `.camel` modifier allows camelizing a `v-bind` attribute name when using in-DOM templates, e.g. the SVG `viewBox` attribute:\n\n ```html\n <svg :view-box.camel=\"viewBox\"></svg>\n ```\n\n `.camel` is not needed if you are using string templates, or pre-compiling the template with a build step.\n\n- **See also**\n - [Class and Style Bindings](https://vuejs.org/guide/essentials/class-and-style.html)\n - [Components - Prop Passing Details](https://vuejs.org/guide/components/props.html#prop-passing-details)\n"
|
|
548
548
|
},
|
|
549
549
|
"references": [
|
|
550
550
|
{
|
|
@@ -577,7 +577,7 @@
|
|
|
577
577
|
"name": "v-model",
|
|
578
578
|
"description": {
|
|
579
579
|
"kind": "markdown",
|
|
580
|
-
"value": "\nCreate a two-way binding on a form input element or a component.\n\n- **Expects:** varies based on value of form inputs element or output of components\n\n- **Limited to:**\n\n - `<input>`\n - `<select>`\n - `<textarea>`\n - components\n\n- **Modifiers
|
|
580
|
+
"value": "\nCreate a two-way binding on a form input element or a component.\n\n- **Expects:** varies based on value of form inputs element or output of components\n\n- **Limited to:**\n\n - `<input>`\n - `<select>`\n - `<textarea>`\n - components\n\n- **Modifiers**\n\n - [`.lazy`](https://vuejs.org/guide/essentials/forms.html#lazy) - listen to `change` events instead of `input`\n - [`.number`](https://vuejs.org/guide/essentials/forms.html#number) - cast valid input string to numbers\n - [`.trim`](https://vuejs.org/guide/essentials/forms.html#trim) - trim input\n\n- **See also**\n\n - [Form Input Bindings](https://vuejs.org/guide/essentials/forms.html)\n - [Component Events - Usage with `v-model`](https://vuejs.org/guide/components/v-model.html)\n"
|
|
581
581
|
},
|
|
582
582
|
"references": [
|
|
583
583
|
{
|
|
@@ -610,7 +610,7 @@
|
|
|
610
610
|
"name": "v-slot",
|
|
611
611
|
"description": {
|
|
612
612
|
"kind": "markdown",
|
|
613
|
-
"value": "\nDenote named slots or scoped slots that expect to receive props.\n\n- **Shorthand:** `#`\n\n- **Expects:** JavaScript expression that is valid in a function argument position, including support for destructuring. Optional - only needed if expecting props to be passed to the slot.\n\n- **Argument:** slot name (optional, defaults to `default`)\n\n- **Limited to:**\n\n - `<template>`\n - [components](https://vuejs.org/guide/components/slots.html#scoped-slots) (for a lone default slot with props)\n\n- **Example
|
|
613
|
+
"value": "\nDenote named slots or scoped slots that expect to receive props.\n\n- **Shorthand:** `#`\n\n- **Expects:** JavaScript expression that is valid in a function argument position, including support for destructuring. Optional - only needed if expecting props to be passed to the slot.\n\n- **Argument:** slot name (optional, defaults to `default`)\n\n- **Limited to:**\n\n - `<template>`\n - [components](https://vuejs.org/guide/components/slots.html#scoped-slots) (for a lone default slot with props)\n\n- **Example**\n\n ```html\n <!-- Named slots -->\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 <!-- Named slot that receives 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 <!-- Default slot that receive props, with destructuring -->\n <Mouse v-slot=\"{ x, y }\">\n Mouse position: {{ x }}, {{ y }}\n </Mouse>\n ```\n\n- **See also**\n - [Components - Slots](https://vuejs.org/guide/components/slots.html)\n"
|
|
614
614
|
},
|
|
615
615
|
"references": [
|
|
616
616
|
{
|
|
@@ -643,7 +643,7 @@
|
|
|
643
643
|
"name": "v-pre",
|
|
644
644
|
"description": {
|
|
645
645
|
"kind": "markdown",
|
|
646
|
-
"value": "\nSkip compilation for this element and all its children.\n\n- **Does not expect expression**\n\n- **Details**\n\n Inside the element with `v-pre`, all Vue template syntax will be preserved and rendered as-is. The most common use case of this is displaying raw mustache tags.\n\n- **Example
|
|
646
|
+
"value": "\nSkip compilation for this element and all its children.\n\n- **Does not expect expression**\n\n- **Details**\n\n Inside the element with `v-pre`, all Vue template syntax will be preserved and rendered as-is. The most common use case of this is displaying raw mustache tags.\n\n- **Example**\n\n ```html\n <span v-pre>{{ this will not be compiled }}</span>\n ```\n"
|
|
647
647
|
},
|
|
648
648
|
"references": [
|
|
649
649
|
{
|
|
@@ -676,7 +676,7 @@
|
|
|
676
676
|
"name": "v-once",
|
|
677
677
|
"description": {
|
|
678
678
|
"kind": "markdown",
|
|
679
|
-
"value": "\nRender the element and component once only, and skip future updates.\n\n- **Does not expect expression**\n\n- **Details**\n\n On subsequent re-renders, the element/component and all its children will be treated as static content and skipped. This can be used to optimize update performance.\n\n ```html\n <!-- single element -->\n <span v-once>This will never change: {{msg}}</span>\n <!-- the element have children -->\n <div v-once>\n <h1>comment</h1>\n <p>{{msg}}</p>\n </div>\n <!-- component -->\n <MyComponent v-once :comment=\"msg\"></MyComponent>\n <!-- `v-for` directive -->\n <ul>\n <li v-for=\"i in list\" v-once>{{i}}</li>\n </ul>\n ```\n\n Since 3.2, you can also memoize part of the template with invalidation conditions using [`v-memo`](#v-memo).\n\n- **See also
|
|
679
|
+
"value": "\nRender the element and component once only, and skip future updates.\n\n- **Does not expect expression**\n\n- **Details**\n\n On subsequent re-renders, the element/component and all its children will be treated as static content and skipped. This can be used to optimize update performance.\n\n ```html\n <!-- single element -->\n <span v-once>This will never change: {{msg}}</span>\n <!-- the element have children -->\n <div v-once>\n <h1>comment</h1>\n <p>{{msg}}</p>\n </div>\n <!-- component -->\n <MyComponent v-once :comment=\"msg\"></MyComponent>\n <!-- `v-for` directive -->\n <ul>\n <li v-for=\"i in list\" v-once>{{i}}</li>\n </ul>\n ```\n\n Since 3.2, you can also memoize part of the template with invalidation conditions using [`v-memo`](#v-memo).\n\n- **See also**\n - [Data Binding Syntax - interpolations](https://vuejs.org/guide/essentials/template-syntax.html#text-interpolation)\n - [v-memo](#v-memo)\n"
|
|
680
680
|
},
|
|
681
681
|
"references": [
|
|
682
682
|
{
|
|
@@ -709,7 +709,7 @@
|
|
|
709
709
|
"name": "v-memo",
|
|
710
710
|
"description": {
|
|
711
711
|
"kind": "markdown",
|
|
712
|
-
"value": "\n- **Expects:** `any[]`\n\n- **Details**\n\n Memoize a sub-tree of the template. Can be used on both elements and components. The directive expects a fixed-length array of dependency values to compare for the memoization. If every value in the array was the same as last render, then updates for the entire sub-tree will be skipped. For example:\n\n ```html\n <div v-memo=\"[valueA, valueB]\">\n ...\n </div>\n ```\n\n When the component re-renders, if both `valueA` and `valueB` remain the same, all updates for this `<div>` and its children will be skipped. In fact, even the Virtual DOM VNode creation will also be skipped since the memoized copy of the sub-tree can be reused.\n\n It is important to specify the memoization array correctly, otherwise we may skip updates that should indeed be applied. `v-memo` with an empty dependency array (`v-memo=\"[]\"`) would be functionally equivalent to `v-once`.\n\n **Usage with `v-for`**\n\n `v-memo` is provided solely for micro optimizations in performance-critical scenarios and should be rarely needed. The most common case where this may prove helpful is when rendering large `v-for` lists (where `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 When the component's `selected` state changes, a large amount of VNodes will be created even though most of the items remained exactly the same. The `v-memo` usage here is essentially saying \"only update this item if it went from non-selected to selected, or the other way around\". This allows every unaffected item to reuse its previous VNode and skip diffing entirely. Note we don't need to include `item.id` in the memo dependency array here since Vue automatically infers it from the item's `:key`.\n\n :::warning\n When using `v-memo` with `v-for`, make sure they are used on the same element. **`v-memo` does not work inside `v-for`.**\n :::\n\n `v-memo` can also be used on components to manually prevent unwanted updates in certain edge cases where the child component update check has been de-optimized. But again, it is the developer's responsibility to specify correct dependency arrays to avoid skipping necessary updates.\n\n- **See also
|
|
712
|
+
"value": "\n- **Expects:** `any[]`\n\n- **Details**\n\n Memoize a sub-tree of the template. Can be used on both elements and components. The directive expects a fixed-length array of dependency values to compare for the memoization. If every value in the array was the same as last render, then updates for the entire sub-tree will be skipped. For example:\n\n ```html\n <div v-memo=\"[valueA, valueB]\">\n ...\n </div>\n ```\n\n When the component re-renders, if both `valueA` and `valueB` remain the same, all updates for this `<div>` and its children will be skipped. In fact, even the Virtual DOM VNode creation will also be skipped since the memoized copy of the sub-tree can be reused.\n\n It is important to specify the memoization array correctly, otherwise we may skip updates that should indeed be applied. `v-memo` with an empty dependency array (`v-memo=\"[]\"`) would be functionally equivalent to `v-once`.\n\n **Usage with `v-for`**\n\n `v-memo` is provided solely for micro optimizations in performance-critical scenarios and should be rarely needed. The most common case where this may prove helpful is when rendering large `v-for` lists (where `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 When the component's `selected` state changes, a large amount of VNodes will be created even though most of the items remained exactly the same. The `v-memo` usage here is essentially saying \"only update this item if it went from non-selected to selected, or the other way around\". This allows every unaffected item to reuse its previous VNode and skip diffing entirely. Note we don't need to include `item.id` in the memo dependency array here since Vue automatically infers it from the item's `:key`.\n\n :::warning\n When using `v-memo` with `v-for`, make sure they are used on the same element. **`v-memo` does not work inside `v-for`.**\n :::\n\n `v-memo` can also be used on components to manually prevent unwanted updates in certain edge cases where the child component update check has been de-optimized. But again, it is the developer's responsibility to specify correct dependency arrays to avoid skipping necessary updates.\n\n- **See also**\n - [v-once](#v-once)\n"
|
|
713
713
|
},
|
|
714
714
|
"references": [
|
|
715
715
|
{
|
|
@@ -742,7 +742,7 @@
|
|
|
742
742
|
"name": "v-cloak",
|
|
743
743
|
"description": {
|
|
744
744
|
"kind": "markdown",
|
|
745
|
-
"value": "\nUsed to hide un-compiled template until it is ready.\n\n- **Does not expect expression**\n\n- **Details**\n\n **This directive is only needed in no-build-step setups.**\n\n When using in-DOM templates, there can be a \"flash of un-compiled templates\": the user may see raw mustache tags until the mounted component replaces them with rendered content.\n\n `v-cloak` will remain on the element until the associated component instance is mounted. Combined with CSS rules such as `[v-cloak] { display: none }`, it can be used to hide the raw templates until the component is ready.\n\n- **Example
|
|
745
|
+
"value": "\nUsed to hide un-compiled template until it is ready.\n\n- **Does not expect expression**\n\n- **Details**\n\n **This directive is only needed in no-build-step setups.**\n\n When using in-DOM templates, there can be a \"flash of un-compiled templates\": the user may see raw mustache tags until the mounted component replaces them with rendered content.\n\n `v-cloak` will remain on the element until the associated component instance is mounted. Combined with CSS rules such as `[v-cloak] { display: none }`, it can be used to hide the raw templates until the component is ready.\n\n- **Example**\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 The `<div>` will not be visible until the compilation is done.\n"
|
|
746
746
|
},
|
|
747
747
|
"references": [
|
|
748
748
|
{
|
|
@@ -775,7 +775,7 @@
|
|
|
775
775
|
"name": "key",
|
|
776
776
|
"description": {
|
|
777
777
|
"kind": "markdown",
|
|
778
|
-
"value": "\nThe `key` special attribute is primarily used as a hint for Vue's virtual DOM algorithm to identify vnodes when diffing the new list of nodes against the old list.\n\n- **Expects:** `number | string | symbol`\n\n- **Details**\n\n Without keys, Vue uses an algorithm that minimizes element movement and tries to patch/reuse elements of the same type in-place as much as possible. With keys, it will reorder elements based on the order change of keys, and elements with keys that are no longer present will always be removed / destroyed.\n\n Children of the same common parent must have **unique keys**. Duplicate keys will cause render errors.\n\n The most common use case is combined with `v-for`:\n\n ```html\n <ul>\n <li v-for=\"item in items\" :key=\"item.id\">...</li>\n </ul>\n ```\n\n It can also be used to force replacement of an element/component instead of reusing it. This can be useful when you want to:\n\n - Properly trigger lifecycle hooks of a component\n - Trigger transitions\n\n For example:\n\n ```html\n <transition>\n <span :key=\"text\">{{ text }}</span>\n </transition>\n ```\n\n When `text` changes, the `<span>` will always be replaced instead of patched, so a transition will be triggered.\n\n- **See also
|
|
778
|
+
"value": "\nThe `key` special attribute is primarily used as a hint for Vue's virtual DOM algorithm to identify vnodes when diffing the new list of nodes against the old list.\n\n- **Expects:** `number | string | symbol`\n\n- **Details**\n\n Without keys, Vue uses an algorithm that minimizes element movement and tries to patch/reuse elements of the same type in-place as much as possible. With keys, it will reorder elements based on the order change of keys, and elements with keys that are no longer present will always be removed / destroyed.\n\n Children of the same common parent must have **unique keys**. Duplicate keys will cause render errors.\n\n The most common use case is combined with `v-for`:\n\n ```html\n <ul>\n <li v-for=\"item in items\" :key=\"item.id\">...</li>\n </ul>\n ```\n\n It can also be used to force replacement of an element/component instead of reusing it. This can be useful when you want to:\n\n - Properly trigger lifecycle hooks of a component\n - Trigger transitions\n\n For example:\n\n ```html\n <transition>\n <span :key=\"text\">{{ text }}</span>\n </transition>\n ```\n\n When `text` changes, the `<span>` will always be replaced instead of patched, so a transition will be triggered.\n\n- **See also** [Guide - List Rendering - Maintaining State with `key`](https://vuejs.org/guide/essentials/list.html#maintaining-state-with-key)\n"
|
|
779
779
|
},
|
|
780
780
|
"references": [
|
|
781
781
|
{
|
|
@@ -808,7 +808,7 @@
|
|
|
808
808
|
"name": "ref",
|
|
809
809
|
"description": {
|
|
810
810
|
"kind": "markdown",
|
|
811
|
-
"value": "\nDenotes a [template ref](https://vuejs.org/guide/essentials/template-refs.html).\n\n- **Expects:** `string | Function`\n\n- **Details**\n\n `ref` is used to register a reference to an element or a child component.\n\n In Options API, the reference will be registered under the component's `this.$refs` object:\n\n ```html\n <!-- stored as this.$refs.p -->\n <p ref=\"p\">hello</p>\n ```\n\n In Composition API, the reference will be stored in a ref with matching name:\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 If used on a plain DOM element, the reference will be that element; if used on a child component, the reference will be the child component instance.\n\n Alternatively `ref` can accept a function value which provides full control over where to store the reference:\n\n ```html\n <ChildComponent :ref=\"(el) => child = el\" />\n ```\n\n An important note about the ref registration timing: because the refs themselves are created as a result of the render function, you must wait until the component is mounted before accessing them.\n\n `this.$refs` is also non-reactive, therefore you should not attempt to use it in templates for data-binding.\n\n- **See also
|
|
811
|
+
"value": "\nDenotes a [template ref](https://vuejs.org/guide/essentials/template-refs.html).\n\n- **Expects:** `string | Function`\n\n- **Details**\n\n `ref` is used to register a reference to an element or a child component.\n\n In Options API, the reference will be registered under the component's `this.$refs` object:\n\n ```html\n <!-- stored as this.$refs.p -->\n <p ref=\"p\">hello</p>\n ```\n\n In Composition API, the reference will be stored in a ref with matching name:\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 If used on a plain DOM element, the reference will be that element; if used on a child component, the reference will be the child component instance.\n\n Alternatively `ref` can accept a function value which provides full control over where to store the reference:\n\n ```html\n <ChildComponent :ref=\"(el) => child = el\" />\n ```\n\n An important note about the ref registration timing: because the refs themselves are created as a result of the render function, you must wait until the component is mounted before accessing them.\n\n `this.$refs` is also non-reactive, therefore you should not attempt to use it in templates for data-binding.\n\n- **See also**\n - [Guide - Template Refs](https://vuejs.org/guide/essentials/template-refs.html)\n - [Guide - Typing Template Refs](https://vuejs.org/guide/typescript/composition-api.html#typing-template-refs) <sup class=\"vt-badge ts\" />\n - [Guide - Typing Component Template Refs](https://vuejs.org/guide/typescript/composition-api.html#typing-component-template-refs) <sup class=\"vt-badge ts\" />\n"
|
|
812
812
|
},
|
|
813
813
|
"references": [
|
|
814
814
|
{
|
|
@@ -841,7 +841,7 @@
|
|
|
841
841
|
"name": "is",
|
|
842
842
|
"description": {
|
|
843
843
|
"kind": "markdown",
|
|
844
|
-
"value": "\nUsed for binding [dynamic components](https://vuejs.org/guide/essentials/component-basics.html#dynamic-components).\n\n- **Expects:** `string | Component`\n\n- **Usage on native elements** <sup class=\"vt-badge\">3.1+</sup>\n\n When the `is` attribute is used on a native HTML element, it will be interpreted as a [Customized built-in element](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-customized-builtin-example), which is a native web platform feature.\n\n There is, however, a use case where you may need Vue to replace a native element with a Vue component, as explained in [DOM Template Parsing Caveats](https://vuejs.org/guide/essentials/component-basics.html#dom-template-parsing-caveats). You can prefix the value of the `is` attribute with `vue:` so that Vue will render the element as a Vue component instead:\n\n ```html\n <table>\n <tr is=\"vue:my-row-component\"></tr>\n </table>\n ```\n\n- **See also
|
|
844
|
+
"value": "\nUsed for binding [dynamic components](https://vuejs.org/guide/essentials/component-basics.html#dynamic-components).\n\n- **Expects:** `string | Component`\n\n- **Usage on native elements** <sup class=\"vt-badge\">3.1+</sup>\n\n When the `is` attribute is used on a native HTML element, it will be interpreted as a [Customized built-in element](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-customized-builtin-example), which is a native web platform feature.\n\n There is, however, a use case where you may need Vue to replace a native element with a Vue component, as explained in [DOM Template Parsing Caveats](https://vuejs.org/guide/essentials/component-basics.html#dom-template-parsing-caveats). You can prefix the value of the `is` attribute with `vue:` so that Vue will render the element as a Vue component instead:\n\n ```html\n <table>\n <tr is=\"vue:my-row-component\"></tr>\n </table>\n ```\n\n- **See also**\n\n - [Built-in Special Element - `<component>`](https://vuejs.org/api/built-in-special-elements.html#component)\n - [Dynamic Components](https://vuejs.org/guide/essentials/component-basics.html#dynamic-components)\n"
|
|
845
845
|
},
|
|
846
846
|
"references": [
|
|
847
847
|
{
|
package/data/template/ja.json
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
"name": "Transition",
|
|
6
6
|
"description": {
|
|
7
7
|
"kind": "markdown",
|
|
8
|
-
"value": "\n**単一の**要素またはコンポーネントにアニメーションのトランジションを提供します。\n\n- **プロパティ**\n\n ```ts\n interface TransitionProps {\n /**\n * トランジションの CSS クラス名を自動生成するために使用します。\n * 例: `name: 'fade'` は `.fade-enter` や `.fade-enter-active`\n * などに自動展開されます。\n */\n name?: string\n /**\n * CSS のトランジションクラスを適用するかどうか。\n * デフォルト: true\n */\n css?: boolean\n /**\n * トランジション終了タイミングを決定するために待機する、\n * トランジションイベントの種類を指定します。\n * デフォルトの動作は、持続時間がより長い方のタイプを\n * 自動検出します。\n */\n type?: 'transition' | 'animation'\n /**\n * トランジションの持続時間を明示的に指定します。\n * デフォルトの動作は、ルートトランジション要素の最初の\n * `transitionend` または `animationend` イベントを待ちます。\n */\n duration?: number | { enter: number; leave: number }\n /**\n * leaving/entering トランジションのタイミングシーケンスを制御。\n * デフォルトの動作は同時です。\n */\n mode?: 'in-out' | 'out-in' | 'default'\n /**\n * 初回レンダリング時にトランジションを適用するかどうか。\n * デフォルト: false\n */\n appear?: boolean\n\n /**\n * トランジションクラスをカスタマイズするためのプロパティ。\n * テンプレートでは kebab-case を使用（例: enter-from-class=\"xxx\"）\n */\n enterFromClass?: string\n enterActiveClass?: string\n enterToClass?: string\n appearFromClass?: string\n appearActiveClass?: string\n appearToClass?: string\n leaveFromClass?: string\n leaveActiveClass?: string\n leaveToClass?: string\n }\n ```\n\n- **イベント**\n\n - `@before-enter`\n - `@before-leave`\n - `@enter`\n - `@leave`\n - `@appear`\n - `@after-enter`\n - `@after-leave`\n - `@after-appear`\n - `@enter-cancelled`\n - `@leave-cancelled`（`v-show` のみ）\n - `@appear-cancelled`\n\n- **例**\n\n シンプルな要素:\n\n ```html\n <Transition>\n <div v-if=\"ok\">toggled content</div>\n </Transition>\n ```\n\n `key` 属性を変更することで強制的にトランジションさせる:\n
|
|
8
|
+
"value": "\n**単一の**要素またはコンポーネントにアニメーションのトランジションを提供します。\n\n- **プロパティ**\n\n ```ts\n interface TransitionProps {\n /**\n * トランジションの CSS クラス名を自動生成するために使用します。\n * 例: `name: 'fade'` は `.fade-enter` や `.fade-enter-active`\n * などに自動展開されます。\n */\n name?: string\n /**\n * CSS のトランジションクラスを適用するかどうか。\n * デフォルト: true\n */\n css?: boolean\n /**\n * トランジション終了タイミングを決定するために待機する、\n * トランジションイベントの種類を指定します。\n * デフォルトの動作は、持続時間がより長い方のタイプを\n * 自動検出します。\n */\n type?: 'transition' | 'animation'\n /**\n * トランジションの持続時間を明示的に指定します。\n * デフォルトの動作は、ルートトランジション要素の最初の\n * `transitionend` または `animationend` イベントを待ちます。\n */\n duration?: number | { enter: number; leave: number }\n /**\n * leaving/entering トランジションのタイミングシーケンスを制御。\n * デフォルトの動作は同時です。\n */\n mode?: 'in-out' | 'out-in' | 'default'\n /**\n * 初回レンダリング時にトランジションを適用するかどうか。\n * デフォルト: false\n */\n appear?: boolean\n\n /**\n * トランジションクラスをカスタマイズするためのプロパティ。\n * テンプレートでは kebab-case を使用（例: enter-from-class=\"xxx\"）\n */\n enterFromClass?: string\n enterActiveClass?: string\n enterToClass?: string\n appearFromClass?: string\n appearActiveClass?: string\n appearToClass?: string\n leaveFromClass?: string\n leaveActiveClass?: string\n leaveToClass?: string\n }\n ```\n\n- **イベント**\n\n - `@before-enter`\n - `@before-leave`\n - `@enter`\n - `@leave`\n - `@appear`\n - `@after-enter`\n - `@after-leave`\n - `@after-appear`\n - `@enter-cancelled`\n - `@leave-cancelled`（`v-show` のみ）\n - `@appear-cancelled`\n\n- **例**\n\n シンプルな要素:\n\n ```html\n <Transition>\n <div v-if=\"ok\">toggled content</div>\n </Transition>\n ```\n\n `key` 属性を変更することで強制的にトランジションさせる:\n\n ```html\n <Transition>\n <div :key=\"text\">{{ text }}</div>\n </Transition>\n ```\n\n トランジションモードと出現時のアニメーションを備えている動的コンポーネント:\n\n ```html\n <Transition name=\"fade\" mode=\"out-in\" appear>\n <component :is=\"view\"></component>\n </Transition>\n ```\n\n トランジションイベントを購読する:\n\n ```html\n <Transition @after-enter=\"onTransitionComplete\">\n <div v-show=\"ok\">toggled content</div>\n </Transition>\n ```\n\n- **参照** [`<Transition>` ガイド](https://ja.vuejs.org/guide/built-ins/transition.html)\n"
|
|
9
9
|
},
|
|
10
10
|
"attributes": [],
|
|
11
11
|
"references": [
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
"name": "TransitionGroup",
|
|
40
40
|
"description": {
|
|
41
41
|
"kind": "markdown",
|
|
42
|
-
"value": "\nリスト内の**複数**の要素またはコンポーネントにトランジション効果を提供する。\n\n- **プロパティ**\n\n `<TransitionGroup>` は `<Transition>` と同じプロパティ（`mode` 以外）と追加の 2 つのプロパティを受け取ります:\n\n ```ts\n interface TransitionGroupProps extends Omit<TransitionProps, 'mode'> {\n /**\n * 未定義の場合はフラグメントとしてレンダリングされます。\n */\n tag?: string\n /**\n * 移動のトランジション中に適用される CSS クラスのカスタマイズ。\n * テンプレートでは kebab-case を使用（例: move-class=\"xxx\"）\n */\n moveClass?: string\n }\n ```\n\n- **イベント**\n\n `<TransitionGroup>` は `<Transition>` と同じイベントを発行します。\n\n- **詳細**\n\n デフォルトでは、`<TransitionGroup>` はラッパー DOM 要素をレンダリングしませんが、 `tag` プロパティによって定義できます。\n\n アニメーションが正しく動作するためには、`<transition-group>` 内のすべての子に[**一意なキーを指定**](https://ja.vuejs.org/guide/essentials/list.html#maintaining-state-with-key)する必要があることに注意してください。\n\n `<TransitionGroup>` は CSS の transform による移動トランジションに対応しています。更新後に画面上の子の位置が変化した場合、移動用の CSS クラス（`name` 属性から自動生成されるか、`move-class` プロパティで設定）が適用されます。移動用のクラスが適用されたときに、CSS の `transform` プロパティが「トランジション可能」であれば、その要素は [FLIP テクニック](https://aerotwist.com/blog/flip-your-animations/)を使って移動先までスムーズにアニメーションします。\n\n- **例**\n\n ```html\n <TransitionGroup tag=\"ul\" name=\"slide\">\n <li v-for=\"item in items\" :key=\"item.id\">\n {{ item.text }}\n </li>\n </TransitionGroup>\n ```\n\n-
|
|
42
|
+
"value": "\nリスト内の**複数**の要素またはコンポーネントにトランジション効果を提供する。\n\n- **プロパティ**\n\n `<TransitionGroup>` は `<Transition>` と同じプロパティ（`mode` 以外）と追加の 2 つのプロパティを受け取ります:\n\n ```ts\n interface TransitionGroupProps extends Omit<TransitionProps, 'mode'> {\n /**\n * 未定義の場合はフラグメントとしてレンダリングされます。\n */\n tag?: string\n /**\n * 移動のトランジション中に適用される CSS クラスのカスタマイズ。\n * テンプレートでは kebab-case を使用（例: move-class=\"xxx\"）\n */\n moveClass?: string\n }\n ```\n\n- **イベント**\n\n `<TransitionGroup>` は `<Transition>` と同じイベントを発行します。\n\n- **詳細**\n\n デフォルトでは、`<TransitionGroup>` はラッパー DOM 要素をレンダリングしませんが、 `tag` プロパティによって定義できます。\n\n アニメーションが正しく動作するためには、`<transition-group>` 内のすべての子に[**一意なキーを指定**](https://ja.vuejs.org/guide/essentials/list.html#maintaining-state-with-key)する必要があることに注意してください。\n\n `<TransitionGroup>` は CSS の transform による移動トランジションに対応しています。更新後に画面上の子の位置が変化した場合、移動用の CSS クラス（`name` 属性から自動生成されるか、`move-class` プロパティで設定）が適用されます。移動用のクラスが適用されたときに、CSS の `transform` プロパティが「トランジション可能」であれば、その要素は [FLIP テクニック](https://aerotwist.com/blog/flip-your-animations/)を使って移動先までスムーズにアニメーションします。\n\n- **例**\n\n ```html\n <TransitionGroup tag=\"ul\" name=\"slide\">\n <li v-for=\"item in items\" :key=\"item.id\">\n {{ item.text }}\n </li>\n </TransitionGroup>\n ```\n\n- **参照** [ガイド - TransitionGroup](https://ja.vuejs.org/guide/built-ins/transition-group.html)\n"
|
|
43
43
|
},
|
|
44
44
|
"attributes": [],
|
|
45
45
|
"references": [
|
|
@@ -73,7 +73,7 @@
|
|
|
73
73
|
"name": "KeepAlive",
|
|
74
74
|
"description": {
|
|
75
75
|
"kind": "markdown",
|
|
76
|
-
"value": "\n動的に切り替えられる、内側のコンポーネントをキャッシュします。\n\n- **プロパティ**\n\n ```ts\n interface KeepAliveProps {\n /**\n * 指定された場合、`include` でマッチした名前の\n * コンポーネントのみがキャッシュされます。\n */\n include?: MatchPattern\n /**\n * `exclude` でマッチした名前のコンポーネントは\n * キャッシュされません。\n */\n exclude?: MatchPattern\n /**\n * キャッシュするコンポーネントインスタンスの最大数。\n */\n max?: number | string\n }\n\n type MatchPattern = string | RegExp | (string | RegExp)[]\n ```\n\n- **詳細**\n\n 動的コンポーネントをラップすると、`<KeepAlive>` は非アクティブなコンポーネントインスタンスを破棄せずにキャッシュします。\n\n `<KeepAlive>` の直接の子として、アクティブなコンポーネントのインスタンスは常に 1 つだけです。\n\n `<KeepAlive>` の内部でコンポーネントが切り替えられると、その `activated` と `deactivated` ライフサイクルフックが呼び出されます（`mounted` と `unmounted` は呼び出されず、その代わりとして提供されています）。これは `<KeepAlive>` の直接の子だけでなく、そのすべての子孫にも適用されます。\n\n- **例**\n\n 基本的な使い方:\n\n ```html\n <KeepAlive>\n <component :is=\"view\"></component>\n </KeepAlive>\n ```\n\n `v-if` / `v-else` の分岐を使用する場合、一度にレンダリングされるコンポーネントは 1 つだけである必要があります:\n\n ```html\n <KeepAlive>\n <comp-a v-if=\"a > 1\"></comp-a>\n <comp-b v-else></comp-b>\n </KeepAlive>\n ```\n\n `<Transition>` と共に使用:\n\n ```html\n <Transition>\n <KeepAlive>\n <component :is=\"view\"></component>\n </KeepAlive>\n </Transition>\n ```\n\n `include` / `exclude` の使用:\n\n ```html\n <!-- カンマ区切りの文字列 -->\n <KeepAlive include=\"a,b\">\n <component :is=\"view\"></component>\n </KeepAlive>\n\n <!-- 正規表現（`v-bind` を使用） -->\n <KeepAlive :include=\"/a|b/\">\n <component :is=\"view\"></component>\n </KeepAlive>\n\n <!-- 配列（`v-bind` を使用） -->\n <KeepAlive :include=\"['a', 'b']\">\n <component :is=\"view\"></component>\n </KeepAlive>\n ```\n\n `max` の使用:\n\n ```html\n <KeepAlive :max=\"10\">\n <component :is=\"view\"></component>\n </KeepAlive>\n ```\n\n-
|
|
76
|
+
"value": "\n動的に切り替えられる、内側のコンポーネントをキャッシュします。\n\n- **プロパティ**\n\n ```ts\n interface KeepAliveProps {\n /**\n * 指定された場合、`include` でマッチした名前の\n * コンポーネントのみがキャッシュされます。\n */\n include?: MatchPattern\n /**\n * `exclude` でマッチした名前のコンポーネントは\n * キャッシュされません。\n */\n exclude?: MatchPattern\n /**\n * キャッシュするコンポーネントインスタンスの最大数。\n */\n max?: number | string\n }\n\n type MatchPattern = string | RegExp | (string | RegExp)[]\n ```\n\n- **詳細**\n\n 動的コンポーネントをラップすると、`<KeepAlive>` は非アクティブなコンポーネントインスタンスを破棄せずにキャッシュします。\n\n `<KeepAlive>` の直接の子として、アクティブなコンポーネントのインスタンスは常に 1 つだけです。\n\n `<KeepAlive>` の内部でコンポーネントが切り替えられると、その `activated` と `deactivated` ライフサイクルフックが呼び出されます（`mounted` と `unmounted` は呼び出されず、その代わりとして提供されています）。これは `<KeepAlive>` の直接の子だけでなく、そのすべての子孫にも適用されます。\n\n- **例**\n\n 基本的な使い方:\n\n ```html\n <KeepAlive>\n <component :is=\"view\"></component>\n </KeepAlive>\n ```\n\n `v-if` / `v-else` の分岐を使用する場合、一度にレンダリングされるコンポーネントは 1 つだけである必要があります:\n\n ```html\n <KeepAlive>\n <comp-a v-if=\"a > 1\"></comp-a>\n <comp-b v-else></comp-b>\n </KeepAlive>\n ```\n\n `<Transition>` と共に使用:\n\n ```html\n <Transition>\n <KeepAlive>\n <component :is=\"view\"></component>\n </KeepAlive>\n </Transition>\n ```\n\n `include` / `exclude` の使用:\n\n ```html\n <!-- カンマ区切りの文字列 -->\n <KeepAlive include=\"a,b\">\n <component :is=\"view\"></component>\n </KeepAlive>\n\n <!-- 正規表現（`v-bind` を使用） -->\n <KeepAlive :include=\"/a|b/\">\n <component :is=\"view\"></component>\n </KeepAlive>\n\n <!-- 配列（`v-bind` を使用） -->\n <KeepAlive :include=\"['a', 'b']\">\n <component :is=\"view\"></component>\n </KeepAlive>\n ```\n\n `max` の使用:\n\n ```html\n <KeepAlive :max=\"10\">\n <component :is=\"view\"></component>\n </KeepAlive>\n ```\n\n- **参照** [ガイド - KeepAlive](https://ja.vuejs.org/guide/built-ins/keep-alive.html)\n"
|
|
77
77
|
},
|
|
78
78
|
"attributes": [],
|
|
79
79
|
"references": [
|
|
@@ -107,7 +107,7 @@
|
|
|
107
107
|
"name": "Teleport",
|
|
108
108
|
"description": {
|
|
109
109
|
"kind": "markdown",
|
|
110
|
-
"value": "\nスロットの内容を DOM の別の場所にレンダリングします。\n\n- **プロパティ**\n\n ```ts\n interface TeleportProps {\n /**\n * 必須。ターゲットコンテナーを指定します。\n * セレクターまたは実際の要素のいずれかを指定できます。\n */\n to: string | HTMLElement\n /**\n * `true` の場合、コンテンツはターゲットコンテナーに\n * 移動せずに元の場所に残ります。\n * 動的に変更できます。\n */\n disabled?: boolean\n }\n ```\n\n- **例**\n\n ターゲットコンテナーの指定:\n\n ```html\n <teleport to=\"#some-id\" />\n <teleport to=\".some-class\" />\n <teleport to=\"[data-teleport]\" />\n ```\n\n 条件によって無効化:\n\n ```html\n <teleport to=\"#popup\" :disabled=\"displayVideoInline\">\n <video src=\"./my-movie.mp4\">\n </teleport>\n ```\n\n-
|
|
110
|
+
"value": "\nスロットの内容を DOM の別の場所にレンダリングします。\n\n- **プロパティ**\n\n ```ts\n interface TeleportProps {\n /**\n * 必須。ターゲットコンテナーを指定します。\n * セレクターまたは実際の要素のいずれかを指定できます。\n */\n to: string | HTMLElement\n /**\n * `true` の場合、コンテンツはターゲットコンテナーに\n * 移動せずに元の場所に残ります。\n * 動的に変更できます。\n */\n disabled?: boolean\n }\n ```\n\n- **例**\n\n ターゲットコンテナーの指定:\n\n ```html\n <teleport to=\"#some-id\" />\n <teleport to=\".some-class\" />\n <teleport to=\"[data-teleport]\" />\n ```\n\n 条件によって無効化:\n\n ```html\n <teleport to=\"#popup\" :disabled=\"displayVideoInline\">\n <video src=\"./my-movie.mp4\">\n </teleport>\n ```\n\n- **参照** [ガイド - Teleport](https://ja.vuejs.org/guide/built-ins/teleport.html)\n"
|
|
111
111
|
},
|
|
112
112
|
"attributes": [],
|
|
113
113
|
"references": [
|
|
@@ -141,7 +141,7 @@
|
|
|
141
141
|
"name": "Suspense",
|
|
142
142
|
"description": {
|
|
143
143
|
"kind": "markdown",
|
|
144
|
-
"value": "\nコンポーネントツリー内のネストした非同期な依存関係を管理するために使用します。\n\n- **プロパティ**\n\n ```ts\n interface SuspenseProps {\n timeout?: string | number\n }\n ```\n\n- **イベント**\n\n - `@resolve`\n - `@pending`\n - `@fallback`\n\n- **詳細**\n\n `<Suspense>` は `#default` スロットと `#fallback` スロットの 2 つのスロットを受け付けます。default スロットをメモリー内にレンダリングする間、fallback スロットの内容を表示します。\n\n デフォルトスロットのレンダリング中に非同期な依存関係（[非同期コンポーネント](https://ja.vuejs.org/guide/components/async.html)や [`async setup()`](https://ja.vuejs.org/guide/built-ins/suspense.html#async-setup) のコンポーネント）が発生すると、それらが全て解決するまで待ってからデフォルトスロットを表示します。\n\n-
|
|
144
|
+
"value": "\nコンポーネントツリー内のネストした非同期な依存関係を管理するために使用します。\n\n- **プロパティ**\n\n ```ts\n interface SuspenseProps {\n timeout?: string | number\n }\n ```\n\n- **イベント**\n\n - `@resolve`\n - `@pending`\n - `@fallback`\n\n- **詳細**\n\n `<Suspense>` は `#default` スロットと `#fallback` スロットの 2 つのスロットを受け付けます。default スロットをメモリー内にレンダリングする間、fallback スロットの内容を表示します。\n\n デフォルトスロットのレンダリング中に非同期な依存関係（[非同期コンポーネント](https://ja.vuejs.org/guide/components/async.html)や [`async setup()`](https://ja.vuejs.org/guide/built-ins/suspense.html#async-setup) のコンポーネント）が発生すると、それらが全て解決するまで待ってからデフォルトスロットを表示します。\n\n- **参照** [ガイド - Suspense](https://ja.vuejs.org/guide/built-ins/suspense.html)\n"
|
|
145
145
|
},
|
|
146
146
|
"attributes": [],
|
|
147
147
|
"references": [
|
|
@@ -175,7 +175,7 @@
|
|
|
175
175
|
"name": "component",
|
|
176
176
|
"description": {
|
|
177
177
|
"kind": "markdown",
|
|
178
|
-
"value": "\n動的コンポーネントや動的な要素をレンダリングするための「メタ・コンポーネント」です。\n\n- **プロパティ**\n\n ```ts\n interface DynamicComponentProps {\n is: string | Component\n }\n ```\n\n- **詳細**\n\n 実際にレンダリングするコンポーネントは `is` プロパティによって決定されます。\n\n - `is` が文字列の場合、HTML タグ名か、コンポーネントの登録名となります。\n\n - また、`is` はコンポーネントの定義に直接バインドもできます。\n\n- **例**\n\n 登録名によるコンポーネントのレンダリング（Options API）:\n\n ```vue\n <script>\n import Foo from './Foo.vue'\n import Bar from './Bar.vue'\n\n export default {\n components: { Foo, Bar },\n data() {\n return {\n view: 'Foo'\n }\n }\n }\n </script>\n\n <template>\n <component :is=\"view\" />\n </template>\n ```\n\n 定義によるコンポーネントのレンダリング（`<script setup>` の Composition API）:\n\n ```vue\n <script setup>\n import Foo from './Foo.vue'\n import Bar from './Bar.vue'\n </script>\n\n <template>\n <component :is=\"Math.random() > 0.5 ? Foo : Bar\" />\n </template>\n ```\n\n HTML 要素のレンダリング:\n\n ```html\n <component :is=\"href ? 'a' : 'span'\"></component>\n ```\n\n [ビルトインのコンポーネント](./built-in-components)はすべて `is` に渡すことができますが、名前で渡したい場合は登録しなければなりません。例えば:\n\n ```vue\n <script>\n import { Transition, TransitionGroup } from 'vue'\n\n export default {\n components: {\n Transition,\n TransitionGroup\n }\n }\n </script>\n\n <template>\n <component :is=\"isGroup ? 'TransitionGroup' : 'Transition'\">\n ...\n </component>\n </template>\n ```\n\n 例えば `<script setup>` などで、コンポーネント名ではなく、コンポーネント自体を `is` に渡す場合は、登録は必要ありません。\n\n もし `v-model` が `<component>` タグで使用された場合、テンプレートコンパイラーは他のコンポーネントと同じように、`modelValue` プロパティと `update:modelValue` イベントリスナーに展開されます。しかし、これは `<input>` や `<select>` のようなネイティブ HTML 要素とは互換性がありません。そのため、動的に生成されるネイティブ要素に対して `v-model` を使用しても動作しません:\n\n ```vue\n <script setup>\n import { ref } from 'vue'\n
|
|
178
|
+
"value": "\n動的コンポーネントや動的な要素をレンダリングするための「メタ・コンポーネント」です。\n\n- **プロパティ**\n\n ```ts\n interface DynamicComponentProps {\n is: string | Component\n }\n ```\n\n- **詳細**\n\n 実際にレンダリングするコンポーネントは `is` プロパティによって決定されます。\n\n - `is` が文字列の場合、HTML タグ名か、コンポーネントの登録名となります。\n\n - また、`is` はコンポーネントの定義に直接バインドもできます。\n\n- **例**\n\n 登録名によるコンポーネントのレンダリング（Options API）:\n\n ```vue\n <script>\n import Foo from './Foo.vue'\n import Bar from './Bar.vue'\n\n export default {\n components: { Foo, Bar },\n data() {\n return {\n view: 'Foo'\n }\n }\n }\n </script>\n\n <template>\n <component :is=\"view\" />\n </template>\n ```\n\n 定義によるコンポーネントのレンダリング（`<script setup>` の Composition API）:\n\n ```vue\n <script setup>\n import Foo from './Foo.vue'\n import Bar from './Bar.vue'\n </script>\n\n <template>\n <component :is=\"Math.random() > 0.5 ? Foo : Bar\" />\n </template>\n ```\n\n HTML 要素のレンダリング:\n\n ```html\n <component :is=\"href ? 'a' : 'span'\"></component>\n ```\n\n [ビルトインのコンポーネント](./built-in-components)はすべて `is` に渡すことができますが、名前で渡したい場合は登録しなければなりません。例えば:\n\n ```vue\n <script>\n import { Transition, TransitionGroup } from 'vue'\n\n export default {\n components: {\n Transition,\n TransitionGroup\n }\n }\n </script>\n\n <template>\n <component :is=\"isGroup ? 'TransitionGroup' : 'Transition'\">\n ...\n </component>\n </template>\n ```\n\n 例えば `<script setup>` などで、コンポーネント名ではなく、コンポーネント自体を `is` に渡す場合は、登録は必要ありません。\n\n もし `v-model` が `<component>` タグで使用された場合、テンプレートコンパイラーは他のコンポーネントと同じように、`modelValue` プロパティと `update:modelValue` イベントリスナーに展開されます。しかし、これは `<input>` や `<select>` のようなネイティブ HTML 要素とは互換性がありません。そのため、動的に生成されるネイティブ要素に対して `v-model` を使用しても動作しません:\n\n ```vue\n <script setup>\n import { ref } from 'vue'\n\n const tag = ref('input')\n const username = ref('')\n </script>\n\n <template>\n <!-- 'input' はネイティブ HTML 要素なので、動作しません -->\n <component :is=\"tag\" v-model=\"username\" />\n </template>\n ```\n\n 実際のアプリケーションでは、ネイティブのフォームフィールドはコンポーネントでラップされるのが一般的なので、このようなエッジケースはあまりありません。もし、ネイティブ要素を直接使用する必要がある場合は、 `v-model` を属性とイベントに手動で分割できます。\n\n- **参照** [動的コンポーネント](https://ja.vuejs.org/guide/essentials/component-basics.html#dynamic-components)\n"
|
|
179
179
|
},
|
|
180
180
|
"attributes": [],
|
|
181
181
|
"references": [
|
|
@@ -209,7 +209,7 @@
|
|
|
209
209
|
"name": "slot",
|
|
210
210
|
"description": {
|
|
211
211
|
"kind": "markdown",
|
|
212
|
-
"value": "\nテンプレート内でスロットコンテンツのアウトレットを表します。\n\n- **プロパティ**\n\n ```ts\n interface SlotProps {\n /**\n * <slot> に渡されたすべてのプロパティは、スコープ付き\n * スロットの引数として渡されます\n */\n [key: string]: any\n /**\n * スロット名を指定するために予約済み。\n */\n name?: string\n }\n ```\n\n- **詳細**\n\n `<slot>` 要素では `name` 属性を使用してスロット名を指定できます。`name` が指定されない場合は、デフォルトのスロットがレンダリングされます。slot 要素に渡された追加の属性は、親で定義されたスコープ付きスロットにスロットプロパティとして渡されます。\n\n この要素そのものは、一致したスロットの内容に置き換えられます。\n\n Vue テンプレートの `<slot>` 要素は JavaScript にコンパイルされているので、[ネイティブの `<slot>` 要素](https://developer.mozilla.org/ja/docs/Web/HTML/Element/slot)と混同しないように注意してください。\n\n-
|
|
212
|
+
"value": "\nテンプレート内でスロットコンテンツのアウトレットを表します。\n\n- **プロパティ**\n\n ```ts\n interface SlotProps {\n /**\n * <slot> に渡されたすべてのプロパティは、スコープ付き\n * スロットの引数として渡されます\n */\n [key: string]: any\n /**\n * スロット名を指定するために予約済み。\n */\n name?: string\n }\n ```\n\n- **詳細**\n\n `<slot>` 要素では `name` 属性を使用してスロット名を指定できます。`name` が指定されない場合は、デフォルトのスロットがレンダリングされます。slot 要素に渡された追加の属性は、親で定義されたスコープ付きスロットにスロットプロパティとして渡されます。\n\n この要素そのものは、一致したスロットの内容に置き換えられます。\n\n Vue テンプレートの `<slot>` 要素は JavaScript にコンパイルされているので、[ネイティブの `<slot>` 要素](https://developer.mozilla.org/ja/docs/Web/HTML/Element/slot)と混同しないように注意してください。\n\n- **参照** [コンポーネント - スロット](https://ja.vuejs.org/guide/components/slots.html)\n"
|
|
213
213
|
},
|
|
214
214
|
"attributes": [],
|
|
215
215
|
"references": [
|
|
@@ -243,7 +243,7 @@
|
|
|
243
243
|
"name": "template",
|
|
244
244
|
"description": {
|
|
245
245
|
"kind": "markdown",
|
|
246
|
-
"value": "\nDOM に要素をレンダリングせずに組み込みディレクティブを使用したい場合、`<template>` タグをプレースホルダーとして使用します。\n\n-
|
|
246
|
+
"value": "\nDOM に要素をレンダリングせずに組み込みディレクティブを使用したい場合、`<template>` タグをプレースホルダーとして使用します。\n\n- **詳細**\n\n `<template>` の特別な処理は、以下のディレクティブと一緒に使われた場合のみ発生します:\n\n - `v-if`、`v-else-if`、または `v-else`\n - `v-for`\n - `v-slot`\n\n これらのディレクティブが存在しない場合は、代わりに[ネイティブの `<template>` 要素](https://developer.mozilla.org/ja/docs/Web/HTML/Element/template)としてレンダリングされます。\n\n `v-for` を持つ `<template>` は [`key` 属性](https://ja.vuejs.org/api/built-in-special-attributes.html#key)を持たせることができます。それ以外の属性やディレクティブは、対応する要素がなければ意味をなさないので、すべて破棄されます。\n\n 単一ファイルコンポーネントは、テンプレート全体をラップするために[トップレベルの `<template>` タグ](https://ja.vuejs.org/api/sfc-spec.html#language-blocks)を使用します。この使い方は、上記で説明した `<template>` の使い方とは別のものです。このトップレベルタグはテンプレート自体の一部ではなく、ディレクティブのようなテンプレートの構文もサポートしていません。\n\n- **参照**\n - [ガイド - `<template>` に `v-if` を適用する](https://ja.vuejs.org/guide/essentials/conditional.html#v-if-on-template)\n - [ガイド - `<template>` に `v-for` を適用する](https://ja.vuejs.org/guide/essentials/list.html#v-for-on-template)\n - [ガイド - 名前付きスロット](https://ja.vuejs.org/guide/components/slots.html#named-slots)\n"
|
|
247
247
|
},
|
|
248
248
|
"attributes": [],
|
|
249
249
|
"references": [
|
|
@@ -279,7 +279,7 @@
|
|
|
279
279
|
"name": "v-text",
|
|
280
280
|
"description": {
|
|
281
281
|
"kind": "markdown",
|
|
282
|
-
"value": "\n要素のテキスト内容を更新します。\n\n- **期待する値:** `string`\n\n- **詳細**\n\n `v-text` は要素の [textContent](https://developer.mozilla.org/ja/docs/Web/API/Node/textContent) プロパティをセットする動作なので、要素内の既存のコンテンツはすべて上書きされます。`textContent` の一部を更新する必要がある場合は、代わりに[マスタッシュ展開](https://ja.vuejs.org/guide/essentials/template-syntax.html#text-interpolation)を使用します。\n\n- **例**\n\n ```html\n <span v-text=\"msg\"></span>\n <!-- same as -->\n <span>{{msg}}</span>\n ```\n\n-
|
|
282
|
+
"value": "\n要素のテキスト内容を更新します。\n\n- **期待する値:** `string`\n\n- **詳細**\n\n `v-text` は要素の [textContent](https://developer.mozilla.org/ja/docs/Web/API/Node/textContent) プロパティをセットする動作なので、要素内の既存のコンテンツはすべて上書きされます。`textContent` の一部を更新する必要がある場合は、代わりに[マスタッシュ展開](https://ja.vuejs.org/guide/essentials/template-syntax.html#text-interpolation)を使用します。\n\n- **例**\n\n ```html\n <span v-text=\"msg\"></span>\n <!-- same as -->\n <span>{{msg}}</span>\n ```\n\n- **参照** [テンプレート構文 - テキスト展開](https://ja.vuejs.org/guide/essentials/template-syntax.html#text-interpolation)\n"
|
|
283
283
|
},
|
|
284
284
|
"references": [
|
|
285
285
|
{
|
|
@@ -312,7 +312,7 @@
|
|
|
312
312
|
"name": "v-html",
|
|
313
313
|
"description": {
|
|
314
314
|
"kind": "markdown",
|
|
315
|
-
"value": "\n要素の [innerHTML](https://developer.mozilla.org/ja/docs/Web/API/Element/innerHTML) を更新します。\n\n- **期待する値:** `string`\n\n-
|
|
315
|
+
"value": "\n要素の [innerHTML](https://developer.mozilla.org/ja/docs/Web/API/Element/innerHTML) を更新します。\n\n- **期待する値:** `string`\n\n- **詳細**\n\n `v-html` の内容は、プレーンな HTML として挿入されます - Vue テンプレートの構文は処理されません。もし、`v-html` を使ってテンプレートを構成しようとしているのであれば、代わりにコンポーネントを使うなどして解決策を見直してみてください。\n\n ::: warning セキュリティーに関する注意\n ウェブサイト上で任意の HTML を動的にレンダリングすることは、[XSS 攻撃](https://ja.wikipedia.org/wiki/%E3%82%AF%E3%83%AD%E3%82%B9%E3%82%B5%E3%82%A4%E3%83%88%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%97%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0)につながりやすいため、非常に危険です。信頼できるコンテンツにのみ `v-html` を使用し、ユーザーが提供するコンテンツには**絶対に**使用しないでください。\n :::\n\n [単一ファイルコンポーネント](https://ja.vuejs.org/guide/scaling-up/sfc.html)では、`scoped` スタイルは `v-html` 内のコンテンツには適用されません。これは、その HTML が Vue のテンプレートコンパイラーによって処理されないからです。もし `v-html` のコンテンツにスコープ付き CSS を適用したい場合は、代わりに [CSS modules](./sfc-css-features#css-modules) を使ったり、BEM などの手動スコープ戦略を持つ追加のグローバル `<style>` 要素を使用可能です。\n\n- **例**\n\n ```html\n <div v-html=\"html\"></div>\n ```\n\n- **参照** [テンプレート構文 - 生の HTML](https://ja.vuejs.org/guide/essentials/template-syntax.html#raw-html)\n"
|
|
316
316
|
},
|
|
317
317
|
"references": [
|
|
318
318
|
{
|
|
@@ -345,7 +345,7 @@
|
|
|
345
345
|
"name": "v-show",
|
|
346
346
|
"description": {
|
|
347
347
|
"kind": "markdown",
|
|
348
|
-
"value": "\n式の値の真偽に基づいて、要素の可視性を切り替えます。\n\n- **期待する値:** `any`\n\n- **詳細**\n\n `v-show` はインラインスタイルで `display` CSS プロパティをセットする動作で、要素が表示されている場合は `display` の初期値を尊重しようとします。また、その状態が変化したときにトランジションを引き起こします。\n\n-
|
|
348
|
+
"value": "\n式の値の真偽に基づいて、要素の可視性を切り替えます。\n\n- **期待する値:** `any`\n\n- **詳細**\n\n `v-show` はインラインスタイルで `display` CSS プロパティをセットする動作で、要素が表示されている場合は `display` の初期値を尊重しようとします。また、その状態が変化したときにトランジションを引き起こします。\n\n- **参照** [条件付きレンダリング - v-show](https://ja.vuejs.org/guide/essentials/conditional.html#v-show)\n"
|
|
349
349
|
},
|
|
350
350
|
"references": [
|
|
351
351
|
{
|
|
@@ -378,7 +378,7 @@
|
|
|
378
378
|
"name": "v-if",
|
|
379
379
|
"description": {
|
|
380
380
|
"kind": "markdown",
|
|
381
|
-
"value": "\n式の値の真偽に基づいて、要素またはテンプレートフラグメントを条件付きでレンダリングします。\n\n- **期待する値:** `any`\n\n- **詳細**\n\n `v-if` 要素がトグルされると、要素とそれに含まれるディレクティブ/コンポーネントは破棄され、再構築されます。初期条件が falsy な場合、内部のコンテンツは全くレンダリングされません。\n\n `<template>` に使用すると、テキストのみ、または複数の要素を含む条件ブロックを表すことができます。\n\n このディレクティブは、条件が変化したときにトランジションをトリガーします。\n\n 一緒に使用した場合、 `v-if` は `v-for` よりも高い優先度を持ちます。この 2 つのディレクティブを 1 つの要素で同時に使うことはお勧めしません。詳しくは [リストレンダリングガイド](https://ja.vuejs.org/guide/essentials/list.html#v-for-with-v-if) を参照してください。\n\n-
|
|
381
|
+
"value": "\n式の値の真偽に基づいて、要素またはテンプレートフラグメントを条件付きでレンダリングします。\n\n- **期待する値:** `any`\n\n- **詳細**\n\n `v-if` 要素がトグルされると、要素とそれに含まれるディレクティブ/コンポーネントは破棄され、再構築されます。初期条件が falsy な場合、内部のコンテンツは全くレンダリングされません。\n\n `<template>` に使用すると、テキストのみ、または複数の要素を含む条件ブロックを表すことができます。\n\n このディレクティブは、条件が変化したときにトランジションをトリガーします。\n\n 一緒に使用した場合、 `v-if` は `v-for` よりも高い優先度を持ちます。この 2 つのディレクティブを 1 つの要素で同時に使うことはお勧めしません。詳しくは [リストレンダリングガイド](https://ja.vuejs.org/guide/essentials/list.html#v-for-with-v-if) を参照してください。\n\n- **参照** [条件付きレンダリング - v-if](https://ja.vuejs.org/guide/essentials/conditional.html#v-if)\n"
|
|
382
382
|
},
|
|
383
383
|
"references": [
|
|
384
384
|
{
|
|
@@ -412,7 +412,7 @@
|
|
|
412
412
|
"valueSet": "v",
|
|
413
413
|
"description": {
|
|
414
414
|
"kind": "markdown",
|
|
415
|
-
"value": "\n`v-if` または `v-if` / `v-else-if` チェーンの「else ブロック」を表します。\n\n- **式を受け取りません**\n\n- **詳細**\n\n - 制限: 直前の兄弟要素には `v-if` または `v-else-if` が必要です。\n\n - `<template>` に使用すると、テキストのみ、または複数の要素を含む条件ブロックを表すことができます。\n\n- **例**\n\n ```html\n <div v-if=\"Math.random() > 0.5\">\n Now you see me\n </div>\n <div v-else>\n Now you don't\n </div>\n ```\n\n-
|
|
415
|
+
"value": "\n`v-if` または `v-if` / `v-else-if` チェーンの「else ブロック」を表します。\n\n- **式を受け取りません**\n\n- **詳細**\n\n - 制限: 直前の兄弟要素には `v-if` または `v-else-if` が必要です。\n\n - `<template>` に使用すると、テキストのみ、または複数の要素を含む条件ブロックを表すことができます。\n\n- **例**\n\n ```html\n <div v-if=\"Math.random() > 0.5\">\n Now you see me\n </div>\n <div v-else>\n Now you don't\n </div>\n ```\n\n- **参照** [条件付きレンダリング - v-else](https://ja.vuejs.org/guide/essentials/conditional.html#v-else)\n"
|
|
416
416
|
},
|
|
417
417
|
"references": [
|
|
418
418
|
{
|
|
@@ -445,7 +445,7 @@
|
|
|
445
445
|
"name": "v-else-if",
|
|
446
446
|
"description": {
|
|
447
447
|
"kind": "markdown",
|
|
448
|
-
"value": "\n`v-if` の「else if ブロック」を表します。連鎖させることができます。\n\n- **期待する値:** `any`\n\n- **詳細**\n\n - 制限: 直前の兄弟要素には `v-if` または `v-else-if` が必要です。\n\n - `<template>` に使用すると、テキストのみ、または複数の要素を含む条件ブロックを表すことができます。\n\n- **例**\n\n ```html\n <div v-if=\"type === 'A'\">\n A\n </div>\n <div v-else-if=\"type === 'B'\">\n B\n </div>\n <div v-else-if=\"type === 'C'\">\n C\n </div>\n <div v-else>\n Not A/B/C\n </div>\n ```\n\n-
|
|
448
|
+
"value": "\n`v-if` の「else if ブロック」を表します。連鎖させることができます。\n\n- **期待する値:** `any`\n\n- **詳細**\n\n - 制限: 直前の兄弟要素には `v-if` または `v-else-if` が必要です。\n\n - `<template>` に使用すると、テキストのみ、または複数の要素を含む条件ブロックを表すことができます。\n\n- **例**\n\n ```html\n <div v-if=\"type === 'A'\">\n A\n </div>\n <div v-else-if=\"type === 'B'\">\n B\n </div>\n <div v-else-if=\"type === 'C'\">\n C\n </div>\n <div v-else>\n Not A/B/C\n </div>\n ```\n\n- **参照** [条件付きレンダリング - v-else-if](https://ja.vuejs.org/guide/essentials/conditional.html#v-else-if)\n"
|
|
449
449
|
},
|
|
450
450
|
"references": [
|
|
451
451
|
{
|
|
@@ -478,7 +478,7 @@
|
|
|
478
478
|
"name": "v-for",
|
|
479
479
|
"description": {
|
|
480
480
|
"kind": "markdown",
|
|
481
|
-
"value": "\n元となるデータに基づいて、要素またはテンプレートブロックを複数回レンダリングします。\n\n- **期待する値:** `Array | Object | number | string | Iterable`\n\n- **詳細**\n\n ディレクティブの値は、反復処理されている現在の要素のエイリアスを提供するために、特別な構文 `エイリアス in 式` を使用する必要があります:\n\n ```html\n <div v-for=\"item in items\">\n {{ item.text }}\n </div>\n ```\n\n または、インデックス（Object で使用する場合はキー）のエイリアスも指定できます:\n\n ```html\n <div v-for=\"(item, index) in items\"></div>\n <div v-for=\"(value, key) in object\"></div>\n <div v-for=\"(value, name, index) in object\"></div>\n ```\n\n `v-for` のデフォルトの動作は、要素を移動することなく、その場でパッチを適用しようとします。強制的に要素を並べ替えるには、特別な属性 `key` で順番のヒントを指定する必要があります:\n\n ```html\n <div v-for=\"item in items\" :key=\"item.id\">\n {{ item.text }}\n </div>\n ```\n\n また、`v-for` はネイティブの `Map` や `Set` を含む、[反復処理プロトコル](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol)を実装した値に対しても動作させることができます。\n\n-
|
|
481
|
+
"value": "\n元となるデータに基づいて、要素またはテンプレートブロックを複数回レンダリングします。\n\n- **期待する値:** `Array | Object | number | string | Iterable`\n\n- **詳細**\n\n ディレクティブの値は、反復処理されている現在の要素のエイリアスを提供するために、特別な構文 `エイリアス in 式` を使用する必要があります:\n\n ```html\n <div v-for=\"item in items\">\n {{ item.text }}\n </div>\n ```\n\n または、インデックス（Object で使用する場合はキー）のエイリアスも指定できます:\n\n ```html\n <div v-for=\"(item, index) in items\"></div>\n <div v-for=\"(value, key) in object\"></div>\n <div v-for=\"(value, name, index) in object\"></div>\n ```\n\n `v-for` のデフォルトの動作は、要素を移動することなく、その場でパッチを適用しようとします。強制的に要素を並べ替えるには、特別な属性 `key` で順番のヒントを指定する必要があります:\n\n ```html\n <div v-for=\"item in items\" :key=\"item.id\">\n {{ item.text }}\n </div>\n ```\n\n また、`v-for` はネイティブの `Map` や `Set` を含む、[反復処理プロトコル](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol)を実装した値に対しても動作させることができます。\n\n- **参照**\n - [リストレンダリング](https://ja.vuejs.org/guide/essentials/list.html)\n"
|
|
482
482
|
},
|
|
483
483
|
"references": [
|
|
484
484
|
{
|
|
@@ -511,7 +511,7 @@
|
|
|
511
511
|
"name": "v-on",
|
|
512
512
|
"description": {
|
|
513
513
|
"kind": "markdown",
|
|
514
|
-
"value": "\n要素にイベントリスナーを追加します。\n\n- **省略記法:** `@`\n\n- **期待する値:** `Function | Inline Statement | Object (without argument)`\n\n- **引数:** `event`（オブジェクト構文を使用する場合は省略可能）\n\n-
|
|
514
|
+
"value": "\n要素にイベントリスナーを追加します。\n\n- **省略記法:** `@`\n\n- **期待する値:** `Function | Inline Statement | Object (without argument)`\n\n- **引数:** `event`（オブジェクト構文を使用する場合は省略可能）\n\n- **修飾子**\n\n - `.stop` - `event.stopPropagation()` を呼び出します。\n - `.prevent` - `event.preventDefault()` を呼び出します。\n - `.capture` - キャプチャーモードでイベントリスナーを追加します。\n - `.self` - イベントがこの要素からディスパッチされた場合にのみハンドラーをトリガーします。\n - `.{keyAlias}` - 特定のキーでのみハンドラーをトリガーします。\n - `.once` - 一度だけハンドラーをトリガーします。\n - `.left` - 左ボタンのマウスイベントに対してのみ、ハンドラーをトリガーします。\n - `.right` - 右ボタンのマウスイベントに対してのみ、ハンドラーをトリガーします。\n - `.middle` - 中央ボタンのマウスイベントに対してのみ、ハンドラーをトリガーします。\n - `.passive` - DOM イベントを `{ passive: true }` で追加します。\n\n- **詳細**\n\n イベントの種類は引数で示されます。式はメソッド名かインラインステートメントで、修飾子が存在する場合は省略可能です。\n\n 通常の要素で使用する場合、[**ネイティブ DOM イベント**](https://developer.mozilla.org/ja/docs/Web/Events)のみを購読します。カスタム要素コンポーネントで使用された場合、その子コンポーネントで発行された**カスタムイベント**を購読します。\n\n ネイティブ DOM イベントを購読する場合、このメソッドは唯一の引数としてネイティブイベントを受け取ります。インラインステートメントを使用する場合、ステートメントは特別な `$event` プロパティにアクセスできます: `v-on:click=\"handle('ok', $event)\"`\n\n `v-on` は引数なしで、イベントとリスナーのペアのオブジェクトにバインドすることもサポートしています。オブジェクト構文を使用する場合、修飾子をサポートしないことに注意してください。\n\n- **例**\n\n ```html\n <!-- メソッドハンドラー -->\n <button v-on:click=\"doThis\"></button>\n\n <!-- 動的イベント -->\n <button v-on:[event]=\"doThis\"></button>\n\n <!-- インラインステートメント -->\n <button v-on:click=\"doThat('hello', $event)\"></button>\n\n <!-- 省略記法 -->\n <button @click=\"doThis\"></button>\n\n <!-- 動的イベントの省略記法 -->\n <button @[event]=\"doThis\"></button>\n\n <!-- stop propagation -->\n <button @click.stop=\"doThis\"></button>\n\n <!-- prevent default -->\n <button @click.prevent=\"doThis\"></button>\n\n <!-- 式なしで prevent default -->\n <form @submit.prevent></form>\n\n <!-- 修飾子の連鎖 -->\n <button @click.stop.prevent=\"doThis\"></button>\n\n <!-- キーのエイリアスを用いたキー修飾子 -->\n <input @keyup.enter=\"onEnter\" />\n\n <!-- 一度だけトリガーされるクリックイベント -->\n <button v-on:click.once=\"doThis\"></button>\n\n <!-- オブジェクト構文 -->\n <button v-on=\"{ mousedown: doThis, mouseup: doThat }\"></button>\n ```\n\n 子コンポーネントのカスタムイベントを購読する（子コンポーネントで \"my-event\" が発行されたときにハンドラーが呼び出される）:\n\n ```html\n <MyComponent @my-event=\"handleThis\" />\n\n <!-- インラインステートメント -->\n <MyComponent @my-event=\"handleThis(123, $event)\" />\n ```\n\n- **参照**\n - [イベントハンドリング](https://ja.vuejs.org/guide/essentials/event-handling.html)\n - [コンポーネント - カスタムイベント](https://ja.vuejs.org/guide/essentials/component-basics.html#listening-to-events)\n"
|
|
515
515
|
},
|
|
516
516
|
"references": [
|
|
517
517
|
{
|
|
@@ -544,7 +544,7 @@
|
|
|
544
544
|
"name": "v-bind",
|
|
545
545
|
"description": {
|
|
546
546
|
"kind": "markdown",
|
|
547
|
-
"value": "\n1 つ以上の属性やコンポーネントのプロパティを式に動的にバインドします。\n\n- **省略記法:** `:` or `.`（`.prop` 修飾子使用時）\n\n- **期待する値:** `any（引数ありの場合） | Object（引数なしの場合）`\n\n- **引数:** `attrOrProp（省略可能）`\n\n-
|
|
547
|
+
"value": "\n1 つ以上の属性やコンポーネントのプロパティを式に動的にバインドします。\n\n- **省略記法:** `:` or `.`（`.prop` 修飾子使用時）\n\n- **期待する値:** `any（引数ありの場合） | Object（引数なしの場合）`\n\n- **引数:** `attrOrProp（省略可能）`\n\n- **修飾子**\n\n - `.camel` - kebab-case の属性名を camelCase に変換します。\n - `.prop` - バインディングを DOM プロパティとして設定するよう強制します。<sup class=\"vt-badge\">3.2+</sup>\n - `.attr` - バインディングを DOM 属性として設定するよう強制します。<sup class=\"vt-badge\">3.2+</sup>\n\n- **使用法**\n\n `class` や `style` 属性をバインドする際に使用する `v-bind` は、Array や Object などの追加の値の型をサポートします。詳しくは、以下のリンク先のガイドを参照してください。\n\n 要素にバインディングを設定するとき、Vue はデフォルトで、`in` 演算子チェックを使用して、プロパティとして定義されたキーが要素にあるかどうかを確認します。プロパティが定義されている場合、Vue はその値を属性ではなく DOM プロパティとして設定します。これはほとんどの場合において有効ですが、`.prop` や `.attr` という修飾子を明示的に使用することでこの動作をオーバーライドできます。これは、特に[カスタム要素を扱う](https://ja.vuejs.org/guide/extras/web-components.html#passing-dom-properties)ときに必要になることがあります。\n\n コンポーネントのプロパティをバインドするために使用する場合、そのプロパティは子コンポーネントで適切に宣言されている必要があります。\n\n 引数なしで使用する場合、属性の名前と値のペアを含むオブジェクトをバインドするために使用できます。\n\n- **例**\n\n ```html\n <!-- 属性をバインドする -->\n <img v-bind:src=\"imageSrc\" />\n\n <!-- 動的な属性名 -->\n <button v-bind:[key]=\"value\"></button>\n\n <!-- 省略記法 -->\n <img :src=\"imageSrc\" />\n\n <!-- 動的な属性名の省略記法 -->\n <button :[key]=\"value\"></button>\n\n <!-- インラインの文字列連結 -->\n <img :src=\"'/path/to/images/' + fileName\" />\n\n <!-- クラスのバインド -->\n <div :class=\"{ red: isRed }\"></div>\n <div :class=\"[classA, classB]\"></div>\n <div :class=\"[classA, { classB: isB, classC: isC }]\"></div>\n\n <!-- スタイルのバインド -->\n <div :style=\"{ fontSize: size + 'px' }\"></div>\n <div :style=\"[styleObjectA, styleObjectB]\"></div>\n\n <!-- 属性のオブジェクトをバインド -->\n <div v-bind=\"{ id: someProp, 'other-attr': otherProp }\"></div>\n\n <!-- プロパティのバインド。\"prop\" は子コンポーネントで宣言する必要があります。 -->\n <MyComponent :prop=\"someThing\" />\n\n <!-- 親のプロパティを子コンポーネントと共有するために渡す -->\n <MyComponent v-bind=\"$props\" />\n\n <!-- XLink -->\n <svg><a :xlink:special=\"foo\"></a></svg>\n ```\n\n `.prop` 修飾子には、専用の短縮形 `.` もあります:\n\n ```html\n <div :someProperty.prop=\"someObject\"></div>\n\n <!-- 以下とと同じ -->\n <div .someProperty=\"someObject\"></div>\n ```\n\n `.camel` 修飾子は、DOM 内テンプレートを使用する際に、 `v-bind` 属性名をキャメル化できます（例: SVG の `viewBox` 属性）:\n\n ```html\n <svg :view-box.camel=\"viewBox\"></svg>\n ```\n\n 文字列テンプレートを使用する場合や、ビルドステップでテンプレートを事前コンパイルする場合は、`.camel` は必要ありません。\n\n- **参照**\n - [クラスとスタイルのバインディング](https://ja.vuejs.org/guide/essentials/class-and-style.html)\n - [コンポーネント - プロパティ渡しの詳細](https://ja.vuejs.org/guide/components/props.html#prop-passing-details)\n"
|
|
548
548
|
},
|
|
549
549
|
"references": [
|
|
550
550
|
{
|
|
@@ -577,7 +577,7 @@
|
|
|
577
577
|
"name": "v-model",
|
|
578
578
|
"description": {
|
|
579
579
|
"kind": "markdown",
|
|
580
|
-
"value": "\nフォーム入力要素またはコンポーネントに双方向バインディングを作成します。\n\n- **期待する値:** フォームの入力要素の値や構成要素の出力によって異なります\n\n- **以下に限定:**\n\n - `<input>`\n - `<select>`\n - `<textarea>`\n - コンポーネント\n\n-
|
|
580
|
+
"value": "\nフォーム入力要素またはコンポーネントに双方向バインディングを作成します。\n\n- **期待する値:** フォームの入力要素の値や構成要素の出力によって異なります\n\n- **以下に限定:**\n\n - `<input>`\n - `<select>`\n - `<textarea>`\n - コンポーネント\n\n- **修飾子**\n\n - [`.lazy`](https://ja.vuejs.org/guide/essentials/forms.html#lazy) - `input` の代わりに `change` イベントを購読する\n - [`.number`](https://ja.vuejs.org/guide/essentials/forms.html#number) - 有効な入力文字列を数値に変換する\n - [`.trim`](https://ja.vuejs.org/guide/essentials/forms.html#trim) - 入力をトリムする\n\n- **参照**\n\n - [フォーム入力バインディング](https://ja.vuejs.org/guide/essentials/forms.html)\n - [コンポーネントのイベント - `v-model` での使用](https://ja.vuejs.org/guide/components/v-model.html)\n"
|
|
581
581
|
},
|
|
582
582
|
"references": [
|
|
583
583
|
{
|
|
@@ -610,7 +610,7 @@
|
|
|
610
610
|
"name": "v-slot",
|
|
611
611
|
"description": {
|
|
612
612
|
"kind": "markdown",
|
|
613
|
-
"value": "\nプロパティの受け取りを期待する名前付きスロットまたはスコープ付きスロットを表します。\n\n- **省略記法:** `#`\n\n- **期待する値:** 関数の引数の位置で有効な JavaScript 式（分割代入のサポートを含む）。省略可能 - プロパティがスロットに渡されることを期待している場合のみ必要です。\n\n- **引数:** スロット名（省略可能で、デフォルトは `default`）\n\n- **以下に限定:**\n\n - `<template>`\n - [コンポーネント](https://ja.vuejs.org/guide/components/slots.html#scoped-slots)（プロパティのある単独のデフォルトスロット用）\n\n-
|
|
613
|
+
"value": "\nプロパティの受け取りを期待する名前付きスロットまたはスコープ付きスロットを表します。\n\n- **省略記法:** `#`\n\n- **期待する値:** 関数の引数の位置で有効な JavaScript 式（分割代入のサポートを含む）。省略可能 - プロパティがスロットに渡されることを期待している場合のみ必要です。\n\n- **引数:** スロット名（省略可能で、デフォルトは `default`）\n\n- **以下に限定:**\n\n - `<template>`\n - [コンポーネント](https://ja.vuejs.org/guide/components/slots.html#scoped-slots)（プロパティのある単独のデフォルトスロット用）\n\n- **例**\n\n ```html\n <!-- 名前付きスロット -->\n <BaseLayout>\n <template v-slot:header>\n Header content\n </template>\n\n <template v-slot:default>\n Default slot content\n </template>\n\n <template v-slot:footer>\n Footer content\n </template>\n </BaseLayout>\n\n <!-- プロパティを受け取る名前付きスロット -->\n <InfiniteScroll>\n <template v-slot:item=\"slotProps\">\n <div class=\"item\">\n {{ slotProps.item.text }}\n </div>\n </template>\n </InfiniteScroll>\n\n <!-- プロパティを受け取るデフォルトスロット、分割代入あり -->\n <Mouse v-slot=\"{ x, y }\">\n Mouse position: {{ x }}, {{ y }}\n </Mouse>\n ```\n\n- **参照**\n - [コンポーネント - スロット](https://ja.vuejs.org/guide/components/slots.html)\n"
|
|
614
614
|
},
|
|
615
615
|
"references": [
|
|
616
616
|
{
|
|
@@ -643,7 +643,7 @@
|
|
|
643
643
|
"name": "v-pre",
|
|
644
644
|
"description": {
|
|
645
645
|
"kind": "markdown",
|
|
646
|
-
"value": "\nこの要素とすべての子要素のコンパイルをスキップします。\n\n- **式を受け取りません**\n\n- **詳細**\n\n `v-pre` を指定した要素の内部では、Vue テンプレートの構文はすべて維持され、そのままレンダリングされます。この最も一般的な使用例は、未加工のマスタッシュタグを表示することです。\n\n-
|
|
646
|
+
"value": "\nこの要素とすべての子要素のコンパイルをスキップします。\n\n- **式を受け取りません**\n\n- **詳細**\n\n `v-pre` を指定した要素の内部では、Vue テンプレートの構文はすべて維持され、そのままレンダリングされます。この最も一般的な使用例は、未加工のマスタッシュタグを表示することです。\n\n- **例**\n\n ```html\n <span v-pre>{{ this will not be compiled }}</span>\n ```\n"
|
|
647
647
|
},
|
|
648
648
|
"references": [
|
|
649
649
|
{
|
|
@@ -676,7 +676,7 @@
|
|
|
676
676
|
"name": "v-once",
|
|
677
677
|
"description": {
|
|
678
678
|
"kind": "markdown",
|
|
679
|
-
"value": "\n要素やコンポーネントを一度だけレンダリングし、その後の更新はスキップします。\n\n- **式を受け取りません**\n\n- **詳細**\n\n その後の再レンダリングでは、要素/コンポーネントとそのすべての子要素は静的コンテンツとして扱われ、スキップされます。これは、更新のパフォーマンスを最適化するために使用できます。\n\n ```html\n <!-- 単一要素 -->\n <span v-once>This will never change: {{msg}}</span>\n <!-- 子要素を持つ要素 -->\n <div v-once>\n <h1>comment</h1>\n <p>{{msg}}</p>\n </div>\n <!-- コンポーネント -->\n <MyComponent v-once :comment=\"msg\"></MyComponent>\n <!-- `v-for` ディレクティブ -->\n <ul>\n <li v-for=\"i in list\" v-once>{{i}}</li>\n </ul>\n ```\n\n 3.2 以降では、[`v-memo`](#v-memo) を使って、テンプレートの一部を無効化する条件付きでメモ化できます。\n\n-
|
|
679
|
+
"value": "\n要素やコンポーネントを一度だけレンダリングし、その後の更新はスキップします。\n\n- **式を受け取りません**\n\n- **詳細**\n\n その後の再レンダリングでは、要素/コンポーネントとそのすべての子要素は静的コンテンツとして扱われ、スキップされます。これは、更新のパフォーマンスを最適化するために使用できます。\n\n ```html\n <!-- 単一要素 -->\n <span v-once>This will never change: {{msg}}</span>\n <!-- 子要素を持つ要素 -->\n <div v-once>\n <h1>comment</h1>\n <p>{{msg}}</p>\n </div>\n <!-- コンポーネント -->\n <MyComponent v-once :comment=\"msg\"></MyComponent>\n <!-- `v-for` ディレクティブ -->\n <ul>\n <li v-for=\"i in list\" v-once>{{i}}</li>\n </ul>\n ```\n\n 3.2 以降では、[`v-memo`](#v-memo) を使って、テンプレートの一部を無効化する条件付きでメモ化できます。\n\n- **参照**\n - [データバインディング構文 - 展開](https://ja.vuejs.org/guide/essentials/template-syntax.html#text-interpolation)\n - [v-memo](#v-memo)\n"
|
|
680
680
|
},
|
|
681
681
|
"references": [
|
|
682
682
|
{
|
|
@@ -709,7 +709,7 @@
|
|
|
709
709
|
"name": "v-memo",
|
|
710
710
|
"description": {
|
|
711
711
|
"kind": "markdown",
|
|
712
|
-
"value": "\n- **期待する値:** `any[]`\n\n- **詳細**\n\n テンプレートのサブツリーをメモ化します。要素とコンポーネントの両方で使用できます。このディレクティブは、メモ化のために比較する依存関係の値の固定長の配列を受け取ります。配列内のすべての値が直前のレンダリングと同じであった場合、サブツリー全体の更新はスキップされます。たとえば:\n\n ```html\n <div v-memo=\"[valueA, valueB]\">\n ...\n </div>\n ```\n\n コンポーネントの再レンダリング時に、 `valueA` と `valueB` の両方が同じであれば、この `<div>` とその子のすべての更新はスキップされます。実際には、仮想 DOM の VNode の生成もスキップされます。なぜなら、サブツリーのメモ化されたコピーを再利用できるからです。\n\n メモ化の配列を正しく指定することは重要であり、そうでない場合は、実際に適用されるべき更新をスキップしてしまう可能性があります。依存関係の配列を空にした `v-memo`（`v-memo=\"[]\"`）は、機能的には `v-once` と同等です。\n\n **`v-for` での使用**\n\n `v-memo` は、パフォーマンスが重要なシナリオでのミクロな最適化を行うためにのみ提供されており、ほとんど必要ありません。この機能が役に立つ最も一般的なケースは、大きな `v-for` リスト（`length > 1000`）をレンダリングするときです:\n\n ```html\n <div v-for=\"item in list\" :key=\"item.id\" v-memo=\"[item.id === selected]\">\n <p>ID: {{ item.id }} - selected: {{ item.id === selected }}</p>\n <p>...more child nodes</p>\n </div>\n ```\n\n コンポーネントの `selected` 状態が変化すると、ほとんどの項目がまったく同じままであっても、大量の VNode が作成されます。ここでの `v-memo` の使い方は、基本的に「非選択状態から選択状態になった場合のみ、またはその逆の場合のみ、この項目を更新する」というものです。これにより、影響を受けない項目はすべて以前の VNode を再利用し、差分を完全にスキップできます。メモの依存関係の配列に `item.id` を含める必要はないことに注意してください。Vue は自動的に項目の `:key` から推測します。\n\n :::warning\n `v-memo` と `v-for` を併用する場合は、同じ要素で使用されているか確認してください。**`v-memo` は `v-for` の中では動作しません。**\n :::\n\n 子コンポーネントの更新チェックが最適化されていない特定のエッジケースで、不要な更新を手動で防ぐために `v-memo` をコンポーネントに使用できます。しかし、ここでも、必要な更新をスキップしないように正しい依存関係を指定するのは、開発者の責任です。\n\n-
|
|
712
|
+
"value": "\n- **期待する値:** `any[]`\n\n- **詳細**\n\n テンプレートのサブツリーをメモ化します。要素とコンポーネントの両方で使用できます。このディレクティブは、メモ化のために比較する依存関係の値の固定長の配列を受け取ります。配列内のすべての値が直前のレンダリングと同じであった場合、サブツリー全体の更新はスキップされます。たとえば:\n\n ```html\n <div v-memo=\"[valueA, valueB]\">\n ...\n </div>\n ```\n\n コンポーネントの再レンダリング時に、 `valueA` と `valueB` の両方が同じであれば、この `<div>` とその子のすべての更新はスキップされます。実際には、仮想 DOM の VNode の生成もスキップされます。なぜなら、サブツリーのメモ化されたコピーを再利用できるからです。\n\n メモ化の配列を正しく指定することは重要であり、そうでない場合は、実際に適用されるべき更新をスキップしてしまう可能性があります。依存関係の配列を空にした `v-memo`（`v-memo=\"[]\"`）は、機能的には `v-once` と同等です。\n\n **`v-for` での使用**\n\n `v-memo` は、パフォーマンスが重要なシナリオでのミクロな最適化を行うためにのみ提供されており、ほとんど必要ありません。この機能が役に立つ最も一般的なケースは、大きな `v-for` リスト（`length > 1000`）をレンダリングするときです:\n\n ```html\n <div v-for=\"item in list\" :key=\"item.id\" v-memo=\"[item.id === selected]\">\n <p>ID: {{ item.id }} - selected: {{ item.id === selected }}</p>\n <p>...more child nodes</p>\n </div>\n ```\n\n コンポーネントの `selected` 状態が変化すると、ほとんどの項目がまったく同じままであっても、大量の VNode が作成されます。ここでの `v-memo` の使い方は、基本的に「非選択状態から選択状態になった場合のみ、またはその逆の場合のみ、この項目を更新する」というものです。これにより、影響を受けない項目はすべて以前の VNode を再利用し、差分を完全にスキップできます。メモの依存関係の配列に `item.id` を含める必要はないことに注意してください。Vue は自動的に項目の `:key` から推測します。\n\n :::warning\n `v-memo` と `v-for` を併用する場合は、同じ要素で使用されているか確認してください。**`v-memo` は `v-for` の中では動作しません。**\n :::\n\n 子コンポーネントの更新チェックが最適化されていない特定のエッジケースで、不要な更新を手動で防ぐために `v-memo` をコンポーネントに使用できます。しかし、ここでも、必要な更新をスキップしないように正しい依存関係を指定するのは、開発者の責任です。\n\n- **参照**\n - [v-once](#v-once)\n"
|
|
713
713
|
},
|
|
714
714
|
"references": [
|
|
715
715
|
{
|
|
@@ -742,7 +742,7 @@
|
|
|
742
742
|
"name": "v-cloak",
|
|
743
743
|
"description": {
|
|
744
744
|
"kind": "markdown",
|
|
745
|
-
"value": "\nコンパイルされていないテンプレートを、準備が整うまで非表示にするために使用します。\n\n- **式を受け取りません**\n\n- **詳細**\n\n **このディレクティブは、ビルドステップがないセットアップでのみ必要です。**\n\n DOM 内テンプレートを使用する場合、「コンパイルされていないテンプレートのフラッシュ」が発生することがあります。マウントされたコンポーネントがそれをレンダリングされたコンテンツに置き換えるまで、未加工のマスタッシュタグがユーザーに表示される場合があります。\n\n `v-cloak` は関連するコンポーネントインスタンスがマウントされるまで、その要素に残ります。`[v-cloak] { display: none }` のような CSS ルールと組み合わせることで、コンポーネントの準備が整うまで未加工のテンプレートを非表示にできます。\n\n-
|
|
745
|
+
"value": "\nコンパイルされていないテンプレートを、準備が整うまで非表示にするために使用します。\n\n- **式を受け取りません**\n\n- **詳細**\n\n **このディレクティブは、ビルドステップがないセットアップでのみ必要です。**\n\n DOM 内テンプレートを使用する場合、「コンパイルされていないテンプレートのフラッシュ」が発生することがあります。マウントされたコンポーネントがそれをレンダリングされたコンテンツに置き換えるまで、未加工のマスタッシュタグがユーザーに表示される場合があります。\n\n `v-cloak` は関連するコンポーネントインスタンスがマウントされるまで、その要素に残ります。`[v-cloak] { display: none }` のような CSS ルールと組み合わせることで、コンポーネントの準備が整うまで未加工のテンプレートを非表示にできます。\n\n- **例**\n\n ```css\n [v-cloak] {\n display: none;\n }\n ```\n\n ```html\n <div v-cloak>\n {{ message }}\n </div>\n ```\n\n この `<div>` はコンパイルが完了するまで表示されません。\n"
|
|
746
746
|
},
|
|
747
747
|
"references": [
|
|
748
748
|
{
|
|
@@ -775,7 +775,7 @@
|
|
|
775
775
|
"name": "key",
|
|
776
776
|
"description": {
|
|
777
777
|
"kind": "markdown",
|
|
778
|
-
"value": "\n特別な属性 `key` は、主に Vue の仮想 DOM アルゴリズムが新しいノードリストを古いリストに対して差分する際に、vnode を識別するためのヒントとして使用されます。\n\n- **期待する値:** `number | string | symbol`\n\n- **詳細**\n\n キーがない場合、Vue は要素の移動を最小限に抑え、同じタイプの要素をできるだけその場でパッチ/再利用しようとするアルゴリズムを使用します。キーがある場合は、キーの順序変更に基づいて要素を並べ替え、存在しなくなったキーを持つ要素は常に削除/破棄されます。\n\n 共通の同じ親を持つ子は、**ユニークなキー**を持つ必要があります。キーが重複するとレンダリングエラーになります。\n\n `v-for` と組み合わせるのが最も一般的な使用例です:\n\n ```html\n <ul>\n <li v-for=\"item in items\" :key=\"item.id\">...</li>\n </ul>\n ```\n\n また、要素/コンポーネントを再利用するのではなく、強制的に置き換えるためにも使用できます。これは、次のような場合に便利です:\n\n - コンポーネントのライフサイクルフックを適切にトリガーする\n - トランジションをトリガーする\n\n 例えば:\n\n ```html\n <transition>\n <span :key=\"text\">{{ text }}</span>\n </transition>\n ```\n\n `text` が変更されると、`<span>` はパッチされるのではなく、常に置き換えられるので、トランジションがトリガーされます。\n\n-
|
|
778
|
+
"value": "\n特別な属性 `key` は、主に Vue の仮想 DOM アルゴリズムが新しいノードリストを古いリストに対して差分する際に、vnode を識別するためのヒントとして使用されます。\n\n- **期待する値:** `number | string | symbol`\n\n- **詳細**\n\n キーがない場合、Vue は要素の移動を最小限に抑え、同じタイプの要素をできるだけその場でパッチ/再利用しようとするアルゴリズムを使用します。キーがある場合は、キーの順序変更に基づいて要素を並べ替え、存在しなくなったキーを持つ要素は常に削除/破棄されます。\n\n 共通の同じ親を持つ子は、**ユニークなキー**を持つ必要があります。キーが重複するとレンダリングエラーになります。\n\n `v-for` と組み合わせるのが最も一般的な使用例です:\n\n ```html\n <ul>\n <li v-for=\"item in items\" :key=\"item.id\">...</li>\n </ul>\n ```\n\n また、要素/コンポーネントを再利用するのではなく、強制的に置き換えるためにも使用できます。これは、次のような場合に便利です:\n\n - コンポーネントのライフサイクルフックを適切にトリガーする\n - トランジションをトリガーする\n\n 例えば:\n\n ```html\n <transition>\n <span :key=\"text\">{{ text }}</span>\n </transition>\n ```\n\n `text` が変更されると、`<span>` はパッチされるのではなく、常に置き換えられるので、トランジションがトリガーされます。\n\n- **参照** [ガイド - リストレンダリング - `key` による状態管理](https://ja.vuejs.org/guide/essentials/list.html#maintaining-state-with-key)\n"
|
|
779
779
|
},
|
|
780
780
|
"references": [
|
|
781
781
|
{
|
|
@@ -808,7 +808,7 @@
|
|
|
808
808
|
"name": "ref",
|
|
809
809
|
"description": {
|
|
810
810
|
"kind": "markdown",
|
|
811
|
-
"value": "\n[テンプレート参照](https://ja.vuejs.org/guide/essentials/template-refs.html)を表します。\n\n- **期待する値:** `string | Function`\n\n- **詳細**\n\n `ref` は、要素や子コンポーネントへの参照を登録するために使用します。\n\n Options API では、この参照はコンポーネントの `this.$refs` オブジェクトの下に登録されます:\n\n ```html\n <!-- this.$refs.p として格納される -->\n <p ref=\"p\">hello</p>\n ```\n\n Composition API では、一致する名前の ref に参照が格納されます:\n\n ```vue\n <script setup>\n import { ref } from 'vue'\n\n const p = ref()\n </script>\n\n <template>\n <p ref=\"p\">hello</p>\n </template>\n ```\n\n もしプレーンな DOM 要素で使用された場合、その要素への参照になります。もし子コンポーネントで使用された場合は、そのコンポーネントのインスタンスへの参照になります。\n\n また、`ref` には関数も受け付けるので、参照を保存する場所を完全に制御できます:\n\n ```html\n <ChildComponent :ref=\"(el) => child = el\" />\n ```\n\n ref の登録タイミングに関する重要な注意点として、ref 自体はレンダー関数の結果として作成されるので、コンポーネントがマウントされるまで待ってからアクセスする必要があります。\n\n `this.$refs` はリアクティブではないので、テンプレート内でデータバインディングのために使わないでください。\n\n-
|
|
811
|
+
"value": "\n[テンプレート参照](https://ja.vuejs.org/guide/essentials/template-refs.html)を表します。\n\n- **期待する値:** `string | Function`\n\n- **詳細**\n\n `ref` は、要素や子コンポーネントへの参照を登録するために使用します。\n\n Options API では、この参照はコンポーネントの `this.$refs` オブジェクトの下に登録されます:\n\n ```html\n <!-- this.$refs.p として格納される -->\n <p ref=\"p\">hello</p>\n ```\n\n Composition API では、一致する名前の ref に参照が格納されます:\n\n ```vue\n <script setup>\n import { ref } from 'vue'\n\n const p = ref()\n </script>\n\n <template>\n <p ref=\"p\">hello</p>\n </template>\n ```\n\n もしプレーンな DOM 要素で使用された場合、その要素への参照になります。もし子コンポーネントで使用された場合は、そのコンポーネントのインスタンスへの参照になります。\n\n また、`ref` には関数も受け付けるので、参照を保存する場所を完全に制御できます:\n\n ```html\n <ChildComponent :ref=\"(el) => child = el\" />\n ```\n\n ref の登録タイミングに関する重要な注意点として、ref 自体はレンダー関数の結果として作成されるので、コンポーネントがマウントされるまで待ってからアクセスする必要があります。\n\n `this.$refs` はリアクティブではないので、テンプレート内でデータバインディングのために使わないでください。\n\n- **参照**\n - [ガイド - テンプレート参照](https://ja.vuejs.org/guide/essentials/template-refs.html)\n - [ガイド - テンプレート参照の型付け](https://ja.vuejs.org/guide/typescript/composition-api.html#typing-template-refs) <sup class=\"vt-badge ts\" />\n - [ガイド - コンポーネントのテンプレート参照の型付け](https://ja.vuejs.org/guide/typescript/composition-api.html#typing-component-template-refs) <sup class=\"vt-badge ts\" />\n"
|
|
812
812
|
},
|
|
813
813
|
"references": [
|
|
814
814
|
{
|
|
@@ -841,7 +841,7 @@
|
|
|
841
841
|
"name": "is",
|
|
842
842
|
"description": {
|
|
843
843
|
"kind": "markdown",
|
|
844
|
-
"value": "\n[動的コンポーネント](https://ja.vuejs.org/guide/essentials/component-basics.html#dynamic-components)のバインディングに使用します。\n\n- **期待する値:** `string | Component`\n\n- **ネイティブ要素での使用** <sup class=\"vt-badge\">3.1+</sup>\n\n ネイティブの HTML 要素で `is` 属性が使われている場合、[Customized built-in element](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-customized-builtin-example) として解釈されます。これは、ネイティブの Web プラットフォームの機能です。\n\n しかし、[DOM テンプレート解析の注意点](https://ja.vuejs.org/guide/essentials/component-basics.html#dom-template-parsing-caveats)で説明したように、ネイティブ要素を Vue コンポーネントに置き換えるためには Vue が必要になる場合があります。`is` 属性の値の前に `vue:` を付けると、Vue はその要素を Vue コンポーネントとしてレンダリングします:\n\n ```html\n <table>\n <tr is=\"vue:my-row-component\"></tr>\n </table>\n ```\n\n-
|
|
844
|
+
"value": "\n[動的コンポーネント](https://ja.vuejs.org/guide/essentials/component-basics.html#dynamic-components)のバインディングに使用します。\n\n- **期待する値:** `string | Component`\n\n- **ネイティブ要素での使用** <sup class=\"vt-badge\">3.1+</sup>\n\n ネイティブの HTML 要素で `is` 属性が使われている場合、[Customized built-in element](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-customized-builtin-example) として解釈されます。これは、ネイティブの Web プラットフォームの機能です。\n\n しかし、[DOM テンプレート解析の注意点](https://ja.vuejs.org/guide/essentials/component-basics.html#dom-template-parsing-caveats)で説明したように、ネイティブ要素を Vue コンポーネントに置き換えるためには Vue が必要になる場合があります。`is` 属性の値の前に `vue:` を付けると、Vue はその要素を Vue コンポーネントとしてレンダリングします:\n\n ```html\n <table>\n <tr is=\"vue:my-row-component\"></tr>\n </table>\n ```\n\n- **参照**\n\n - [ビルトインの特別な要素 - `<component>`](https://ja.vuejs.org/api/built-in-special-elements.html#component)\n - [動的コンポーネント](https://ja.vuejs.org/guide/essentials/component-basics.html#dynamic-components)\n"
|
|
845
845
|
},
|
|
846
846
|
"references": [
|
|
847
847
|
{
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vue/language-service",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.8.0-patch.1",
|
|
4
4
|
"main": "out/index.js",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"files": [
|
|
@@ -17,28 +17,28 @@
|
|
|
17
17
|
"update-html-data": "node ./scripts/update-html-data.js"
|
|
18
18
|
},
|
|
19
19
|
"dependencies": {
|
|
20
|
-
"@volar/language-core": "1.7.
|
|
21
|
-
"@volar/language-service": "1.7.
|
|
22
|
-
"@volar/typescript": "1.7.
|
|
20
|
+
"@volar/language-core": "1.7.7",
|
|
21
|
+
"@volar/language-service": "1.7.7",
|
|
22
|
+
"@volar/typescript": "1.7.7",
|
|
23
23
|
"@vue/compiler-dom": "^3.3.0",
|
|
24
|
-
"@vue/language-core": "1.
|
|
24
|
+
"@vue/language-core": "1.8.0-patch.1",
|
|
25
25
|
"@vue/reactivity": "^3.3.0",
|
|
26
26
|
"@vue/shared": "^3.3.0",
|
|
27
|
-
"volar-service-css": "0.0.
|
|
28
|
-
"volar-service-emmet": "0.0.
|
|
29
|
-
"volar-service-html": "0.0.
|
|
30
|
-
"volar-service-json": "0.0.
|
|
31
|
-
"volar-service-pug": "0.0.
|
|
32
|
-
"volar-service-pug-beautify": "0.0.
|
|
33
|
-
"volar-service-typescript": "0.0.
|
|
34
|
-
"volar-service-typescript-twoslash-queries": "0.0.
|
|
27
|
+
"volar-service-css": "0.0.8",
|
|
28
|
+
"volar-service-emmet": "0.0.8",
|
|
29
|
+
"volar-service-html": "0.0.8",
|
|
30
|
+
"volar-service-json": "0.0.8",
|
|
31
|
+
"volar-service-pug": "0.0.8",
|
|
32
|
+
"volar-service-pug-beautify": "0.0.8",
|
|
33
|
+
"volar-service-typescript": "0.0.8",
|
|
34
|
+
"volar-service-typescript-twoslash-queries": "0.0.8",
|
|
35
35
|
"vscode-html-languageservice": "^5.0.4",
|
|
36
36
|
"vscode-languageserver-textdocument": "^1.0.8"
|
|
37
37
|
},
|
|
38
38
|
"devDependencies": {
|
|
39
|
-
"@volar/kit": "1.7.
|
|
39
|
+
"@volar/kit": "1.7.7",
|
|
40
40
|
"vscode-languageserver-protocol": "^3.17.3",
|
|
41
41
|
"vscode-uri": "^3.0.7"
|
|
42
42
|
},
|
|
43
|
-
"gitHead": "
|
|
43
|
+
"gitHead": "5d5fc89edd2897b5eb2a143524a1f04775cffda3"
|
|
44
44
|
}
|