@vue/language-service 1.8.5 → 1.8.7
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/ko.json +15 -15
- package/data/template/zh-cn.json +26 -26
- package/out/helpers.d.ts +4 -3
- package/out/helpers.js +51 -44
- package/out/ideFeatures/nameCasing.js +4 -4
- package/out/languageService.js +32 -74
- package/out/plugins/vue-extract-file.d.ts +7 -0
- package/out/plugins/vue-extract-file.js +294 -0
- package/out/plugins/vue-template.js +47 -34
- package/out/plugins/vue-toggle-v-bind-codeaction.d.ts +2 -0
- package/out/plugins/vue-toggle-v-bind-codeaction.js +125 -0
- package/package.json +15 -15
package/data/template/ko.json
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
"name": "Transition",
|
|
6
6
|
"description": {
|
|
7
7
|
"kind": "markdown",
|
|
8
|
-
"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-
|
|
8
|
+
"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"
|
|
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- **Props**\n\n `<TransitionGroup>`은 `<Transition>`과 동일한 props에서 `mode`를 제외하고 두 개의 추가 props를 허용합니다:\n\n ```ts\n interface TransitionGroupProps extends Omit<TransitionProps, 'mode'> {\n /**\n * 정의하지 않으면, 렌더는 프래그먼트처럼 취급함.\n */\n tag?: string\n /**\n * 이동중 트랜지션에 적용될 CSS 클래스를 커스텀.\n * 템플릿에서 kebab-case를 사용해야 함.\n * 예: enter-from-class=\"xxx\"\n */\n moveClass?: string\n }\n ```\n\n- **이벤트**:\n\n `<TransitionGroup>`은 `<Transition>`과 동일한 이벤트를 발생시킵니다.\n\n- **세부 사항**:\n\n 기본적으로 `<TransitionGroup>`은 래퍼 DOM 엘리먼트를 렌더링하지 않지만 `tag` prop을 통해 정의할 수 있습니다.\n\n 애니메이션이 제대로 작동하려면 `<transition-group>`의 모든 자식이 [**고유 키**](https://ko.vuejs.org/guide/essentials/list.html#maintaining-state-with-key)를 가져야 합니다.\n\n `<TransitionGroup>`은 CSS `transform`으로 이동 트랜지션을 지원합니다.\n 업데이트 후 화면에서 자식의 위치가 변경되면,\n 움직이는 CSS 클래스가 적용됩니다(`name` 속성에서 자동 생성되거나 `move-class` prop으로 구성됨).\n 이동 클래스가 적용될 때 CSS의 `transform` 속성이 \"트랜지션 가능\"이면,\n [FLIP 기술](https://aerotwist.com/blog/flip-your-animations/)을 사용하여 엘리먼트가 목적지까지 부드럽게 애니메이션됩니다.\n\n-
|
|
42
|
+
"value": "\n리스트의 **여러** 엘리먼트 또는 컴포넌트에 트랜지션 효과를 제공합니다.\n\n- **Props**\n\n `<TransitionGroup>`은 `<Transition>`과 동일한 props에서 `mode`를 제외하고 두 개의 추가 props를 허용합니다:\n\n ```ts\n interface TransitionGroupProps extends Omit<TransitionProps, 'mode'> {\n /**\n * 정의하지 않으면, 렌더는 프래그먼트처럼 취급함.\n */\n tag?: string\n /**\n * 이동중 트랜지션에 적용될 CSS 클래스를 커스텀.\n * 템플릿에서 kebab-case를 사용해야 함.\n * 예: enter-from-class=\"xxx\"\n */\n moveClass?: string\n }\n ```\n\n- **이벤트**:\n\n `<TransitionGroup>`은 `<Transition>`과 동일한 이벤트를 발생시킵니다.\n\n- **세부 사항**:\n\n 기본적으로 `<TransitionGroup>`은 래퍼 DOM 엘리먼트를 렌더링하지 않지만 `tag` prop을 통해 정의할 수 있습니다.\n\n 애니메이션이 제대로 작동하려면 `<transition-group>`의 모든 자식이 [**고유 키**](https://ko.vuejs.org/guide/essentials/list.html#maintaining-state-with-key)를 가져야 합니다.\n\n `<TransitionGroup>`은 CSS `transform`으로 이동 트랜지션을 지원합니다.\n 업데이트 후 화면에서 자식의 위치가 변경되면,\n 움직이는 CSS 클래스가 적용됩니다(`name` 속성에서 자동 생성되거나 `move-class` prop으로 구성됨).\n 이동 클래스가 적용될 때 CSS의 `transform` 속성이 \"트랜지션 가능\"이면,\n [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://ko.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- **Props**\n\n ```ts\n interface KeepAliveProps {\n /**\n * `include`와 이름이 일치하는 컴포넌트만 캐시됨.\n */\n include?: MatchPattern\n /**\n * `exclude`와 이름이 일치하는 컴포넌트는 캐시되지 않음.\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\n `<KeepAlive>`에는 언제나 활성화된 직계 자식의 컴포넌트 인스턴스가 하나만 있을 수 있습니다.\n\n 컴포넌트가 `<KeepAlive>` 내에서 토글되면,\n `mounted` 및 `unmounted` 대신 `activated` 및 `deactivated` 생명 주기 훅이 호출됩니다.\n 이는 `<KeepAlive>`의 직계 자식과 모든 하위 항목에 적용됩니다.\n\n-
|
|
76
|
+
"value": "\n내부에 래핑된 동적으로 토글되는 컴포넌트를 캐시합니다.\n\n- **Props**\n\n ```ts\n interface KeepAliveProps {\n /**\n * `include`와 이름이 일치하는 컴포넌트만 캐시됨.\n */\n include?: MatchPattern\n /**\n * `exclude`와 이름이 일치하는 컴포넌트는 캐시되지 않음.\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\n `<KeepAlive>`에는 언제나 활성화된 직계 자식의 컴포넌트 인스턴스가 하나만 있을 수 있습니다.\n\n 컴포넌트가 `<KeepAlive>` 내에서 토글되면,\n `mounted` 및 `unmounted` 대신 `activated` 및 `deactivated` 생명 주기 훅이 호출됩니다.\n 이는 `<KeepAlive>`의 직계 자식과 모든 하위 항목에 적용됩니다.\n\n- **예제**\n\n 기본 사용법:\n\n ```html\n <KeepAlive>\n <component :is=\"view\"></component>\n </KeepAlive>\n ```\n\n `v-if` / `v-else`를 사용할 때,\n 한 번에 하나의 컴포넌트만 렌더링되어야 합니다:\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://ko.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- **Props**\n\n ```ts\n interface TeleportProps {\n /**\n * 필수. 대상이 될 컨테이너를 지정.\n * 셀렉터 또는 실제 엘리먼트일 수 있음.\n */\n to: string | HTMLElement\n /**\n * `true`이면 컨텐츠가 대상이 될 컨테이너로\n * 이동하지 않고 원래 위치에 남아 있음.\n * 동적으로 변경할 수 있음.\n */\n disabled?: boolean\n }\n ```\n\n-
|
|
110
|
+
"value": "\n슬롯 컨텐츠를 DOM 내 다른 위치에서 렌더링합니다.\n\n- **Props**\n\n ```ts\n interface TeleportProps {\n /**\n * 필수. 대상이 될 컨테이너를 지정.\n * 셀렉터 또는 실제 엘리먼트일 수 있음.\n */\n to: string | HTMLElement\n /**\n * `true`이면 컨텐츠가 대상이 될 컨테이너로\n * 이동하지 않고 원래 위치에 남아 있음.\n * 동적으로 변경할 수 있음.\n */\n disabled?: boolean\n }\n ```\n\n- **예제**\n\n 대상이 될 컨테이너 지정:\n\n ```html\n <teleport to=\"#some-id\" />\n <teleport to=\".some-class\" />\n <teleport to=\"[data-teleport]\" />\n ```\n\n 조건부 비활성화:\n\n ```html\n <teleport to=\"#popup\" :disabled=\"displayVideoInline\">\n <video src=\"./my-movie.mp4\">\n </teleport>\n ```\n\n- **참고** [가이드 - Teleport](https://ko.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- **Props**\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` 슬롯이라는 두 개의 슬롯을 사용합니다.\n 메모리에서 기본 슬롯을 렌더링하는 동안,\n 폴백 슬롯의 대체 컨텐츠를 노출합니다.\n\n 기본 슬롯을 렌더링하는 동안 비동기 의존성([비동기 컴포넌트](https://ko.vuejs.org/guide/components/async.html) 및 [`async setup()`](https://ko.vuejs.org/guide/built-ins/suspense.html#async-setup)이 있는 컴포넌트)을 만나면,\n 기본 슬롯을 표시하기 전에 모든 것이 해결될 때까지 대기합니다.\n\n-
|
|
144
|
+
"value": "\n컴포넌트 트리에서 중첩된 비동기 의존성을 조정하는 데 사용됩니다.\n\n- **Props**\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` 슬롯이라는 두 개의 슬롯을 사용합니다.\n 메모리에서 기본 슬롯을 렌더링하는 동안,\n 폴백 슬롯의 대체 컨텐츠를 노출합니다.\n\n 기본 슬롯을 렌더링하는 동안 비동기 의존성([비동기 컴포넌트](https://ko.vuejs.org/guide/components/async.html) 및 [`async setup()`](https://ko.vuejs.org/guide/built-ins/suspense.html#async-setup)이 있는 컴포넌트)을 만나면,\n 기본 슬롯을 표시하기 전에 모든 것이 해결될 때까지 대기합니다.\n\n- **참고** [가이드 - Suspense](https://ko.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- **Props**\n\n ```ts\n interface DynamicComponentProps {\n is: string | Component\n }\n ```\n\n- **세부 사항**:\n\n `is`라는 prop의 값으로 렌더링할 실제 컴포넌트가 결정됩니다:\n\n - 문자열인 경우, HTML 태그 이름 또는 컴포넌트로 등록된 이름일 수 있음.\n\n - 컴포넌트의 정의에 직접 바인딩될 수도 있음.\n\n-
|
|
178
|
+
"value": "\n동적 컴포넌트 또는 엘리먼트를 렌더링하기 위한 \"메타 컴포넌트\"입니다.\n\n- **Props**\n\n ```ts\n interface DynamicComponentProps {\n is: string | Component\n }\n ```\n\n- **세부 사항**:\n\n `is`라는 prop의 값으로 렌더링할 실제 컴포넌트가 결정됩니다:\n\n - 문자열인 경우, HTML 태그 이름 또는 컴포넌트로 등록된 이름일 수 있음.\n\n - 컴포넌트의 정의에 직접 바인딩될 수도 있음.\n\n- **예제**\n\n 등록된 이름으로 컴포넌트 렌더링(옵션 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>`이 있는 컴포지션 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 예를 들어:\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 이름이 아닌 컴포넌트 자체를 `is`에 전달하는 경우,\n 등록이 필요하지 않습니다(예를 들어 `<script setup>`에서).\n\n `v-model`이 `<component>` 태그에 사용되면, 템플릿 컴파일러는 다른 컴포넌트와 마찬가지로 이를 `modelValue` prop 및 `update:modelValue` 이벤트 리스너로 확장합니다.\n 그러나 이것은 `<input>` 또는 `<select>`와 같은 기본 HTML 엘리먼트와 호환되지 않습니다.\n 결과적으로 동적으로 생성된 기본 엘리먼트와 함께 `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 실제로는 기본 양식(form) 필드가 일반적으로 실제 앱의 컴포넌트에 래핑되기 때문에 이러한 예외적인 경우는 일반적이지 않습니다.\n 네이티브 엘리먼트를 직접 사용해야 하는 경우, `v-model`을 속성과 이벤트로 수동으로 분할할 수 있습니다.\n\n- **참고**: [가이드 - 컴포넌트 기초: 동적 컴포넌트](https://ko.vuejs.org/guide/essentials/component-basics.html#dynamic-components)\n"
|
|
179
179
|
},
|
|
180
180
|
"attributes": [],
|
|
181
181
|
"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`는 엘리먼트의 [텍스트 컨텐츠](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-
|
|
282
|
+
"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"
|
|
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/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-
|
|
315
|
+
"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"
|
|
316
316
|
},
|
|
317
317
|
"references": [
|
|
318
318
|
{
|
|
@@ -412,7 +412,7 @@
|
|
|
412
412
|
"valueSet": "v",
|
|
413
413
|
"description": {
|
|
414
414
|
"kind": "markdown",
|
|
415
|
-
"value": "\n`v-if` 또는 `v-else-if` 체인에 대한 `else`입니다.\n\n- **표현식을 허용하지 않습니다**.\n\n- **세부 사항**:\n\n - 제한사항: 이전 형제 엘리먼트에 `v-if` 또는 `v-else-if`가 있어야 합니다.\n\n - `<template>`에서 텍스트 또는 여러 엘리먼트를 포함하는 조건부 블록을 나타내는 데 사용할 수 있습니다.\n\n-
|
|
415
|
+
"value": "\n`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 이제 나를 볼 수 있어요!\n </div>\n <div v-else>\n 아직이에요!\n </div>\n ```\n\n- **참고**: [조건부 렌더링 - v-else](https://ko.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`v-else-if`는 계속 이어서 사용할 수 있습니다.\n\n- **요구되는 값**: `any`\n\n- **세부 사항**:\n\n - 제한사항: 이전 형제 엘리먼트에 `v-if` 또는 `v-else-if`가 있어야 합니다.\n\n - `<template>`에서 텍스트 또는 여러 엘리먼트를 포함하는 조건부 블록을 나타내는 데 사용할 수 있습니다.\n\n-
|
|
448
|
+
"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"
|
|
449
449
|
},
|
|
450
450
|
"references": [
|
|
451
451
|
{
|
|
@@ -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- **수식어:**\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-
|
|
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` - `{ 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"
|
|
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": "\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-
|
|
547
|
+
"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"
|
|
548
548
|
},
|
|
549
549
|
"references": [
|
|
550
550
|
{
|
|
@@ -610,7 +610,7 @@
|
|
|
610
610
|
"name": "v-slot",
|
|
611
611
|
"description": {
|
|
612
612
|
"kind": "markdown",
|
|
613
|
-
"value": "\n이름이 있는 슬롯 또는 props를 받을 것으로 예상되는 범위형 (Scoped) 슬롯을 나타냅니다.\n\n- **단축 문법:** `#`\n\n- **요구되는 값**: 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- **인자:** 슬롯 이름 (선택적, 기본값은 `default`)\n\n- **다음으로 제한됨**:\n\n - `<template>`\n - [컴포넌트](https://ko.vuejs.org/guide/components/slots.html#scoped-slots) (props를 수신할 기본 슬롯만 있는 경우)\n\n-
|
|
613
|
+
"value": "\n이름이 있는 슬롯 또는 props를 받을 것으로 예상되는 범위형 (Scoped) 슬롯을 나타냅니다.\n\n- **단축 문법:** `#`\n\n- **요구되는 값**: 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- **인자:** 슬롯 이름 (선택적, 기본값은 `default`)\n\n- **다음으로 제한됨**:\n\n - `<template>`\n - [컴포넌트](https://ko.vuejs.org/guide/components/slots.html#scoped-slots) (props를 수신할 기본 슬롯만 있는 경우)\n\n- **예제**\n\n ```html\n <!-- 이름이 있는 슬롯 -->\n <BaseLayout>\n <template v-slot:header>\n 해더 컨텐츠\n </template>\n\n <template v-slot:default>\n 기본 슬롯 컨텐츠\n </template>\n\n <template v-slot:footer>\n 푸터 컨텐츠\n </template>\n </BaseLayout>\n\n <!-- props를 수신할 기본 슬롯 -->\n <InfiniteScroll>\n <template v-slot:item=\"slotProps\">\n <div class=\"item\">\n {{ slotProps.item.text }}\n </div>\n </template>\n </InfiniteScroll>\n\n <!-- props를 수신할 기본 슬롯, 분해할당을 사용 -->\n <Mouse v-slot=\"{ x, y }\">\n 마우스 위치: {{ x }}, {{ y }}\n </Mouse>\n ```\n\n- **참고**:\n - [가이드 - 슬롯](https://ko.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\n-
|
|
646
|
+
"value": "\n이 엘리먼트와 모든 자식 엘리먼트의 컴파일을 생략합니다.\n\n- **표현식을 허용하지 않습니다**.\n\n- **세부 사항**:\n\n `v-pre`가 있는 엘리먼트 내에서 모든 Vue 템플릿 구문은 그대로 유지되고 렌더링됩니다.\n 가장 일반적인 사용 사례는 이중 중괄호 태그를 표시하는 것입니다.\n\n- **예제**\n\n ```html\n <span v-pre>{{ 이곳은 컴파일되지 않습니다. }}</span>\n ```\n"
|
|
647
647
|
},
|
|
648
648
|
"references": [
|
|
649
649
|
{
|
|
@@ -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 이러면 사용자는 컴포넌트가 렌더링된 컨텐츠로 대체할 때까지 이중 중괄호 태그를 볼 수 있습니다.\n\n `v-cloak`은 연결된 컴포넌트 인스턴스가 마운트될 때까지 엘리먼트에 남아 있습니다.\n `[v-cloak] { display: none }`과 같은 CSS 규칙과 결합하여,\n 컴포넌트가 준비될 때까지 템플릿을 숨기는 데 사용할 수 있습니다.\n\n-
|
|
745
|
+
"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"
|
|
746
746
|
},
|
|
747
747
|
"references": [
|
|
748
748
|
{
|