@vue/language-service 1.9.0-alpha.3 → 2.0.1

package/data/template/en.json

@@ -5,7 +5,7 @@
       "name": "Transition",
       "description": {
         "kind": "markdown",
-        "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"
+        "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** [Guide - Transition](https://vuejs.org/guide/built-ins/transition.html)\n"
       },
       "attributes": [],
       "references": [
@@ -736,7 +736,7 @@
       "name": "v-bind",
       "description": {
         "kind": "markdown",
-        "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"
+        "value": "\nDynamically bind one or more attributes, or a component prop to an expression.\n\n- **Shorthand:**\n  - `:` or `.` (when using `.prop` modifier)\n  - Omitting value (when attribute and bound value has the same name) <sup class=\"vt-badge\">3.4+</sup>\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  <!-- same-name shorthand (3.4+), expands to :src=\"src\" -->\n  <img :src />\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"
       },
       "references": [
         {

package/data/template/fr.json

@@ -736,7 +736,7 @@
       "name": "v-bind",
       "description": {
         "kind": "markdown",
-        "value": "\nLie dynamiquement un ou plusieurs attributs, ou une prop d'un composant à une expression.\n\n- **Raccourci :** `:` ou `.` (lorsqu'on utilise le modificateur `.prop`)\n\n- **Attendu :** `any (avec argument) | Object (sans argument)`\n\n- **Argument :** `attrOrProp (optionnel)`\n\n- **Modificateurs**\n\n  - `.camel` - transforme le nom de l'attribut kebab-case en camelCase.\n  - `.prop` - force une liaison à être définie comme une propriété du DOM. <sup class=\"vt-badge\">3.2+</sup>\n  - `.attr` - force une liaison à être définie comme un attribut du DOM. <sup class=\"vt-badge\">3.2+</sup>\n\n- **Utilisation :**\n\n  Lorsqu'elle est utilisée pour lier l'attribut `class` ou `style`, `v-bind` supporte des types de valeurs supplémentaires comme Array ou Objects. Voir la section du guide lié ci-dessous pour plus de détails.\n\n  Lors de la mise en place d'une liaison sur un élément, Vue va vérifier par défaut si l'élément a la clé définie comme une propriété en faisant une vérification de l'opérateur `in`. Si la propriété est définie, Vue définira la valeur comme une propriété du DOM au lieu d'un attribut. Cela devrait fonctionner dans la plupart des cas, mais vous pouvez outrepasser ce comportement en utilisant explicitement les modificateurs `.prop` ou `.attr`. Cela est parfois nécessaire, notamment lorsque vous [travaillez avec des éléments personnalisés](https://fr.vuejs.org/guide/extras/web-components.html#passing-dom-properties).\n\n  Lorsqu'elle est utilisée pour lier les props du composant, la prop doit être correctement déclarée dans le composant enfant.\n\n  Lorsqu'elle est utilisée sans argument, elle peut être utilisée pour lier un objet contenant des paires nom-valeur d'attributs.\n\n- **Exemple**\n\n  ```html\n  <!-- lie un attribut -->\n  <img v-bind:src=\"imageSrc\" />\n\n  <!-- nom d'attribut dynamique -->\n  <button v-bind:[key]=\"value\"></button>\n\n  <!-- raccourci -->\n  <img :src=\"imageSrc\" />\n\n  <!-- raccourci d'un nom d'attribut dynamique -->\n  <button :[key]=\"value\"></button>\n\n  <!-- avec une concaténation de chaînes de caractères en ligne -->\n  <img :src=\"'/path/to/images/' + fileName\" />\n\n  <!-- liaison de classe -->\n  <div :class=\"{ red: isRed }\"></div>\n  <div :class=\"[classA, classB]\"></div>\n  <div :class=\"[classA, { classB: isB, classC: isC }]\"></div>\n\n  <!-- liaison de style -->\n  <div :style=\"{ fontSize: size + 'px' }\"></div>\n  <div :style=\"[styleObjectA, styleObjectB]\"></div>\n\n  <!-- liaison d'un objet d'attributs -->\n  <div v-bind=\"{ id: someProp, 'other-attr': otherProp }\"></div>\n\n  <!-- liaison de prop. \"prop\" doit être déclaré dans le composant enfant. -->\n  <MyComponent :prop=\"someThing\" />\n\n  <!-- transmet les props du parent en commun avec un composant enfant -->\n  <MyComponent v-bind=\"$props\" />\n\n  <!-- XLink -->\n  <svg><a :xlink:special=\"foo\"></a></svg>\n  ```\n\n  Le modificateur `.prop` a également un raccourci dédié, `.` :\n\n  ```html\n  <div :someProperty.prop=\"someObject\"></div>\n\n  <!-- équivalent à -->\n  <div .someProperty=\"someObject\"></div>\n  ```\n\n  Le modificateur `.camel` permet de formatter un nom d'attribut `v-bind` en camelCase lors de l'utilisation de templates à l'intérieur du DOM, par exemple l'attribut SVG `viewBox` :\n\n  ```html\n  <svg :view-box.camel=\"viewBox\"></svg>\n  ```\n\n  `.camel` n'est pas nécessaire si vous utilisez des templates en chaînes de caractères, ou si vous pré-compilez le template avec un outil de build.\n\n- **Voir aussi**\n  - [Liaison de classes et de styles](https://fr.vuejs.org/guide/essentials/class-and-style.html)\n  - [Composant - Détails sur le passage de props](https://fr.vuejs.org/guide/components/props.html#prop-passing-details)\n"
+        "value": "\nLie dynamiquement un ou plusieurs attributs, ou une prop d'un composant à une expression.\n\n- **Raccourci :** \n  - `:` ou `.` (lorsqu'on utilise le modificateur `.prop`)\n  - En omettant la valeur (lorsque l'attribut et la valeur liée portent le même nom) <sup class=\"vt-badge\">3.4+</sup>\n\n- **Attendu :** `any (avec argument) | Object (sans argument)`\n\n- **Argument :** `attrOrProp (optionnel)`\n\n- **Modificateurs**\n\n  - `.camel` - transforme le nom de l'attribut kebab-case en camelCase.\n  - `.prop` - force une liaison à être définie comme une propriété du DOM. <sup class=\"vt-badge\">3.2+</sup>\n  - `.attr` - force une liaison à être définie comme un attribut du DOM. <sup class=\"vt-badge\">3.2+</sup>\n\n- **Utilisation :**\n\n  Lorsqu'elle est utilisée pour lier l'attribut `class` ou `style`, `v-bind` supporte des types de valeurs supplémentaires comme Array ou Objects. Voir la section du guide lié ci-dessous pour plus de détails.\n\n  Lors de la mise en place d'une liaison sur un élément, Vue va vérifier par défaut si l'élément a la clé définie comme une propriété en faisant une vérification de l'opérateur `in`. Si la propriété est définie, Vue définira la valeur comme une propriété du DOM au lieu d'un attribut. Cela devrait fonctionner dans la plupart des cas, mais vous pouvez outrepasser ce comportement en utilisant explicitement les modificateurs `.prop` ou `.attr`. Cela est parfois nécessaire, notamment lorsque vous [travaillez avec des éléments personnalisés](https://fr.vuejs.org/guide/extras/web-components.html#passing-dom-properties).\n\n  Lorsqu'elle est utilisée pour lier les props du composant, la prop doit être correctement déclarée dans le composant enfant.\n\n  Lorsqu'elle est utilisée sans argument, elle peut être utilisée pour lier un objet contenant des paires nom-valeur d'attributs.\n\n- **Exemple**\n\n  ```html\n  <!-- lie un attribut -->\n  <img v-bind:src=\"imageSrc\" />\n\n  <!-- nom d'attribut dynamique -->\n  <button v-bind:[key]=\"value\"></button>\n\n  <!-- raccourci -->\n  <img :src=\"imageSrc\" />\n\n  <!-- raccourci même nom (3.4+), se transforme en :src=\"src\" -->\n  <img :src />\n  \n  <!-- raccourci d'un nom d'attribut dynamique -->\n  <button :[key]=\"value\"></button>\n\n  <!-- avec une concaténation de chaînes de caractères en ligne -->\n  <img :src=\"'/path/to/images/' + fileName\" />\n\n  <!-- liaison de classe -->\n  <div :class=\"{ red: isRed }\"></div>\n  <div :class=\"[classA, classB]\"></div>\n  <div :class=\"[classA, { classB: isB, classC: isC }]\"></div>\n\n  <!-- liaison de style -->\n  <div :style=\"{ fontSize: size + 'px' }\"></div>\n  <div :style=\"[styleObjectA, styleObjectB]\"></div>\n\n  <!-- liaison d'un objet d'attributs -->\n  <div v-bind=\"{ id: someProp, 'other-attr': otherProp }\"></div>\n\n  <!-- liaison de prop. \"prop\" doit être déclaré dans le composant enfant. -->\n  <MyComponent :prop=\"someThing\" />\n\n  <!-- transmet les props du parent en commun avec un composant enfant -->\n  <MyComponent v-bind=\"$props\" />\n\n  <!-- XLink -->\n  <svg><a :xlink:special=\"foo\"></a></svg>\n  ```\n\n  Le modificateur `.prop` a également un raccourci dédié, `.` :\n\n  ```html\n  <div :someProperty.prop=\"someObject\"></div>\n\n  <!-- équivalent à -->\n  <div .someProperty=\"someObject\"></div>\n  ```\n\n  Le modificateur `.camel` permet de formatter un nom d'attribut `v-bind` en camelCase lors de l'utilisation de templates à l'intérieur du DOM, par exemple l'attribut SVG `viewBox` :\n\n  ```html\n  <svg :view-box.camel=\"viewBox\"></svg>\n  ```\n\n  `.camel` n'est pas nécessaire si vous utilisez des templates en chaînes de caractères, ou si vous pré-compilez le template avec un outil de build.\n\n- **Voir aussi**\n  - [Liaison de classes et de styles](https://fr.vuejs.org/guide/essentials/class-and-style.html)\n  - [Composant - Détails sur le passage de props](https://fr.vuejs.org/guide/components/props.html#prop-passing-details)\n"
       },
       "references": [
         {

package/data/template/ja.json

@@ -5,7 +5,7 @@
       "name": "Transition",
       "description": {
         "kind": "markdown",
-        "value": "\n**単一の**要素またはコンポーネントにアニメーションのトランジション効果を提供します。\n\n- **props**\n\n  ```ts\n  interface TransitionProps {\n    /**\n     * トランジションの CSS クラス名を自動生成するために使用します。\n     * 例: `name: 'fade'` は `.fade-enter` や `.fade-enter-active`\n     * などに自動展開されます。\n     */\n    name?: string\n    /**\n     * CSS のトランジションクラスを適用するかどうか。\n     * デフォルト: true\n     */\n    css?: boolean\n    /**\n     * トランジション終了タイミングを決定するために待機する、\n     * トランジションイベントの種類を指定します。\n     * デフォルトの動作は、持続時間がより長い方のタイプを\n     * 自動検出します。\n     */\n    type?: 'transition' | 'animation'\n    /**\n     * トランジションの持続時間を明示的に指定します。\n     * デフォルトの動作は、ルートトランジション要素の最初の\n     * `transitionend` または `animationend` イベントを待ちます。\n     */\n    duration?: number | { enter: number; leave: number }\n    /**\n     * leaving/entering トランジションのタイミングシーケンスを制御。\n     * デフォルトの動作は同時です。\n     */\n    mode?: 'in-out' | 'out-in' | 'default'\n    /**\n     * 初回レンダリング時にトランジションを適用するかどうか。\n     * デフォルト: false\n     */\n    appear?: boolean\n\n    /**\n     * トランジションクラスをカスタマイズするための props。\n     * テンプレートでは kebab-case を使用（例: enter-from-class=\"xxx\"）\n     */\n    enterFromClass?: string\n    enterActiveClass?: string\n    enterToClass?: string\n    appearFromClass?: string\n    appearActiveClass?: string\n    appearToClass?: string\n    leaveFromClass?: string\n    leaveActiveClass?: string\n    leaveToClass?: string\n  }\n  ```\n\n- **イベント**\n\n  - `@before-enter`\n  - `@before-leave`\n  - `@enter`\n  - `@leave`\n  - `@appear`\n  - `@after-enter`\n  - `@after-leave`\n  - `@after-appear`\n  - `@enter-cancelled`\n  - `@leave-cancelled`（`v-show` のみ）\n  - `@appear-cancelled`\n\n- **例**\n\n  シンプルな要素:\n\n  ```html\n  <Transition>\n    <div v-if=\"ok\">toggled content</div>\n  </Transition>\n  ```\n\n  `key` 属性を変更することで強制的にトランジションさせる:\n\n  ```html\n  <Transition>\n    <div :key=\"text\">{{ text }}</div>\n  </Transition>\n  ```\n\n  トランジションモードと出現時のアニメーションを備えている動的コンポーネント:\n\n  ```html\n  <Transition name=\"fade\" mode=\"out-in\" appear>\n    <component :is=\"view\"></component>\n  </Transition>\n  ```\n\n  トランジションイベントを購読する:\n\n  ```html\n  <Transition @after-enter=\"onTransitionComplete\">\n    <div v-show=\"ok\">toggled content</div>\n  </Transition>\n  ```\n\n- **参照** [`<Transition>` ガイド](https://ja.vuejs.org/guide/built-ins/transition.html)\n"
+        "value": "\n**単一の**要素またはコンポーネントにアニメーションのトランジション効果を提供します。\n\n- **props**\n\n  ```ts\n  interface TransitionProps {\n    /**\n     * トランジションの CSS クラス名を自動生成するために使用します。\n     * 例: `name: 'fade'` は `.fade-enter` や `.fade-enter-active`\n     * などに自動展開されます。\n     */\n    name?: string\n    /**\n     * CSS のトランジションクラスを適用するかどうか。\n     * デフォルト: true\n     */\n    css?: boolean\n    /**\n     * トランジション終了タイミングを決定するために待機する、\n     * トランジションイベントの種類を指定します。\n     * デフォルトの動作は、持続時間がより長い方のタイプを\n     * 自動検出します。\n     */\n    type?: 'transition' | 'animation'\n    /**\n     * トランジションの持続時間を明示的に指定します。\n     * デフォルトの動作は、ルートトランジション要素の最初の\n     * `transitionend` または `animationend` イベントを待ちます。\n     */\n    duration?: number | { enter: number; leave: number }\n    /**\n     * leaving/entering トランジションのタイミングシーケンスを制御。\n     * デフォルトの動作は同時です。\n     */\n    mode?: 'in-out' | 'out-in' | 'default'\n    /**\n     * 初回レンダリング時にトランジションを適用するかどうか。\n     * デフォルト: false\n     */\n    appear?: boolean\n\n    /**\n     * トランジションクラスをカスタマイズするための props。\n     * テンプレートでは kebab-case を使用（例: enter-from-class=\"xxx\"）\n     */\n    enterFromClass?: string\n    enterActiveClass?: string\n    enterToClass?: string\n    appearFromClass?: string\n    appearActiveClass?: string\n    appearToClass?: string\n    leaveFromClass?: string\n    leaveActiveClass?: string\n    leaveToClass?: string\n  }\n  ```\n\n- **イベント**\n\n  - `@before-enter`\n  - `@before-leave`\n  - `@enter`\n  - `@leave`\n  - `@appear`\n  - `@after-enter`\n  - `@after-leave`\n  - `@after-appear`\n  - `@enter-cancelled`\n  - `@leave-cancelled`（`v-show` のみ）\n  - `@appear-cancelled`\n\n- **例**\n\n  シンプルな要素:\n\n  ```html\n  <Transition>\n    <div v-if=\"ok\">toggled content</div>\n  </Transition>\n  ```\n\n  `key` 属性を変更することで強制的にトランジションさせる:\n\n  ```html\n  <Transition>\n    <div :key=\"text\">{{ text }}</div>\n  </Transition>\n  ```\n\n  トランジションモードと出現時のアニメーションを備えている動的コンポーネント:\n\n  ```html\n  <Transition name=\"fade\" mode=\"out-in\" appear>\n    <component :is=\"view\"></component>\n  </Transition>\n  ```\n\n  トランジションイベントを購読する:\n\n  ```html\n  <Transition @after-enter=\"onTransitionComplete\">\n    <div v-show=\"ok\">toggled content</div>\n  </Transition>\n  ```\n\n- **参照** [ガイド - Transition](https://ja.vuejs.org/guide/built-ins/transition.html)\n"
       },
       "attributes": [],
       "references": [
@@ -736,7 +736,7 @@
       "name": "v-bind",
       "description": {
         "kind": "markdown",
-        "value": "\n1 つ以上の属性やコンポーネントの props を式に動的にバインドします。\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  コンポーネントの props をバインドするために使用する場合、その props は子コンポーネントで適切に宣言されている必要があります。\n\n  引数なしで使用する場合、属性の名前と値のペアを含むオブジェクトをバインドするために使用できます。\n\n- **例**\n\n  ```html\n  <!-- 属性をバインドする -->\n  <img v-bind:src=\"imageSrc\" />\n\n  <!-- 動的な属性名 -->\n  <button v-bind:[key]=\"value\"></button>\n\n  <!-- 省略記法 -->\n  <img :src=\"imageSrc\" />\n\n  <!-- 動的な属性名の省略記法 -->\n  <button :[key]=\"value\"></button>\n\n  <!-- インラインの文字列連結 -->\n  <img :src=\"'/path/to/images/' + fileName\" />\n\n  <!-- クラスのバインド -->\n  <div :class=\"{ red: isRed }\"></div>\n  <div :class=\"[classA, classB]\"></div>\n  <div :class=\"[classA, { classB: isB, classC: isC }]\"></div>\n\n  <!-- スタイルのバインド -->\n  <div :style=\"{ fontSize: size + 'px' }\"></div>\n  <div :style=\"[styleObjectA, styleObjectB]\"></div>\n\n  <!-- 属性のオブジェクトをバインド -->\n  <div v-bind=\"{ id: someProp, 'other-attr': otherProp }\"></div>\n\n  <!-- props のバインド。\"prop\" は子コンポーネントで宣言する必要があります。 -->\n  <MyComponent :prop=\"someThing\" />\n\n  <!-- 親の props を子コンポーネントと共有するために渡す -->\n  <MyComponent v-bind=\"$props\" />\n\n  <!-- XLink -->\n  <svg><a :xlink:special=\"foo\"></a></svg>\n  ```\n\n  `.prop` 修飾子には、専用の短縮形 `.` もあります:\n\n  ```html\n  <div :someProperty.prop=\"someObject\"></div>\n\n  <!-- 以下と同じ -->\n  <div .someProperty=\"someObject\"></div>\n  ```\n\n  `.camel` 修飾子は、DOM 内テンプレートを使用する際に、 `v-bind` 属性名をキャメル化できます（例: SVG の `viewBox` 属性）:\n\n  ```html\n  <svg :view-box.camel=\"viewBox\"></svg>\n  ```\n\n  文字列テンプレートを使用する場合や、ビルドステップでテンプレートを事前コンパイルする場合は、`.camel` は必要ありません。\n\n- **参照**\n  - [クラスとスタイルのバインディング](https://ja.vuejs.org/guide/essentials/class-and-style.html)\n  - [コンポーネント - props 渡しの詳細](https://ja.vuejs.org/guide/components/props.html#prop-passing-details)\n"
+        "value": "\n1 つ以上の属性やコンポーネントの props を式に動的にバインドします。\n\n- **省略記法:**\n  - `:` or `.`（`.prop` 修飾子使用時）\n  - 値の省略（属性とバインドされた値が同じ名前の場合）<sup class=\"vt-badge\">3.4+</sup>\n\n- **期待する値:** `any（引数ありの場合） | Object（引数なしの場合）`\n\n- **引数:** `attrOrProp（省略可能）`\n\n- **修飾子**\n\n  - `.camel` - kebab-case の属性名を camelCase に変換します。\n  - `.prop` - バインディングを DOM プロパティとして設定するよう強制します。<sup class=\"vt-badge\">3.2+</sup>\n  - `.attr` - バインディングを DOM 属性として設定するよう強制します。<sup class=\"vt-badge\">3.2+</sup>\n\n- **使用法**\n\n  `class` や `style` 属性をバインドする際に使用する `v-bind` は、Array や Object などの追加の値の型をサポートします。詳しくは、以下のリンク先のガイドを参照してください。\n\n  要素にバインディングを設定するとき、Vue はデフォルトで、`in` 演算子チェックを使用して、プロパティとして定義されたキーが要素にあるかどうかを確認します。プロパティが定義されている場合、Vue はその値を属性ではなく DOM プロパティとして設定します。これはほとんどの場合において有効ですが、`.prop` や `.attr` という修飾子を明示的に使用することでこの動作をオーバーライドできます。これは、特に[カスタム要素を扱う](https://ja.vuejs.org/guide/extras/web-components.html#passing-dom-properties)ときに必要になることがあります。\n\n  コンポーネントの props をバインドするために使用する場合、その props は子コンポーネントで適切に宣言されている必要があります。\n\n  引数なしで使用する場合、属性の名前と値のペアを含むオブジェクトをバインドするために使用できます。\n\n- **例**\n\n  ```html\n  <!-- 属性をバインドする -->\n  <img v-bind:src=\"imageSrc\" />\n\n  <!-- 動的な属性名 -->\n  <button v-bind:[key]=\"value\"></button>\n\n  <!-- 省略記法 -->\n  <img :src=\"imageSrc\" />\n\n  <!-- 同名省略記法 (3.4+), :src=\"src\" のように展開する -->\n  <img :src />\n\n  <!-- 動的な属性名の省略記法 -->\n  <button :[key]=\"value\"></button>\n\n  <!-- インラインの文字列連結 -->\n  <img :src=\"'/path/to/images/' + fileName\" />\n\n  <!-- クラスのバインド -->\n  <div :class=\"{ red: isRed }\"></div>\n  <div :class=\"[classA, classB]\"></div>\n  <div :class=\"[classA, { classB: isB, classC: isC }]\"></div>\n\n  <!-- スタイルのバインド -->\n  <div :style=\"{ fontSize: size + 'px' }\"></div>\n  <div :style=\"[styleObjectA, styleObjectB]\"></div>\n\n  <!-- 属性のオブジェクトをバインド -->\n  <div v-bind=\"{ id: someProp, 'other-attr': otherProp }\"></div>\n\n  <!-- props のバインド。\"prop\" は子コンポーネントで宣言する必要があります。 -->\n  <MyComponent :prop=\"someThing\" />\n\n  <!-- 親の props を子コンポーネントと共有するために渡す -->\n  <MyComponent v-bind=\"$props\" />\n\n  <!-- XLink -->\n  <svg><a :xlink:special=\"foo\"></a></svg>\n  ```\n\n  `.prop` 修飾子には、専用の短縮形 `.` もあります:\n\n  ```html\n  <div :someProperty.prop=\"someObject\"></div>\n\n  <!-- 以下と同じ -->\n  <div .someProperty=\"someObject\"></div>\n  ```\n\n  `.camel` 修飾子は、DOM 内テンプレートを使用する際に、 `v-bind` 属性名をキャメル化できます（例: SVG の `viewBox` 属性）:\n\n  ```html\n  <svg :view-box.camel=\"viewBox\"></svg>\n  ```\n\n  文字列テンプレートを使用する場合や、ビルドステップでテンプレートを事前コンパイルする場合は、`.camel` は必要ありません。\n\n- **参照**\n  - [クラスとスタイルのバインディング](https://ja.vuejs.org/guide/essentials/class-and-style.html)\n  - [コンポーネント - props 渡しの詳細](https://ja.vuejs.org/guide/components/props.html#prop-passing-details)\n"
       },
       "references": [
         {

package/data/template/ko.json

@@ -5,7 +5,7 @@
       "name": "Transition",
       "description": {
         "kind": "markdown",
-        "value": "\n**싱글** 엘리먼트 또는 컴포넌트에 애니메이션 트랜지션 효과를 제공합니다.\n\n- **Props**\n\n  ```ts\n  interface TransitionProps {\n    /**\n     * 트랜지션 CSS 클래스 이름 자동 생성에 사용.\n     * 예를 들어 `name: 'fade'`는 `.fade-enter`,\n     * `.fade-enter-active` 등으로 자동 확장됨.\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     * 진입/진출 트랜지션의 타이밍 순서를 제어.\n     * 기본 동작은 동시.\n     */\n    mode?: 'in-out' | 'out-in' | 'default'\n    /**\n     * 최초 렌더링에 트랜지션을 적용할지 여부.\n     * 기본 값: false\n     */\n    appear?: boolean\n\n    /**\n     * 트랜지션 클래스를 커스텀하기 위한 props.\n     * 템플릿에서 kebab-case를 사용해야 함.\n     * 예: enter-from-class=\"xxx\"\n     */\n    enterFromClass?: string\n    enterActiveClass?: string\n    enterToClass?: string\n    appearFromClass?: string\n    appearActiveClass?: string\n    appearToClass?: string\n    leaveFromClass?: string\n    leaveActiveClass?: string\n    leaveToClass?: string\n  }\n  ```\n\n- **이벤트**:\n\n  - `@before-enter`\n  - `@before-leave`\n  - `@enter`\n  - `@leave`\n  - `@appear`\n  - `@after-enter`\n  - `@after-leave`\n  - `@after-appear`\n  - `@enter-cancelled`\n  - `@leave-cancelled` (`v-show`에서만)\n  - `@appear-cancelled`\n\n- **예제**\n\n  간단한 엘리먼트:\n\n  ```html\n  <Transition>\n    <div v-if=\"ok\">토글된 컨텐츠</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\">토글된 컨텐츠</div>\n  </Transition>\n  ```\n\n- **참고** [가이드 - `<Transition>`](https://ko.vuejs.org/guide/built-ins/transition.html)\n"
+        "value": "\n**싱글** 엘리먼트 또는 컴포넌트에 애니메이션 트랜지션 효과를 제공합니다.\n\n- **Props**\n\n  ```ts\n  interface TransitionProps {\n    /**\n     * 트랜지션 CSS 클래스 이름 자동 생성에 사용.\n     * 예를 들어 `name: 'fade'`는 `.fade-enter`,\n     * `.fade-enter-active` 등으로 자동 확장됨.\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     * 진입/진출 트랜지션의 타이밍 순서를 제어.\n     * 기본 동작은 동시.\n     */\n    mode?: 'in-out' | 'out-in' | 'default'\n    /**\n     * 최초 렌더링에 트랜지션을 적용할지 여부.\n     * 기본 값: false\n     */\n    appear?: boolean\n\n    /**\n     * 트랜지션 클래스를 커스텀하기 위한 props.\n     * 템플릿에서 kebab-case를 사용해야 함.\n     * 예: enter-from-class=\"xxx\"\n     */\n    enterFromClass?: string\n    enterActiveClass?: string\n    enterToClass?: string\n    appearFromClass?: string\n    appearActiveClass?: string\n    appearToClass?: string\n    leaveFromClass?: string\n    leaveActiveClass?: string\n    leaveToClass?: string\n  }\n  ```\n\n- **이벤트**:\n\n  - `@before-enter`\n  - `@before-leave`\n  - `@enter`\n  - `@leave`\n  - `@appear`\n  - `@after-enter`\n  - `@after-leave`\n  - `@after-appear`\n  - `@enter-cancelled`\n  - `@leave-cancelled` (`v-show`에서만)\n  - `@appear-cancelled`\n\n- **예제**\n\n  간단한 엘리먼트:\n\n  ```html\n  <Transition>\n    <div v-if=\"ok\">토글된 컨텐츠</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\">토글된 컨텐츠</div>\n  </Transition>\n  ```\n\n- **참고** [가이드 - Transition](https://ko.vuejs.org/guide/built-ins/transition.html)\n"
       },
       "attributes": [],
       "references": [
@@ -375,7 +375,7 @@
       "name": "v-text",
       "description": {
         "kind": "markdown",
-        "value": "\n엘리먼트의 텍스트 컨텐츠를 업데이트합니다.\n\n- **요구되는 값**: `string`\n\n- **세부 사항**:\n\n  `v-text`는 엘리먼트의 [텍스트 컨텐츠](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) 속성을 설정하므로,\n  엘리먼트 내부의 기존 컨텐츠를 덮어씁니다.\n  `텍스트 컨텐츠`의 일부를 업데이트해야 하는 경우,\n  [이중 중괄호](https://ko.vuejs.org/guide/essentials/template-syntax.html#text-interpolation)를 사용해야 합니다.\n\n- **예제**\n\n  ```html\n  <span v-text=\"msg\"></span>\n  <!-- 아래와 같음 -->\n  <span>{{msg}}</span>\n  ```\n\n- **참고**: [템플릿 문법 - 텍스트 보간법](https://ko.vuejs.org/guide/essentials/template-syntax.html#text-interpolation)\n"
+        "value": "\n엘리먼트의 텍스트 컨텐츠를 업데이트합니다.\n\n- **요구되는 값**: `string`\n\n- **세부 사항**:\n\n  `v-text`는 엘리먼트의 [텍스트 컨텐츠](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) 속성을 설정하므로, 엘리먼트 내부의 기존 컨텐츠를 덮어씁니다. `텍스트 컨텐츠`의 일부를 업데이트해야 하는 경우, [이중 중괄호](https://ko.vuejs.org/guide/essentials/template-syntax.html#text-interpolation)를 사용해야 합니다.\n\n- **예제**\n\n  ```html\n  <span v-text=\"msg\"></span>\n  <!-- 아래와 같음 -->\n  <span>{{msg}}</span>\n  ```\n\n- **참고**: [템플릿 문법 - 텍스트 보간법](https://ko.vuejs.org/guide/essentials/template-syntax.html#text-interpolation)\n"
       },
       "references": [
         {
@@ -420,7 +420,7 @@
       "name": "v-html",
       "description": {
         "kind": "markdown",
-        "value": "\n엘리먼트의 [innerHTML](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML)을 업데이트합니다.\n\n- **요구되는 값**: `string`\n\n- **세부 사항**:\n\n  `v-html`의 내용은 Vue 템플릿 문법을 처리하지 않고 일반 HTML로 삽입됩니다.\n  `v-html`을 사용하여 템플릿을 작성하려고 한다면,\n  이 방법 대신 컴포넌트를 사용하여 해결하는 방법을 고민해봐야 합니다.\n\n  ::: warning 보안 참고 사항\n  웹사이트에서 임의의 HTML을 동적으로 렌더링하는 것은 [XSS 공격](https://en.wikipedia.org/wiki/Cross-site_scripting)으로 쉽게 이어질 수 있기 때문에 매우 위험할 수 있습니다.\n  신뢰할 수 있는 컨텐츠에만 `v-html`을 사용하고,\n  사용자가 제공하는 컨텐츠에는 **절대** 사용하면 안됩니다.\n  :::\n\n  [싱글 파일 컴포넌트(SFC)](https://ko.vuejs.org/guide/scaling-up/sfc.html)에서 `scoped`(범위를 지정한) Style은 `v-html` 내부 컨텐츠에 적용되지 않습니다.\n  왜냐하면 해당 HTML은 Vue의 템플릿 컴파일러에서 처리되지 않기 때문입니다.\n  범위를 지정한 CSS로 `v-html` 컨텐츠를 대상으로 지정하려는 경우,\n  [CSS 모듈](./sfc-css-features#css-modules) 또는 BEM과 같은 수동 범위 지정 방법과 함께 전역 `<style>` 엘리먼트를 사용할 수 있습니다.\n\n- **예제**\n\n  ```html\n  <div v-html=\"html\"></div>\n  ```\n\n- **참고**: [템플릿 문법 - HTML 출력](https://ko.vuejs.org/guide/essentials/template-syntax.html#raw-html)\n"
+        "value": "\n엘리먼트의 [innerHTML](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML)을 업데이트합니다.\n\n- **요구되는 값**: `string`\n\n- **세부 사항**:\n\n  `v-html`의 내용은 Vue 템플릿 문법을 처리하지 않고 일반 HTML로 삽입됩니다. `v-html`을 사용하여 템플릿을 작성하려고 한다면, 이 방법 대신 컴포넌트를 사용하여 해결하는 방법을 고민해봐야 합니다.\n\n  ::: warning 보안 참고 사항\n  웹사이트에서 임의의 HTML을 동적으로 렌더링하는 것은 [XSS 공격](https://en.wikipedia.org/wiki/Cross-site_scripting)으로 쉽게 이어질 수 있기 때문에 매우 위험할 수 있습니다. 신뢰할 수 있는 컨텐츠에만 `v-html`을 사용하고, 사용자가 제공하는 컨텐츠에는 **절대** 사용하면 안됩니다.\n  :::\n\n  [싱글 파일 컴포넌트(SFC)](https://ko.vuejs.org/guide/scaling-up/sfc.html)에서 `scoped`(범위를 지정한) Style은 `v-html` 내부 컨텐츠에 적용되지 않습니다. 왜냐하면 해당 HTML은 Vue의 템플릿 컴파일러에서 처리되지 않기 때문입니다. 범위를 지정한 CSS로 `v-html` 컨텐츠를 대상으로 지정하려는 경우, [CSS 모듈](./sfc-css-features#css-modules) 또는 BEM과 같은 수동 범위 지정 방법과 함께 전역 `<style>` 엘리먼트를 사용할 수 있습니다.\n\n- **예제**\n\n  ```html\n  <div v-html=\"html\"></div>\n  ```\n\n- **참고**: [템플릿 문법 - HTML 출력](https://ko.vuejs.org/guide/essentials/template-syntax.html#raw-html)\n"
       },
       "references": [
         {
@@ -465,7 +465,7 @@
       "name": "v-show",
       "description": {
         "kind": "markdown",
-        "value": "\n표현식의 [truthy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy) 값을 기반으로 엘리먼트의 가시성을 전환합니다.\n\n- **요구되는 값**: `any`\n\n- **세부 사항**:\n\n  `v-show`는 인라인 스타일을 통해 `display` CSS 속성을 설정하며,\n  엘리먼트가 표시될 때 초기 `display` 값을 설정하려고 시도합니다.\n  또한 조건이 변경될 때 전환을 트리거합니다.\n\n- **참고**: [조건부 렌더링 - v-show](https://ko.vuejs.org/guide/essentials/conditional.html#v-show)\n"
+        "value": "\n표현식의 [truthy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy) 값을 기반으로 엘리먼트의 가시성을 전환합니다.\n\n- **요구되는 값**: `any`\n\n- **세부 사항**:\n\n  `v-show`는 인라인 스타일을 통해 `display` CSS 속성을 설정하며, 엘리먼트가 표시될 때 초기 `display` 값을 설정하려고 시도합니다. 또한 조건이 변경될 때 전환을 트리거합니다.\n\n- **참고**: [조건부 렌더링 - v-show](https://ko.vuejs.org/guide/essentials/conditional.html#v-show)\n"
       },
       "references": [
         {
@@ -510,7 +510,7 @@
       "name": "v-if",
       "description": {
         "kind": "markdown",
-        "value": "\n표현식의 truthy 값을 기반으로 엘리먼트 또는 템플릿 일부를 조건부로 렌더링합니다.\n\n- **요구되는 값**: `any`\n\n- **세부 사항**:\n\n  `v-if` 엘리먼트가 토글되면, 엘리먼트와 여기에 포함된 디렉티브/컴포넌트가 파괴되고 재구성됩니다.\n  초기 조건 값이 falsy이면,\n  내부 컨텐츠가 전혀 렌더링되지 않습니다.\n\n  텍스트 또는 여러 엘리먼트를 포함하는 조건부 블록을 나타내기 위해 `<template>`에 사용할 수도 있습니다.\n\n  이 디렉티브는 조건이 변경될 때,\n  [트랜지션](https://ko.vuejs.org/guide/built-ins/transition.html)을 트리거합니다.\n\n  `v-for`와 함께 사용하는 경우, `v-if`의 우선 순위가 높습니다.\n  하나의 엘리먼트에 이 두 디렉티브을 함께 사용하는 것은 권장되지 않습니다.\n  자세한 내용은 [리스트 렌더링](https://ko.vuejs.org/guide/essentials/list.html#v-for-with-v-if)을 참고하세요.\n\n- **참고**: [조건부 렌더링 - v-if](https://ko.vuejs.org/guide/essentials/conditional.html#v-if)\n"
+        "value": "\n표현식의 truthy 값을 기반으로 엘리먼트 또는 템플릿 일부를 조건부로 렌더링합니다.\n\n- **요구되는 값**: `any`\n\n- **세부 사항**:\n\n  `v-if` 엘리먼트가 토글되면, 엘리먼트와 여기에 포함된 디렉티브/컴포넌트가 파괴되고 재구성됩니다. 초기 조건 값이 falsy이면, 내부 컨텐츠가 전혀 렌더링되지 않습니다.\n\n  텍스트 또는 여러 엘리먼트를 포함하는 조건부 블록을 나타내기 위해 `<template>`에 사용할 수도 있습니다.\n\n  이 디렉티브는 조건이 변경될 때, [트랜지션](https://ko.vuejs.org/guide/built-ins/transition.html)을 트리거합니다.\n\n  `v-for`와 함께 사용하는 경우, `v-if`의 우선 순위가 높습니다. 하나의 엘리먼트에 이 두 디렉티브을 함께 사용하는 것은 권장되지 않습니다. 자세한 내용은 [리스트 렌더링](https://ko.vuejs.org/guide/essentials/list.html#v-for-with-v-if)을 참고하세요.\n\n- **참고**: [조건부 렌더링 - v-if](https://ko.vuejs.org/guide/essentials/conditional.html#v-if)\n"
       },
       "references": [
         {
@@ -601,7 +601,7 @@
       "name": "v-else-if",
       "description": {
         "kind": "markdown",
-        "value": "\n`v-if`에 대한 `else if` 블록을 나타냅니다.\n`v-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    A/B/C 가 아니야!\n  </div>\n  ```\n\n- **참고**: [조건부 렌더링 - v-else-if](https://ko.vuejs.org/guide/essentials/conditional.html#v-else-if)\n"
+        "value": "\n`v-if`에 대한 `else if` 블록을 나타냅니다. `v-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    A/B/C 가 아니야!\n  </div>\n  ```\n\n- **참고**: [조건부 렌더링 - v-else-if](https://ko.vuejs.org/guide/essentials/conditional.html#v-else-if)\n"
       },
       "references": [
         {
@@ -646,7 +646,7 @@
       "name": "v-for",
       "description": {
         "kind": "markdown",
-        "value": "\n소스 데이터를 기반으로 엘리먼트 또는 템플릿 블록을 여러 번 렌더링합니다.\n\n- **요구되는 값**: `Array | Object | number | string | Iterable`\n\n- **세부 사항**:\n\n  디렉티브는 반복되는 과정의 현재 값에 별칭을 제공하기 위해,\n  특수 문법인 `alias in expression`(표현식 내 별칭)을 사용해야 합니다:\n\n  ```html\n  <div v-for=\"item in items\">\n    {{ item.text }}\n  </div>\n  ```\n\n  또한 인덱스(객체에서 사용되는 경우 키)의 별칭을 지정할 수도 있습니다:\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`의 기본 동작은 엘리먼트를 이동하지 않고 제자리에 패치(patch)하려고 합니다.\n  강제로 엘리먼트를 재정렬하려면,\n  특수 속성 `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`과 더불어 [Iterable Protocol](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol)을 구현한 값에서도 작동합니다.\n\n- **참고**:\n  - [가이드 - 리스트 렌더링](https://ko.vuejs.org/guide/essentials/list.html)\n"
+        "value": "\n소스 데이터를 기반으로 엘리먼트 또는 템플릿 블록을 여러 번 렌더링합니다.\n\n- **요구되는 값**: `Array | Object | number | string | Iterable`\n\n- **세부 사항**:\n\n  디렉티브는 반복되는 과정의 현재 값에 별칭을 제공하기 위해, 특수 문법인 `alias in expression`(표현식 내 별칭)을 사용해야 합니다:\n\n  ```html\n  <div v-for=\"item in items\">\n    {{ item.text }}\n  </div>\n  ```\n\n  또한 인덱스(객체에서 사용되는 경우 키)의 별칭을 지정할 수도 있습니다:\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`의 기본 동작은 엘리먼트를 이동하지 않고 제자리에 패치(patch)하려고 합니다. 강제로 엘리먼트를 재정렬하려면, 특수 속성 `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`과 더불어 [Iterable Protocol](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol)을 구현한 값에서도 작동합니다.\n\n- **참고**:\n  - [가이드 - 리스트 렌더링](https://ko.vuejs.org/guide/essentials/list.html)\n"
       },
       "references": [
         {
@@ -691,7 +691,7 @@
       "name": "v-on",
       "description": {
         "kind": "markdown",
-        "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` - `{ passive: true }` 옵션으로 DOM 이벤트를 등록.\n\n- **세부 사항**:\n\n  이벤트 타입은 인자로 표시됩니다.\n  표현식은 메서드 이름 또는 인라인 명령문이거나,\n  수식어가 있는 경우 생략될 수 있습니다.\n\n  일반 엘리먼트에 사용되면 [**네이티브 DOM 이벤트**](https://developer.mozilla.org/en-US/docs/Web/Events)만 수신합니다.\n  커스텀 엘리먼트 컴포넌트에서 사용되는 경우,\n  해당 자식 컴포넌트에서 발송(emit)하는 **커스텀 이벤트**를 수신합니다.\n\n  네이티브 DOM 이벤트를 수신할 때,\n  메서드의 인자는 네이티브 이벤트 뿐 입니다.\n  인라인 명령문을 사용하는 경우,\n  명령문은 특수 속성인 `$event`로 `v-on:click=\"handle('ok', $event)\"`와 같이 이벤트 객체에 접근할 수 있습니다.\n\n  `v-on`은 인자 없이 `이벤트(키): 리스너(값)` 형식의 객체 바인딩도 지원합니다.\n  수식어는 객체 문법을 사용할 때는 지원하지 않습니다.\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  <!-- 전파 중지 -->\n  <button @click.stop=\"doThis\"></button>\n\n  <!-- event.preventDefault() 작동 -->\n  <button @click.prevent=\"doThis\"></button>\n\n  <!-- 표현식 없이 event.preventDefault()만 사용 -->\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://ko.vuejs.org/guide/essentials/event-handling.html)\n  - [컴포넌트 - 이벤트 청취하기](https://ko.vuejs.org/guide/essentials/component-basics.html#listening-to-events)\n"
+        "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` - `{ passive: true }` 옵션으로 DOM 이벤트를 등록.\n\n- **세부 사항**:\n\n  이벤트 타입은 인자로 표시됩니다. 표현식은 메서드 이름 또는 인라인 명령문이거나, 수식어가 있는 경우 생략될 수 있습니다.\n\n  일반 엘리먼트에 사용되면 [**네이티브 DOM 이벤트**](https://developer.mozilla.org/en-US/docs/Web/Events)만 수신합니다. 커스텀 엘리먼트 컴포넌트에서 사용되는 경우, 해당 자식 컴포넌트에서 발송(emit)하는 **커스텀 이벤트**를 수신합니다.\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  <!-- 전파 중지 -->\n  <button @click.stop=\"doThis\"></button>\n\n  <!-- event.preventDefault() 작동 -->\n  <button @click.prevent=\"doThis\"></button>\n\n  <!-- 표현식 없이 event.preventDefault()만 사용 -->\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://ko.vuejs.org/guide/essentials/event-handling.html)\n  - [컴포넌트 - 이벤트 청취하기](https://ko.vuejs.org/guide/essentials/component-basics.html#listening-to-events)\n"
       },
       "references": [
         {
@@ -736,7 +736,7 @@
       "name": "v-bind",
       "description": {
         "kind": "markdown",
-        "value": "\n하나 이상의 속성 또는 컴포넌트 prop을 표현식에 동적으로 바인딩합니다.\n\n- **단축 문법:** `:` 또는 `.`(`.prop` 수식어를 사용할 때)\n\n- **요구되는 값**: `any (인자 있이) | Object (인자 없이)`\n\n- **인자:** `attrOrProp (optional)`\n\n- **수식어:**\n\n  - `.camel` - kebab-case 속성 이름을 camelCase로 변환.\n  - `.prop` - 바인딩을 [DOM 속성(property: 이하 프로퍼티)](https://developer.mozilla.org/en-US/docs/Web/API/Element#properties)으로 강제 설정. <sup class=\"vt-badge\">3.2+</sup>\n  - `.attr` - 바인딩을 [DOM 속성(attribute)](https://developer.mozilla.org/en-US/docs/Glossary/Attribute)으로 강제 설정. <sup class=\"vt-badge\">3.2+</sup>\n\n- **사용법**:\n\n  `class` 또는 `style` 속성을 바인딩하는 데 사용되는 경우,\n  `v-bind`는 배열 또는 객체와 같이 값을 추가할 수 있는 타입을 지원합니다.\n  자세한 내용은 아래 링크된 가이드 섹션을 참고합시다.\n\n  엘리먼트에 바인딩을 설정할 때,\n  Vue는 기본적으로 연산자 검사를 위한 `in`을 사용하여,\n  엘리먼트에 프로퍼티로 정의된 키가 있는지 확인합니다.\n  프로퍼티가 정의되면,\n  Vue는 속성 대신 DOM 프로퍼티로 값을 설정합니다.\n  이것은 대부분의 경우 작동하지만,\n  `.prop` 또는 `.attr` 수식어를 명시적으로 사용하여 이 동작을 재정의할 수 있습니다.\n  이것은 특히 [커스텀 엘리먼트로 작업](https://ko.vuejs.org/guide/extras/web-components.html#passing-dom-properties)할 때 필요합니다.\n\n  컴포넌트 prop 바인딩에 사용될 때 prop은 자식 컴포넌트에서 적절하게 선언되어야 합니다.\n\n  인자 없이 사용하는 경우,\n  속성을 이름-값 쌍으로 포함하는 객체를 바인딩하는 데 사용할 수 있습니다.\n  이 모드에서 `class`와 `style`은 배열 또는 객체를 지원하지 않습니다.\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  <!-- class 바인딩 -->\n  <div :class=\"{ red: isRed }\"></div>\n  <div :class=\"[classA, classB]\"></div>\n  <div :class=\"[classA, { classB: isB, classC: isC }]\"></div>\n\n  <!-- style 바인딩 -->\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 바인딩. \"prop\"은 자식 컴포넌트에서 선언되어 있어야 함 -->\n  <MyComponent :prop=\"someThing\" />\n\n  <!-- 자식 컴포넌트와 공유될 부모 props를 전달 -->\n  <MyComponent v-bind=\"$props\" />\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 내 템플릿을 사용할 때,\n  `v-bind`의 속성명을 카멜라이징(camelizing)할 수 있습니다.\n  예를 들면, SVG `viewBox` 속성:\n\n  ```html\n  <svg :view-box.camel=\"viewBox\"></svg>\n  ```\n\n  문자열 템플릿을 사용하거나 템플릿을 빌드 과정으로 미리 컴파일하는 경우에는 `.camel`이 필요하지 않습니다.\n\n- **참고**:\n  - [가이드 - 클래스와 스타일 바인딩](https://ko.vuejs.org/guide/essentials/class-and-style.html)\n  - [가이드 - Props: Props 전달에 관한 심화](https://ko.vuejs.org/guide/components/props.html#prop-passing-details)\n"
+        "value": "\n하나 이상의 속성 또는 컴포넌트 prop을 표현식에 동적으로 바인딩합니다.\n\n- **단축 문법:**\n  - `:` 또는 `.`(`.prop` 수식어를 사용할 때)\n  - 속성(attribute)과 바인딩된 값이 같은 이름을 가질 경우 값을 생략할 수 있음 <sup class=\"vt-badge\">3.4+</sup>\n\n- **요구되는 값**: `any (인자 있이) | Object (인자 없이)`\n\n- **인자:** `attrOrProp (optional)`\n\n- **수식어:**\n\n  - `.camel` - kebab-case 속성 이름을 camelCase로 변환.\n  - `.prop` - 바인딩을 [DOM 속성(property: 이하 프로퍼티)](https://developer.mozilla.org/en-US/docs/Web/API/Element#properties)으로 강제 설정. <sup class=\"vt-badge\">3.2+</sup>\n  - `.attr` - 바인딩을 [DOM 속성(attribute)](https://developer.mozilla.org/en-US/docs/Glossary/Attribute)으로 강제 설정. <sup class=\"vt-badge\">3.2+</sup>\n\n- **사용법**:\n\n  `class` 또는 `style` 속성을 바인딩하는 데 사용되는 경우, `v-bind`는 배열 또는 객체와 같이 값을 추가할 수 있는 타입을 지원합니다. 자세한 내용은 아래 링크된 가이드 섹션을 참고합시다.\n\n  엘리먼트에 바인딩을 설정할 때, Vue는 기본적으로 연산자 검사를 위한 `in`을 사용하여, 엘리먼트에 프로퍼티로 정의된 키가 있는지 확인합니다. 프로퍼티가 정의되면, Vue는 속성 대신 DOM 프로퍼티로 값을 설정합니다. 이것은 대부분의 경우 작동하지만, `.prop` 또는 `.attr` 수식어를 명시적으로 사용하여 이 동작을 재정의할 수 있습니다. 이것은 특히 [커스텀 엘리먼트로 작업](https://ko.vuejs.org/guide/extras/web-components.html#passing-dom-properties)할 때 필요합니다.\n\n  컴포넌트 prop 바인딩에 사용될 때 prop은 자식 컴포넌트에서 적절하게 선언되어야 합니다.\n\n  인자 없이 사용하는 경우, 속성을 이름-값 쌍으로 포함하는 객체를 바인딩하는 데 사용할 수 있습니다. 이 모드에서 `class`와 `style`은 배열 또는 객체를 지원하지 않습니다.\n\n- **예제**\n\n  ```html\n  <!-- 속성 바인딩 -->\n  <img v-bind:src=\"imageSrc\" />\n\n  <!-- 동적인 속성명 -->\n  <button v-bind:[key]=\"value\"></button>\n\n  <!-- 단축 문법 -->\n  <img :src=\"imageSrc\" />\n\n  <!-- 같은 이름 생략 가능 (3.4+), 오른쪽과 같음 :src=\"src\" -->\n  <img :src />\n  \n  <!-- 단축 문법과 동적 속성명 -->\n  <button :[key]=\"value\"></button>\n\n  <!-- 인라인으로 문자열 결합 -->\n  <img :src=\"'/path/to/images/' + fileName\" />\n\n  <!-- class 바인딩 -->\n  <div :class=\"{ red: isRed }\"></div>\n  <div :class=\"[classA, classB]\"></div>\n  <div :class=\"[classA, { classB: isB, classC: isC }]\"></div>\n\n  <!-- style 바인딩 -->\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 바인딩. \"prop\"은 자식 컴포넌트에서 선언되어 있어야 함 -->\n  <MyComponent :prop=\"someThing\" />\n\n  <!-- 자식 컴포넌트와 공유될 부모 props를 전달 -->\n  <MyComponent v-bind=\"$props\" />\n  \n  <!-- XLink -->\n  <svg><a :xlink:special=\"foo\"></a></svg>\n  ```\n\n  `.prop` 수식어에는 전용 단축 문법 `.`가 있습니다:\n\n  ```html\n  <div :someProperty.prop=\"someObject\"></div>\n\n  <!-- 위 코드는 아래와 같이 단축할 수 있음 -->\n  <div .someProperty=\"someObject\"></div>\n  ```\n\n  `.camel` 수식어는 DOM 내 템플릿을 사용할 때, `v-bind`의 속성명을 카멜라이징(camelizing)할 수 있습니다. 예를 들면, SVG `viewBox` 속성:\n\n  ```html\n  <svg :view-box.camel=\"viewBox\"></svg>\n  ```\n\n  문자열 템플릿을 사용하거나 템플릿을 빌드 과정으로 미리 컴파일하는 경우에는 `.camel`이 필요하지 않습니다.\n\n- **참고**:\n  - [가이드 - 클래스와 스타일 바인딩](https://ko.vuejs.org/guide/essentials/class-and-style.html)\n  - [가이드 - Props: Props 전달에 관한 심화](https://ko.vuejs.org/guide/components/props.html#prop-passing-details)\n"
       },
       "references": [
         {
@@ -871,7 +871,7 @@
       "name": "v-pre",
       "description": {
         "kind": "markdown",
-        "value": "\n이 엘리먼트와 모든 자식 엘리먼트의 컴파일을 생략합니다.\n\n- **표현식을 허용하지 않습니다**.\n\n- **세부 사항**:\n\n  `v-pre`가 있는 엘리먼트 내에서 모든 Vue 템플릿 구문은 그대로 유지되고 렌더링됩니다.\n  가장 일반적인 사용 사례는 이중 중괄호 태그를 표시하는 것입니다.\n\n- **예제**\n\n  ```html\n  <span v-pre>{{ 이곳은 컴파일되지 않습니다. }}</span>\n  ```\n"
+        "value": "\n이 엘리먼트와 모든 자식 엘리먼트의 컴파일을 생략합니다.\n\n- **표현식을 허용하지 않습니다**.\n\n- **세부 사항**:\n\n  `v-pre`가 있는 엘리먼트 내에서 모든 Vue 템플릿 구문은 그대로 유지되고 렌더링됩니다. 가장 일반적인 사용 사례는 이중 중괄호 태그를 표시하는 것입니다.\n\n- **예제**\n\n  ```html\n  <span v-pre>{{ 이곳은 컴파일되지 않습니다. }}</span>\n  ```\n"
       },
       "references": [
         {
@@ -916,7 +916,7 @@
       "name": "v-once",
       "description": {
         "kind": "markdown",
-        "value": "\n엘리먼트와 컴포넌트를 한 번만 렌더링하고,\n향후 업데이트를 생략합니다.\n\n- **표현식을 허용하지 않습니다**.\n\n- **세부 사항**:\n\n  이후 다시 렌더링할 때 엘리먼트/컴포넌트 및 모든 자식들은 정적 컨텐츠로 처리되어 생략됩니다.\n  이것은 업데이트 성능을 최적화하는 데 사용할 수 있습니다.\n\n  ```html\n  <!-- 단일 엘리먼트 -->\n  <span v-once>절대 바뀌지 않음: {{msg}}</span>\n  <!-- 자식이 있는 엘리먼트 -->\n  <div v-once>\n    <h1>댓글</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://ko.vuejs.org/guide/essentials/template-syntax.html#text-interpolation)\n  - [v-memo](#v-memo)\n"
+        "value": "\n엘리먼트와 컴포넌트를 한 번만 렌더링하고, 향후 업데이트를 생략합니다.\n\n- **표현식을 허용하지 않습니다**.\n\n- **세부 사항**:\n\n  이후 다시 렌더링할 때 엘리먼트/컴포넌트 및 모든 자식들은 정적 컨텐츠로 처리되어 생략됩니다. 이것은 업데이트 성능을 최적화하는 데 사용할 수 있습니다.\n\n  ```html\n  <!-- 단일 엘리먼트 -->\n  <span v-once>절대 바뀌지 않음: {{msg}}</span>\n  <!-- 자식이 있는 엘리먼트 -->\n  <div v-once>\n    <h1>댓글</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://ko.vuejs.org/guide/essentials/template-syntax.html#text-interpolation)\n  - [v-memo](#v-memo)\n"
       },
       "references": [
         {
@@ -961,7 +961,7 @@
       "name": "v-memo",
       "description": {
         "kind": "markdown",
-        "value": "\n- **요구되는 값**: `any[]`\n\n- **세부 사항**:\n\n  템플릿의 하위 트리를 메모합니다.\n  엘리먼트와 컴포넌트 모두에 사용할 수 있습니다.\n  디렉티브는 메모이제이션을 위해 비교할 의존성 값의 고정된 길이의 배열을 요구합니다.\n  배열의 모든 값이 마지막 렌더링과 같으면 전체 하위 트리에 대한 업데이트를 생략합니다.\n  예를 들어:\n\n  ```html\n  <div v-memo=\"[valueA, valueB]\">\n    ...\n  </div>\n  ```\n\n  컴포넌트가 다시 렌더링될 때 `valueA`와 `valueB`가 모두 동일하게 유지되면,\n  이 `<div>`와 하위 항목에 대한 모든 업데이트를 생략합니다.\n  사실, 하위 트리의 메모된 복사본을 재사용할 수 있기 때문에 가상 DOM VNode 생성도 생략합니다.\n\n  메모이제이션 배열을 올바르게 지정하는 것이 중요합니다.\n  그렇지 않으면 실제로 적용되어야 하는 업데이트를 건너뛸 수 있습니다.\n  빈 의존성 배열(`v-memo=\"[]\"`)이 있는 `v-memo`는 기능적으로 `v-once`와 동일합니다.\n\n  **`v-for`과 함께 사용하기**\n\n  `v-memo`는 성능이 중요한 시나리오에서 마이크로 최적화를 위해 제공되는 것으로,\n  일반적으로 거의 필요하지 않습니다.\n  이것이 도움이 될 수 있는 가장 일반적인 경우는 큰 리스트(`length > 1000`)를 `v-for`로 렌더링할 때입니다:\n\n  ```html\n  <div v-for=\"item in list\" :key=\"item.id\" v-memo=\"[item.id === selected]\">\n    <p>ID: {{ item.id }} - 선택됨: {{ item.id === selected }}</p>\n    <p>...더 많은 자식 노드</p>\n  </div>\n  ```\n\n  컴포넌트의 `selected` 상태가 변경되면,\n  대부분의 아이템이 정확히 동일하게 유지되더라도 많은 양의 VNode가 생성됩니다.\n  여기서 `v-memo` 사용법은 본질적으로 \"아이템의 선택여부가 바뀐 경우에만, 이 아이템을 업데이트하십시오\"입니다.\n  이렇게 하면 영향을 받지 않는 모든 아이템이 이전 VNode를 재사용하고,\n  차이점 비교를 생략할 수 있습니다.\n  Vue는 아이템의 `:key`로 자동 추론하므로,\n  메모 의존성 배열에 `item.id`를 포함할 필요가 없습니다.\n\n  :::warning\n  `v-for`와 함께 `v-memo`를 사용할 때,\n  동일한 엘리먼트에 사용되는지 확인이 필요합니다.\n  **`v-memo`는 `v-for` 내에서 작동하지 않습니다**.\n  :::\n\n  `v-memo`는 자식 컴포넌트 업데이트 확인이 최적화되지 않은 특정 엣지 케이스에서 원치 않는 업데이트를 수동으로 방지하기 위해 컴포넌트에 사용할 수도 있습니다.\n  그러나 필요한 업데이트를 건너뛰지 않도록 올바른 의존성 배열을 지정하는 것은 개발자의 책임입니다.\n\n- **참고**:\n  - [v-once](#v-once)\n"
+        "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`는 성능이 중요한 시나리오에서 마이크로 최적화를 위해 제공되는 것으로, 일반적으로 거의 필요하지 않습니다. 이것이 도움이 될 수 있는 가장 일반적인 경우는 큰 리스트(`length > 1000`)를 `v-for`로 렌더링할 때입니다:\n\n  ```html\n  <div v-for=\"item in list\" :key=\"item.id\" v-memo=\"[item.id === selected]\">\n    <p>ID: {{ item.id }} - 선택됨: {{ item.id === selected }}</p>\n    <p>...더 많은 자식 노드</p>\n  </div>\n  ```\n\n  컴포넌트의 `selected` 상태가 변경되면, 대부분의 아이템이 정확히 동일하게 유지되더라도 많은 양의 VNode가 생성됩니다. 여기서 `v-memo` 사용법은 본질적으로 \"아이템의 선택여부가 바뀐 경우에만, 이 아이템을 업데이트하십시오\"입니다. 이렇게 하면 영향을 받지 않는 모든 아이템이 이전 VNode를 재사용하고, 차이점 비교를 생략할 수 있습니다. Vue는 아이템의 `:key`로 자동 추론하므로, 메모 의존성 배열에 `item.id`를 포함할 필요가 없습니다.\n\n  :::warning\n  `v-for`와 함께 `v-memo`를 사용할 때, 동일한 엘리먼트에 사용되는지 확인이 필요합니다. **`v-memo`는 `v-for` 내에서 작동하지 않습니다**.\n  :::\n\n  `v-memo`는 자식 컴포넌트 업데이트 확인이 최적화되지 않은 특정 엣지 케이스에서 원치 않는 업데이트를 수동으로 방지하기 위해 컴포넌트에 사용할 수도 있습니다. 그러나 필요한 업데이트를 건너뛰지 않도록 올바른 의존성 배열을 지정하는 것은 개발자의 책임입니다.\n\n- **참고**:\n  - [v-once](#v-once)\n"
       },
       "references": [
         {
@@ -1006,7 +1006,7 @@
       "name": "v-cloak",
       "description": {
         "kind": "markdown",
-        "value": "\n준비될 때까지 컴파일되지 않은 템플릿을 숨기는 데 사용됩니다.\n\n- **표현식을 허용하지 않습니다**.\n\n- **세부 사항**:\n\n  **이 디렉티브는 빌드 과정이 없는 설정에서만 필요합니다**.\n\n  DOM 내 템플릿을 사용할 때,\n  \"컴파일되지 않은 템플릿이 순간 보이는 현상\"이 있을 수 있습니다.\n  이러면 사용자는 컴포넌트가 렌더링된 컨텐츠로 대체할 때까지 이중 중괄호 태그를 볼 수 있습니다.\n\n  `v-cloak`은 연결된 컴포넌트 인스턴스가 마운트될 때까지 엘리먼트에 남아 있습니다.\n  `[v-cloak] { display: none }`과 같은 CSS 규칙과 결합하여,\n  컴포넌트가 준비될 때까지 템플릿을 숨기는 데 사용할 수 있습니다.\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"
+        "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"
       },
       "references": [
         {