@vue/language-service 1.8.5 → 1.8.6
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/languageService.js +4 -0
- package/out/plugins/vue-extract-file.d.ts +2 -0
- package/out/plugins/vue-extract-file.js +228 -0
- 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 +3 -3
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
|
{
|
package/data/template/zh-cn.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 class 名。\n * 例如 `name: 'fade'` 将自动扩展为 `.fade-enter`、\n * `.fade-enter-active` 等。\n */\n name?: string\n /**\n * 是否应用 CSS 过渡 class。\n * 默认：true\n */\n css?: boolean\n /**\n * 指定要等待的过渡事件类型\n * 来确定过渡结束的时间。\n * 默认情况下会自动检测\n * 持续时间较长的类型。\n */\n type?: 'transition' | 'animation'\n /**\n * 显式指定过渡的持续时间。\n * 默认情况下是等待过渡效果的根元素的第一个 `transitionend`\n * 或`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 * 用于自定义过渡 class 的 prop。\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` only)\n - `@appear-cancelled`\n\n- **示例**\n\n 简单元素：\n\n ```html\n <Transition>\n <div v-if=\"ok\">toggled content</div>\n </Transition>\n ```\n\n 通过改变 `key` 属性来强制过度执行：\n
|
|
8
|
+
"value": "\n为**单个**元素或组件提供动画过渡效果。\n\n- **Props**\n\n ```ts\n interface TransitionProps {\n /**\n * 用于自动生成过渡 CSS class 名。\n * 例如 `name: 'fade'` 将自动扩展为 `.fade-enter`、\n * `.fade-enter-active` 等。\n */\n name?: string\n /**\n * 是否应用 CSS 过渡 class。\n * 默认：true\n */\n css?: boolean\n /**\n * 指定要等待的过渡事件类型\n * 来确定过渡结束的时间。\n * 默认情况下会自动检测\n * 持续时间较长的类型。\n */\n type?: 'transition' | 'animation'\n /**\n * 显式指定过渡的持续时间。\n * 默认情况下是等待过渡效果的根元素的第一个 `transitionend`\n * 或`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 * 用于自定义过渡 class 的 prop。\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` only)\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://cn.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>` 除了 `mode` 以外所有的 props，并增加了两个额外的 props：\n\n ```ts\n interface TransitionGroupProps extends Omit<TransitionProps, 'mode'> {\n /**\n * 如果未定义，则渲染为片段 (fragment)。\n */\n tag?: string\n /**\n * 用于自定义过渡期间被应用的 CSS class。\n * 在模板中使用 kebab-case，例如 move-class=\"xxx\"\n */\n moveClass?: string\n }\n ```\n\n- **事件**\n\n `<TransitionGroup>` 抛出与 `<Transition>` 相同的事件。\n\n- **详细信息**\n\n 默认情况下，`<TransitionGroup>` 不会渲染一个容器 DOM 元素，但是可以通过 `tag` prop 启用。\n\n 注意，每个 `<transition-group>` 的子节点必须有[**独立的 key**](https://cn.vuejs.org/guide/essentials/list.html#maintaining-state-with-key)，动画才能正常工作。\n\n `<TransitionGroup>` 支持通过 CSS transform 控制移动效果。当一个子节点在屏幕上的位置在更新之后发生变化时，它会被添加一个使其位移的 CSS class (基于 `name` attribute 推导，或使用 `move-class` prop 显式配置)。如果使其位移的 class 被添加时 CSS 的 `transform` 属性是“可过渡的”，那么该元素会基于 [FLIP 技巧](https://aerotwist.com/blog/flip-your-animations/)平滑地到达动画终点。\n\n- **示例**\n\n ```html\n <TransitionGroup tag=\"ul\" name=\"slide\">\n <li v-for=\"item in items\" :key=\"item.id\">\n {{ item.text }}\n </li>\n </TransitionGroup>\n ```\n\n-
|
|
42
|
+
"value": "\n为列表中的**多个**元素或组件提供过渡效果。\n\n- **Props**\n\n `<TransitionGroup>` 拥有与 `<Transition>` 除了 `mode` 以外所有的 props，并增加了两个额外的 props：\n\n ```ts\n interface TransitionGroupProps extends Omit<TransitionProps, 'mode'> {\n /**\n * 如果未定义，则渲染为片段 (fragment)。\n */\n tag?: string\n /**\n * 用于自定义过渡期间被应用的 CSS class。\n * 在模板中使用 kebab-case，例如 move-class=\"xxx\"\n */\n moveClass?: string\n }\n ```\n\n- **事件**\n\n `<TransitionGroup>` 抛出与 `<Transition>` 相同的事件。\n\n- **详细信息**\n\n 默认情况下，`<TransitionGroup>` 不会渲染一个容器 DOM 元素，但是可以通过 `tag` prop 启用。\n\n 注意，每个 `<transition-group>` 的子节点必须有[**独立的 key**](https://cn.vuejs.org/guide/essentials/list.html#maintaining-state-with-key)，动画才能正常工作。\n\n `<TransitionGroup>` 支持通过 CSS transform 控制移动效果。当一个子节点在屏幕上的位置在更新之后发生变化时，它会被添加一个使其位移的 CSS class (基于 `name` attribute 推导，或使用 `move-class` prop 显式配置)。如果使其位移的 class 被添加时 CSS 的 `transform` 属性是“可过渡的”，那么该元素会基于 [FLIP 技巧](https://aerotwist.com/blog/flip-your-animations/)平滑地到达动画终点。\n\n- **示例**\n\n ```html\n <TransitionGroup tag=\"ul\" name=\"slide\">\n <li v-for=\"item in items\" :key=\"item.id\">\n {{ item.text }}\n </li>\n </TransitionGroup>\n ```\n\n- **参考**[指南 - TransitionGroup](https://cn.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 */\n include?: MatchPattern\n /**\n * 任何名称与 `exclude`\n * 匹配的组件都不会被缓存。\n */\n exclude?: MatchPattern\n /**\n * 最多可以缓存多少组件实例。\n */\n max?: number | string\n }\n\n type MatchPattern = string | RegExp | (string | RegExp)[]\n ```\n\n- **详细信息**\n\n `<KeepAlive>` 包裹动态组件时，会缓存不活跃的组件实例，而不是销毁它们。\n\n 任何时候都只能有一个活跃组件实例作为 `<KeepAlive>` 的直接子节点。\n\n 当一个组件在 `<KeepAlive>` 中被切换时，它的 `activated` 和 `deactivated` 生命周期钩子将被调用，用来替代 `mounted` 和 `unmounted`。这适用于 `<KeepAlive>` 的直接子节点及其所有子孙节点。\n\n- **示例**\n\n 基本用法：\n\n ```html\n <KeepAlive>\n <component :is=\"view\"></component>\n </KeepAlive>\n ```\n\n 与 `v-if` / `v-else` 分支一起使用时，同一时间只能有一个组件被渲染：\n\n ```html\n <KeepAlive>\n <comp-a v-if=\"a > 1\"></comp-a>\n <comp-b v-else></comp-b>\n </KeepAlive>\n ```\n\n 与 `<Transition>` 一起使用：\n\n ```html\n <Transition>\n <KeepAlive>\n <component :is=\"view\"></component>\n </KeepAlive>\n </Transition>\n ```\n\n 使用 `include` / `exclude`：\n\n ```html\n <!-- 用逗号分隔的字符串 -->\n <KeepAlive include=\"a,b\">\n <component :is=\"view\"></component>\n </KeepAlive>\n\n <!-- 正则表达式 (使用 `v-bind`) -->\n <KeepAlive :include=\"/a|b/\">\n <component :is=\"view\"></component>\n </KeepAlive>\n\n <!-- 数组 (使用 `v-bind`) -->\n <KeepAlive :include=\"['a', 'b']\">\n <component :is=\"view\"></component>\n </KeepAlive>\n ```\n\n 使用 `max`：\n\n ```html\n <KeepAlive :max=\"10\">\n <component :is=\"view\"></component>\n </KeepAlive>\n ```\n\n-
|
|
76
|
+
"value": "\n缓存包裹在其中的动态切换组件。\n\n- **Props**\n\n ```ts\n interface KeepAliveProps {\n /**\n * 如果指定，则只有与 `include` 名称\n * 匹配的组件才会被缓存。\n */\n include?: MatchPattern\n /**\n * 任何名称与 `exclude`\n * 匹配的组件都不会被缓存。\n */\n exclude?: MatchPattern\n /**\n * 最多可以缓存多少组件实例。\n */\n max?: number | string\n }\n\n type MatchPattern = string | RegExp | (string | RegExp)[]\n ```\n\n- **详细信息**\n\n `<KeepAlive>` 包裹动态组件时，会缓存不活跃的组件实例，而不是销毁它们。\n\n 任何时候都只能有一个活跃组件实例作为 `<KeepAlive>` 的直接子节点。\n\n 当一个组件在 `<KeepAlive>` 中被切换时，它的 `activated` 和 `deactivated` 生命周期钩子将被调用，用来替代 `mounted` 和 `unmounted`。这适用于 `<KeepAlive>` 的直接子节点及其所有子孙节点。\n\n- **示例**\n\n 基本用法：\n\n ```html\n <KeepAlive>\n <component :is=\"view\"></component>\n </KeepAlive>\n ```\n\n 与 `v-if` / `v-else` 分支一起使用时，同一时间只能有一个组件被渲染：\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://cn.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- **示例**\n\n 指定目标容器：\n\n ```html\n <teleport to=\"#some-id\" />\n <teleport to=\".some-class\" />\n <teleport to=\"[data-teleport]\" />\n ```\n\n 有条件地禁用：\n\n ```html\n <teleport to=\"#popup\" :disabled=\"displayVideoInline\">\n <video src=\"./my-movie.mp4\">\n </teleport>\n ```\n\n-
|
|
110
|
+
"value": "\n将其插槽内容渲染到 DOM 中的另一个位置。\n\n- **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://cn.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 如果在渲染时遇到异步依赖项 ([异步组件](https://cn.vuejs.org/guide/components/async.html)和具有 [`async setup()`](https://cn.vuejs.org/guide/built-ins/suspense.html#async-setup) 的组件)，它将等到所有异步依赖项解析完成时再显示默认插槽。\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 如果在渲染时遇到异步依赖项 ([异步组件](https://cn.vuejs.org/guide/components/async.html)和具有 [`async setup()`](https://cn.vuejs.org/guide/built-ins/suspense.html#async-setup) 的组件)，它将等到所有异步依赖项解析完成时再显示默认插槽。\n\n- **参考**[指南 - Suspense](https://cn.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 - 当 `is` 是字符串，它既可以是 HTML 标签名也可以是组件的注册名。\n\n - 或者，`is` 也可以直接绑定到组件的定义。\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 ```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` 而不是其名称，则不需要注册，例如在 `<script setup>` 中。\n\n 如果在 `<component>` 标签上使用 `v-model`，模板编译器会将其扩展为 `modelValue` prop 和 `update:modelValue` 事件监听器，就像对任何其他组件一样。但是，这与原生 HTML 元素不兼容，例如 `<input>` 或 `<select>`。因此，在动态创建的原生元素上使用 `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 元素，因此这个 v-model 不起作用 -->\n <component :is=\"tag\" v-model=\"username\" />\n </template>\n ```\n\n 在实践中，这种极端情况并不常见，因为原生表单字段通常包裹在实际应用的组件中。如果确实需要直接使用原生元素，那么你可以手动将 `v-model` 拆分为 attribute 和事件。\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 - 当 `is` 是字符串，它既可以是 HTML 标签名也可以是组件的注册名。\n\n - 或者，`is` 也可以直接绑定到组件的定义。\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 ```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` 而不是其名称，则不需要注册，例如在 `<script setup>` 中。\n\n 如果在 `<component>` 标签上使用 `v-model`，模板编译器会将其扩展为 `modelValue` prop 和 `update:modelValue` 事件监听器，就像对任何其他组件一样。但是，这与原生 HTML 元素不兼容，例如 `<input>` 或 `<select>`。因此，在动态创建的原生元素上使用 `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 元素，因此这个 v-model 不起作用 -->\n <component :is=\"tag\" v-model=\"username\" />\n </template>\n ```\n\n 在实践中，这种极端情况并不常见，因为原生表单字段通常包裹在实际应用的组件中。如果确实需要直接使用原生元素，那么你可以手动将 `v-model` 拆分为 attribute 和事件。\n\n- **参考**[动态组件](https://cn.vuejs.org/guide/essentials/component-basics.html#dynamic-components)\n"
|
|
179
179
|
},
|
|
180
180
|
"attributes": [],
|
|
181
181
|
"references": [
|
|
@@ -209,7 +209,7 @@
|
|
|
209
209
|
"name": "slot",
|
|
210
210
|
"description": {
|
|
211
211
|
"kind": "markdown",
|
|
212
|
-
"value": "\n表示模板中的插槽内容出口。\n\n- **Props**\n\n ```ts\n interface SlotProps {\n /**\n * 任何传递给 <slot> 的 prop 都可以作为作用域插槽\n * 的参数传递\n */\n [key: string]: any\n /**\n * 保留，用于指定插槽名。\n */\n name?: string\n }\n ```\n\n- **详细信息**\n\n `<slot>` 元素可以使用 `name` attribute 来指定插槽名。当没有指定 `name` 时，将会渲染默认插槽。传递给插槽元素的附加 attributes 将作为插槽 props，传递给父级中定义的作用域插槽。\n\n 元素本身将被其所匹配的插槽内容替换。\n\n Vue 模板里的 `<slot>` 元素会被编译到 JavaScript，因此不要与[原生 `<slot>` 元素](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot)进行混淆。\n\n-
|
|
212
|
+
"value": "\n表示模板中的插槽内容出口。\n\n- **Props**\n\n ```ts\n interface SlotProps {\n /**\n * 任何传递给 <slot> 的 prop 都可以作为作用域插槽\n * 的参数传递\n */\n [key: string]: any\n /**\n * 保留，用于指定插槽名。\n */\n name?: string\n }\n ```\n\n- **详细信息**\n\n `<slot>` 元素可以使用 `name` attribute 来指定插槽名。当没有指定 `name` 时，将会渲染默认插槽。传递给插槽元素的附加 attributes 将作为插槽 props，传递给父级中定义的作用域插槽。\n\n 元素本身将被其所匹配的插槽内容替换。\n\n Vue 模板里的 `<slot>` 元素会被编译到 JavaScript，因此不要与[原生 `<slot>` 元素](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot)进行混淆。\n\n- **参考**[组件 - 插槽](https://cn.vuejs.org/guide/components/slots.html)\n"
|
|
213
213
|
},
|
|
214
214
|
"attributes": [],
|
|
215
215
|
"references": [
|
|
@@ -243,7 +243,7 @@
|
|
|
243
243
|
"name": "template",
|
|
244
244
|
"description": {
|
|
245
245
|
"kind": "markdown",
|
|
246
|
-
"value": "\n当我们想要使用内置指令而不在 DOM 中渲染元素时，`<template>` 标签可以作为占位符使用。\n\n-
|
|
246
|
+
"value": "\n当我们想要使用内置指令而不在 DOM 中渲染元素时，`<template>` 标签可以作为占位符使用。\n\n- **详细信息**\n\n 对 `<template>` 的特殊处理只有在它与以下任一指令一起使用时才会被触发：\n\n - `v-if`、`v-else-if` 或 `v-else`\n - `v-for`\n - `v-slot`\n\n 如果这些指令都不存在，那么它将被渲染成一个[原生的 `<template>` 元素](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)。\n\n 带有 `v-for` 的 `<template>` 也可以有一个 [`key` 属性](https://cn.vuejs.org/api/built-in-special-attributes.html#key)。所有其他的属性和指令都将被丢弃，因为没有相应的元素，它们就没有意义。\n\n 单文件组件使用[顶层的 `<template>` 标签](https://cn.vuejs.org/api/sfc-spec.html#language-blocks)来包裹整个模板。这种用法与上面描述的 `<template>` 使用方式是有区别的。该顶层标签不是模板本身的一部分，不支持指令等模板语法。\n\n- **参考**\n - [指南 - `<template>` 上的 `v-if`](https://cn.vuejs.org/guide/essentials/conditional.html#v-if-on-template)\n - [指南 - `<template>` 上的 `v-for`](https://cn.vuejs.org/guide/essentials/list.html#v-for-on-template)\n - [指南 - 具名插槽](https://cn.vuejs.org/guide/components/slots.html#named-slots)\n"
|
|
247
247
|
},
|
|
248
248
|
"attributes": [],
|
|
249
249
|
"references": [
|
|
@@ -279,7 +279,7 @@
|
|
|
279
279
|
"name": "v-text",
|
|
280
280
|
"description": {
|
|
281
281
|
"kind": "markdown",
|
|
282
|
-
"value": "\n更新元素的文本内容。\n\n- **期望的绑定值类型：**`string`\n\n- **详细信息**\n\n `v-text` 通过设置元素的 [textContent](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) 属性来工作，因此它将覆盖元素中所有现有的内容。如果你需要更新 `textContent` 的部分，应该使用 [mustache interpolations](https://cn.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-
|
|
282
|
+
"value": "\n更新元素的文本内容。\n\n- **期望的绑定值类型：**`string`\n\n- **详细信息**\n\n `v-text` 通过设置元素的 [textContent](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) 属性来工作，因此它将覆盖元素中所有现有的内容。如果你需要更新 `textContent` 的部分，应该使用 [mustache interpolations](https://cn.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://cn.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` 的内容直接作为普通 HTML 插入—— Vue 模板语法是不会被解析的。如果你发现自己正打算用 `v-html` 来编写模板，不如重新想想怎么使用组件来代替。\n\n ::: warning 安全说明\n 在你的站点上动态渲染任意的 HTML 是非常危险的，因为它很容易导致 [XSS 攻击](https://en.wikipedia.org/wiki/Cross-site_scripting)。请只对可信内容使用 HTML 插值，**绝不要**将用户提供的内容作为插值\n :::\n\n 在[单文件组件](https://cn.vuejs.org/guide/scaling-up/sfc.html)，`scoped` 样式将不会作用于 `v-html` 里的内容，因为 HTML 内容不会被 Vue 的模板编译器解析。如果你想让 `v-html` 的内容也支持 scoped CSS，你可以使用 [CSS modules](./sfc-css-features#css-modules) 或使用一个额外的全局 `<style>` 元素，手动设置类似 BEM 的作用域策略。\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` 的内容直接作为普通 HTML 插入—— Vue 模板语法是不会被解析的。如果你发现自己正打算用 `v-html` 来编写模板，不如重新想想怎么使用组件来代替。\n\n ::: warning 安全说明\n 在你的站点上动态渲染任意的 HTML 是非常危险的，因为它很容易导致 [XSS 攻击](https://en.wikipedia.org/wiki/Cross-site_scripting)。请只对可信内容使用 HTML 插值，**绝不要**将用户提供的内容作为插值\n :::\n\n 在[单文件组件](https://cn.vuejs.org/guide/scaling-up/sfc.html)，`scoped` 样式将不会作用于 `v-html` 里的内容，因为 HTML 内容不会被 Vue 的模板编译器解析。如果你想让 `v-html` 的内容也支持 scoped CSS，你可以使用 [CSS modules](./sfc-css-features#css-modules) 或使用一个额外的全局 `<style>` 元素，手动设置类似 BEM 的作用域策略。\n\n- **示例**\n\n ```html\n <div v-html=\"html\"></div>\n ```\n\n- **参考**[模板语法 - 原始 HTML](https://cn.vuejs.org/guide/essentials/template-syntax.html#raw-html)\n"
|
|
316
316
|
},
|
|
317
317
|
"references": [
|
|
318
318
|
{
|
|
@@ -345,7 +345,7 @@
|
|
|
345
345
|
"name": "v-show",
|
|
346
346
|
"description": {
|
|
347
347
|
"kind": "markdown",
|
|
348
|
-
"value": "\n基于表达式值的真假性，来改变元素的可见性。\n\n- **期望的绑定值类型：**`any`\n\n- **详细信息**\n\n `v-show` 通过设置内联样式的 `display` CSS 属性来工作，当元素可见时将使用初始 `display` 值。当条件改变时，也会触发过渡效果。\n\n-
|
|
348
|
+
"value": "\n基于表达式值的真假性，来改变元素的可见性。\n\n- **期望的绑定值类型：**`any`\n\n- **详细信息**\n\n `v-show` 通过设置内联样式的 `display` CSS 属性来工作，当元素可见时将使用初始 `display` 值。当条件改变时，也会触发过渡效果。\n\n- **参考**[条件渲染 - v-show](https://cn.vuejs.org/guide/essentials/conditional.html#v-show)\n"
|
|
349
349
|
},
|
|
350
350
|
"references": [
|
|
351
351
|
{
|
|
@@ -378,7 +378,7 @@
|
|
|
378
378
|
"name": "v-if",
|
|
379
379
|
"description": {
|
|
380
380
|
"kind": "markdown",
|
|
381
|
-
"value": "\n基于表达式值的真假性，来条件性地渲染元素或者模板片段。\n\n- **期望的绑定值类型：**`any`\n\n- **详细信息**\n\n 当 `v-if` 元素被触发，元素及其所包含的指令/组件都会销毁和重构。如果初始条件是假，那么其内部的内容根本都不会被渲染。\n\n 可用于 `<template>` 表示仅包含文本或多个元素的条件块。\n\n 当条件改变时会触发过渡效果。\n\n 当同时使用时，`v-if` 比 `v-for` 优先级更高。我们并不推荐在一元素上同时使用这两个指令 — 查看[列表渲染指南](https://cn.vuejs.org/guide/essentials/list.html#v-for-with-v-if)详情。\n\n-
|
|
381
|
+
"value": "\n基于表达式值的真假性，来条件性地渲染元素或者模板片段。\n\n- **期望的绑定值类型：**`any`\n\n- **详细信息**\n\n 当 `v-if` 元素被触发，元素及其所包含的指令/组件都会销毁和重构。如果初始条件是假，那么其内部的内容根本都不会被渲染。\n\n 可用于 `<template>` 表示仅包含文本或多个元素的条件块。\n\n 当条件改变时会触发过渡效果。\n\n 当同时使用时，`v-if` 比 `v-for` 优先级更高。我们并不推荐在一元素上同时使用这两个指令 — 查看[列表渲染指南](https://cn.vuejs.org/guide/essentials/list.html#v-for-with-v-if)详情。\n\n- **参考**[条件渲染 - v-if](https://cn.vuejs.org/guide/essentials/conditional.html#v-if)\n"
|
|
382
382
|
},
|
|
383
383
|
"references": [
|
|
384
384
|
{
|
|
@@ -412,7 +412,7 @@
|
|
|
412
412
|
"valueSet": "v",
|
|
413
413
|
"description": {
|
|
414
414
|
"kind": "markdown",
|
|
415
|
-
"value": "\n表示 `v-if` 或 `v-if` / `v-else-if` 链式调用的“else 块”。\n\n- **无需传入表达式**\n\n- **详细信息**\n\n - 限定：上一个兄弟元素必须有 `v-if` 或 `v-else-if`。\n\n - 可用于 `<template>` 表示仅包含文本或多个元素的条件块。\n\n- **示例**\n\n ```html\n <div v-if=\"Math.random() > 0.5\">\n Now you see me\n </div>\n <div v-else>\n Now you don't\n </div>\n ```\n\n-
|
|
415
|
+
"value": "\n表示 `v-if` 或 `v-if` / `v-else-if` 链式调用的“else 块”。\n\n- **无需传入表达式**\n\n- **详细信息**\n\n - 限定：上一个兄弟元素必须有 `v-if` 或 `v-else-if`。\n\n - 可用于 `<template>` 表示仅包含文本或多个元素的条件块。\n\n- **示例**\n\n ```html\n <div v-if=\"Math.random() > 0.5\">\n Now you see me\n </div>\n <div v-else>\n Now you don't\n </div>\n ```\n\n- **参考**[条件渲染 - v-else](https://cn.vuejs.org/guide/essentials/conditional.html#v-else)\n"
|
|
416
416
|
},
|
|
417
417
|
"references": [
|
|
418
418
|
{
|
|
@@ -445,7 +445,7 @@
|
|
|
445
445
|
"name": "v-else-if",
|
|
446
446
|
"description": {
|
|
447
447
|
"kind": "markdown",
|
|
448
|
-
"value": "\n表示 `v-if` 的“else if 块”。可以进行链式调用。\n\n- **期望的绑定值类型：**`any`\n\n- **详细信息**\n\n - 限定：上一个兄弟元素必须有 `v-if` 或 `v-else-if`。\n\n - 可用于 `<template>` 表示仅包含文本或多个元素的条件块。\n\n- **示例**\n\n ```html\n <div v-if=\"type === 'A'\">\n A\n </div>\n <div v-else-if=\"type === 'B'\">\n B\n </div>\n <div v-else-if=\"type === 'C'\">\n C\n </div>\n <div v-else>\n Not A/B/C\n </div>\n ```\n\n-
|
|
448
|
+
"value": "\n表示 `v-if` 的“else if 块”。可以进行链式调用。\n\n- **期望的绑定值类型：**`any`\n\n- **详细信息**\n\n - 限定：上一个兄弟元素必须有 `v-if` 或 `v-else-if`。\n\n - 可用于 `<template>` 表示仅包含文本或多个元素的条件块。\n\n- **示例**\n\n ```html\n <div v-if=\"type === 'A'\">\n A\n </div>\n <div v-else-if=\"type === 'B'\">\n B\n </div>\n <div v-else-if=\"type === 'C'\">\n C\n </div>\n <div v-else>\n Not A/B/C\n </div>\n ```\n\n- **参考**[条件渲染 - v-else-if](https://cn.vuejs.org/guide/essentials/conditional.html#v-else-if)\n"
|
|
449
449
|
},
|
|
450
450
|
"references": [
|
|
451
451
|
{
|
|
@@ -478,7 +478,7 @@
|
|
|
478
478
|
"name": "v-for",
|
|
479
479
|
"description": {
|
|
480
480
|
"kind": "markdown",
|
|
481
|
-
"value": "\n基于原始数据多次渲染元素或模板块。\n\n- **期望的绑定值类型：**`Array | Object | number | string | Iterable`\n\n- **详细信息**\n\n 指令值必须使用特殊语法 `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` 的默认方式是尝试就地更新元素而不移动它们。要强制其重新排序元素，你需要用特殊 attribute `key` 来提供一个排序提示：\n\n ```html\n <div v-for=\"item in items\" :key=\"item.id\">\n {{ item.text }}\n </div>\n ```\n\n `v-for` 也可以用于 [Iterable Protocol](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol) 的实现，包括原生 `Map` 和 `Set`。\n\n-
|
|
481
|
+
"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` 的默认方式是尝试就地更新元素而不移动它们。要强制其重新排序元素，你需要用特殊 attribute `key` 来提供一个排序提示：\n\n ```html\n <div v-for=\"item in items\" :key=\"item.id\">\n {{ item.text }}\n </div>\n ```\n\n `v-for` 也可以用于 [Iterable Protocol](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol) 的实现，包括原生 `Map` 和 `Set`。\n\n- **参考**\n - [列表渲染](https://cn.vuejs.org/guide/essentials/list.html)\n"
|
|
482
482
|
},
|
|
483
483
|
"references": [
|
|
484
484
|
{
|
|
@@ -511,7 +511,7 @@
|
|
|
511
511
|
"name": "v-on",
|
|
512
512
|
"description": {
|
|
513
513
|
"kind": "markdown",
|
|
514
|
-
"value": "\n给元素绑定事件监听器。\n\n- **缩写：**`@`\n\n- **期望的绑定值类型：**`Function | Inline Statement | Object (不带参数)`\n\n- **参数：**`event` (使用对象语法则为可选项)\n\n-
|
|
514
|
+
"value": "\n给元素绑定事件监听器。\n\n- **缩写：**`@`\n\n- **期望的绑定值类型：**`Function | Inline Statement | Object (不带参数)`\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)。当用于自定义元素组件，则监听子组件触发的**自定义事件**。\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 <!-- 阻止默认事件 -->\n <button @click.prevent=\"doThis\"></button>\n\n <!-- 不带表达式地阻止默认事件 -->\n <form @submit.prevent></form>\n\n <!-- 链式调用修饰符 -->\n <button @click.stop.prevent=\"doThis\"></button>\n\n <!-- 按键用于 keyAlias 修饰符-->\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://cn.vuejs.org/guide/essentials/event-handling.html)\n - [组件 - 自定义事件](https://cn.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动态的绑定一个或多个 attribute，也可以是组件的 prop。\n\n- **缩写：**`:` 或者 `.` (当使用 `.prop` 修饰符)\n\n- **期望：**`any (带参数) | Object (不带参数)`\n\n- **参数：**`attrOrProp (可选的)`\n\n-
|
|
547
|
+
"value": "\n动态的绑定一个或多个 attribute，也可以是组件的 prop。\n\n- **缩写：**`:` 或者 `.` (当使用 `.prop` 修饰符)\n\n- **期望：**`any (带参数) | Object (不带参数)`\n\n- **参数：**`attrOrProp (可选的)`\n\n- **修饰符**\n\n - `.camel` - 将短横线命名的 attribute 转变为驼峰式命名。\n - `.prop` - 强制绑定为 DOM property。<sup class=\"vt-badge\">3.2+</sup>\n - `.attr` - 强制绑定为 DOM attribute。<sup class=\"vt-badge\">3.2+</sup>\n\n- **用途**\n\n 当用于绑定 `class` 或 `style` attribute，`v-bind` 支持额外的值类型如数组或对象。详见下方的指南链接。\n\n 在处理绑定时，Vue 默认会利用 `in` 操作符来检查该元素上是否定义了和绑定的 key 同名的 DOM property。如果存在同名的 property，则 Vue 会把作为 DOM property 赋值，而不是作为 attribute 设置。这个行为在大多数情况都符合期望的绑定值类型，但是你也可以显式用 `.prop` 和 `.attr` 修饰符来强制绑定方式。有时这是必要的，特别是在和[自定义元素](https://cn.vuejs.org/guide/extras/web-components.html#passing-dom-properties)打交道时。\n\n 当用于组件 props 绑定时，所绑定的 props 必须在子组件中已被正确声明。\n\n 当不带参数使用时，可以用于绑定一个包含了多个 attribute 名称-绑定值对的对象。\n\n- **示例**\n\n ```html\n <!-- 绑定 attribute -->\n <img v-bind:src=\"imageSrc\" />\n\n <!-- 动态 attribute 名 -->\n <button v-bind:[key]=\"value\"></button>\n\n <!-- 缩写 -->\n <img :src=\"imageSrc\" />\n\n <!-- 缩写形式的动态 attribute 名 -->\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 <!-- 绑定对象形式的 attribute -->\n <div v-bind=\"{ id: someProp, 'other-attr': otherProp }\"></div>\n\n <!-- prop 绑定。“prop” 必须在子组件中已声明。 -->\n <MyComponent :prop=\"someThing\" />\n\n <!-- 传递子父组件共有的 prop -->\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 当在 DOM 内模板使用 `.camel` 修饰符，可以驼峰化 `v-bind` attribute 的名称，例如 SVG `viewBox` attribute：\n\n ```html\n <svg :view-box.camel=\"viewBox\"></svg>\n ```\n\n 如果使用字符串模板或使用构建步骤预编译模板，则不需要 `.camel`。\n\n- **参考**\n - [Class 与 Style 绑定](https://cn.vuejs.org/guide/essentials/class-and-style.html)\n - [组件 - Prop 传递细节](https://cn.vuejs.org/guide/components/props.html#prop-passing-details)\n"
|
|
548
548
|
},
|
|
549
549
|
"references": [
|
|
550
550
|
{
|
|
@@ -577,7 +577,7 @@
|
|
|
577
577
|
"name": "v-model",
|
|
578
578
|
"description": {
|
|
579
579
|
"kind": "markdown",
|
|
580
|
-
"value": "\n在表单输入元素或组件上创建双向绑定。\n\n- **期望的绑定值类型**：根据表单输入元素或组件输出的值而变化\n\n- **仅限：**\n\n - `<input>`\n - `<select>`\n - `<textarea>`\n - components\n\n-
|
|
580
|
+
"value": "\n在表单输入元素或组件上创建双向绑定。\n\n- **期望的绑定值类型**：根据表单输入元素或组件输出的值而变化\n\n- **仅限：**\n\n - `<input>`\n - `<select>`\n - `<textarea>`\n - components\n\n- **修饰符**\n\n - [`.lazy`](https://cn.vuejs.org/guide/essentials/forms.html#lazy) - 监听 `change` 事件而不是 `input`\n - [`.number`](https://cn.vuejs.org/guide/essentials/forms.html#number) - 将输入的合法字符串转为数字\n - [`.trim`](https://cn.vuejs.org/guide/essentials/forms.html#trim) - 移除输入内容两端空格\n\n- **参考**\n\n - [表单输入绑定](https://cn.vuejs.org/guide/essentials/forms.html)\n - [组件事件 - 配合 `v-model` 使用](https://cn.vuejs.org/guide/components/v-model.html)\n"
|
|
581
581
|
},
|
|
582
582
|
"references": [
|
|
583
583
|
{
|
|
@@ -610,7 +610,7 @@
|
|
|
610
610
|
"name": "v-slot",
|
|
611
611
|
"description": {
|
|
612
612
|
"kind": "markdown",
|
|
613
|
-
"value": "\n用于声明具名插槽或是期望接收 props 的作用域插槽。\n\n- **缩写：**`#`\n\n- **期望的绑定值类型**：能够合法在函数参数位置使用的 JavaScript 表达式。支持解构语法。绑定值是可选的——只有在给作用域插槽传递 props 才需要。\n\n- **参数**：插槽名 (可选，默认是 `default`)\n\n- **仅限：**\n\n - `<template>`\n - [components](https://cn.vuejs.org/guide/components/slots.html#scoped-slots) (用于带有 prop 的单个默认插槽)\n\n-
|
|
613
|
+
"value": "\n用于声明具名插槽或是期望接收 props 的作用域插槽。\n\n- **缩写：**`#`\n\n- **期望的绑定值类型**：能够合法在函数参数位置使用的 JavaScript 表达式。支持解构语法。绑定值是可选的——只有在给作用域插槽传递 props 才需要。\n\n- **参数**：插槽名 (可选，默认是 `default`)\n\n- **仅限：**\n\n - `<template>`\n - [components](https://cn.vuejs.org/guide/components/slots.html#scoped-slots) (用于带有 prop 的单个默认插槽)\n\n- **示例**\n\n ```html\n <!-- 具名插槽 -->\n <BaseLayout>\n <template v-slot:header>\n Header content\n </template>\n\n <template v-slot:default>\n Default slot content\n </template>\n\n <template v-slot:footer>\n Footer content\n </template>\n </BaseLayout>\n\n <!-- 接收 prop 的具名插槽 -->\n <InfiniteScroll>\n <template v-slot:item=\"slotProps\">\n <div class=\"item\">\n {{ slotProps.item.text }}\n </div>\n </template>\n </InfiniteScroll>\n\n <!-- 接收 prop 的默认插槽，并解构 -->\n <Mouse v-slot=\"{ x, y }\">\n Mouse position: {{ x }}, {{ y }}\n </Mouse>\n ```\n\n- **参考**\n - [组件 - 插槽](https://cn.vuejs.org/guide/components/slots.html)\n"
|
|
614
614
|
},
|
|
615
615
|
"references": [
|
|
616
616
|
{
|
|
@@ -643,7 +643,7 @@
|
|
|
643
643
|
"name": "v-pre",
|
|
644
644
|
"description": {
|
|
645
645
|
"kind": "markdown",
|
|
646
|
-
"value": "\n跳过该元素及其所有子元素的编译。\n\n- **无需传入**\n\n- **详细信息**\n\n 元素内具有 `v-pre`，所有 Vue 模板语法都会被保留并按原样渲染。最常见的用例就是显示原始双大括号标签及内容。\n\n-
|
|
646
|
+
"value": "\n跳过该元素及其所有子元素的编译。\n\n- **无需传入**\n\n- **详细信息**\n\n 元素内具有 `v-pre`，所有 Vue 模板语法都会被保留并按原样渲染。最常见的用例就是显示原始双大括号标签及内容。\n\n- **示例**\n\n ```html\n <span v-pre>{{ this will not be compiled }}</span>\n ```\n"
|
|
647
647
|
},
|
|
648
648
|
"references": [
|
|
649
649
|
{
|
|
@@ -676,7 +676,7 @@
|
|
|
676
676
|
"name": "v-once",
|
|
677
677
|
"description": {
|
|
678
678
|
"kind": "markdown",
|
|
679
|
-
"value": "\n仅渲染元素和组件一次，并跳过之后的更新。\n\n- **无需传入**\n\n- **详细信息**\n\n 在随后的重新渲染，元素/组件及其所有子项将被当作静态内容并跳过渲染。这可以用来优化更新时的性能。\n\n ```html\n <!-- 单个元素 -->\n <span v-once>This will never change: {{msg}}</span>\n <!-- 带有子元素的元素 -->\n <div v-once>\n <h1>comment</h1>\n <p>{{msg}}</p>\n </div>\n <!-- 组件 -->\n <MyComponent v-once :comment=\"msg\" />\n <!-- `v-for` 指令 -->\n <ul>\n <li v-for=\"i in list\" v-once>{{i}}</li>\n </ul>\n ```\n\n 从 3.2 起，你也可以搭配 [`v-memo`](#v-memo) 的无效条件来缓存部分模板。\n\n-
|
|
679
|
+
"value": "\n仅渲染元素和组件一次，并跳过之后的更新。\n\n- **无需传入**\n\n- **详细信息**\n\n 在随后的重新渲染，元素/组件及其所有子项将被当作静态内容并跳过渲染。这可以用来优化更新时的性能。\n\n ```html\n <!-- 单个元素 -->\n <span v-once>This will never change: {{msg}}</span>\n <!-- 带有子元素的元素 -->\n <div v-once>\n <h1>comment</h1>\n <p>{{msg}}</p>\n </div>\n <!-- 组件 -->\n <MyComponent v-once :comment=\"msg\" />\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://cn.vuejs.org/guide/essentials/template-syntax.html#text-interpolation)\n - [v-memo](#v-memo)\n"
|
|
680
680
|
},
|
|
681
681
|
"references": [
|
|
682
682
|
{
|
|
@@ -709,7 +709,7 @@
|
|
|
709
709
|
"name": "v-memo",
|
|
710
710
|
"description": {
|
|
711
711
|
"kind": "markdown",
|
|
712
|
-
"value": "\n- **期望的绑定值类型：**`any[]`\n\n- **详细信息**\n\n 缓存一个模板的子树。在元素和组件上都可以使用。为了实现缓存，该指令需要传入一个固定长度的依赖值数组进行比较。如果数组里的每个值都与最后一次的渲染相同，那么整个子树的更新将被跳过。举例来说：\n\n ```html\n <div v-memo=\"[valueA, valueB]\">\n ...\n </div>\n ```\n\n 当组件重新渲染，如果 `valueA` 和 `valueB` 都保持不变，这个 `<div>` 及其子项的所有更新都将被跳过。实际上，甚至虚拟 DOM 的 vnode 创建也将被跳过，因为缓存的子树副本可以被重新使用。\n\n 正确指定缓存数组很重要，否则应该生效的更新可能被跳过。`v-memo` 传入空依赖数组 (`v-memo=\"[]\"`) 将与 `v-once` 效果相同。\n\n **与 `v-for` 一起使用**\n\n `v-memo` 仅用于性能至上场景中的微小优化，应该很少需要。最常见的情况可能是有助于渲染海量 `v-for` 列表 (长度超过 1000 的情况)：\n\n ```html\n <div v-for=\"item in list\" :key=\"item.id\" v-memo=\"[item.id === selected]\">\n <p>ID: {{ item.id }} - selected: {{ item.id === selected }}</p>\n <p>...more child nodes</p>\n </div>\n ```\n\n 当组件的 `selected` 状态改变，默认会重新创建大量的 vnode，尽管绝大部分都跟之前是一模一样的。`v-memo` 用在这里本质上是在说“只有当该项的被选中状态改变时才需要更新”。这使得每个选中状态没有变的项能完全重用之前的 vnode 并跳过差异比较。注意这里 memo 依赖数组中并不需要包含 `item.id`，因为 Vue 也会根据 item 的 `:key` 进行判断。\n\n :::warning 警告\n 当搭配 `v-for` 使用 `v-memo`，确保两者都绑定在同一个元素上。**`v-memo` 不能用在 `v-for` 内部。**\n :::\n\n `v-memo` 也能被用于在一些默认优化失败的边际情况下，手动避免子组件出现不需要的更新。但是一样的，开发者需要负责指定正确的依赖数组以免跳过必要的更新。\n\n-
|
|
712
|
+
"value": "\n- **期望的绑定值类型：**`any[]`\n\n- **详细信息**\n\n 缓存一个模板的子树。在元素和组件上都可以使用。为了实现缓存，该指令需要传入一个固定长度的依赖值数组进行比较。如果数组里的每个值都与最后一次的渲染相同，那么整个子树的更新将被跳过。举例来说：\n\n ```html\n <div v-memo=\"[valueA, valueB]\">\n ...\n </div>\n ```\n\n 当组件重新渲染，如果 `valueA` 和 `valueB` 都保持不变，这个 `<div>` 及其子项的所有更新都将被跳过。实际上，甚至虚拟 DOM 的 vnode 创建也将被跳过，因为缓存的子树副本可以被重新使用。\n\n 正确指定缓存数组很重要，否则应该生效的更新可能被跳过。`v-memo` 传入空依赖数组 (`v-memo=\"[]\"`) 将与 `v-once` 效果相同。\n\n **与 `v-for` 一起使用**\n\n `v-memo` 仅用于性能至上场景中的微小优化，应该很少需要。最常见的情况可能是有助于渲染海量 `v-for` 列表 (长度超过 1000 的情况)：\n\n ```html\n <div v-for=\"item in list\" :key=\"item.id\" v-memo=\"[item.id === selected]\">\n <p>ID: {{ item.id }} - selected: {{ item.id === selected }}</p>\n <p>...more child nodes</p>\n </div>\n ```\n\n 当组件的 `selected` 状态改变，默认会重新创建大量的 vnode，尽管绝大部分都跟之前是一模一样的。`v-memo` 用在这里本质上是在说“只有当该项的被选中状态改变时才需要更新”。这使得每个选中状态没有变的项能完全重用之前的 vnode 并跳过差异比较。注意这里 memo 依赖数组中并不需要包含 `item.id`，因为 Vue 也会根据 item 的 `:key` 进行判断。\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"
|
|
713
713
|
},
|
|
714
714
|
"references": [
|
|
715
715
|
{
|
|
@@ -742,7 +742,7 @@
|
|
|
742
742
|
"name": "v-cloak",
|
|
743
743
|
"description": {
|
|
744
744
|
"kind": "markdown",
|
|
745
|
-
"value": "\n用于隐藏尚未完成编译的 DOM 模板。\n\n- **无需传入**\n\n- **详细信息**\n\n **该指令只在没有构建步骤的环境下需要使用。**\n\n 当使用直接在 DOM 中书写的模板时，可能会出现一种叫做“未编译模板闪现”的情况：用户可能先看到的是还没编译完成的双大括号标签，直到挂载的组件将它们替换为实际渲染的内容。\n\n `v-cloak` 会保留在所绑定的元素上，直到相关组件实例被挂载后才移除。配合像 `[v-cloak] { display: none }` 这样的 CSS 规则，它可以在组件编译完毕前隐藏原始模板。\n\n-
|
|
745
|
+
"value": "\n用于隐藏尚未完成编译的 DOM 模板。\n\n- **无需传入**\n\n- **详细信息**\n\n **该指令只在没有构建步骤的环境下需要使用。**\n\n 当使用直接在 DOM 中书写的模板时，可能会出现一种叫做“未编译模板闪现”的情况：用户可能先看到的是还没编译完成的双大括号标签，直到挂载的组件将它们替换为实际渲染的内容。\n\n `v-cloak` 会保留在所绑定的元素上，直到相关组件实例被挂载后才移除。配合像 `[v-cloak] { display: none }` 这样的 CSS 规则，它可以在组件编译完毕前隐藏原始模板。\n\n- **示例**\n\n ```css\n [v-cloak] {\n display: none;\n }\n ```\n\n ```html\n <div v-cloak>\n {{ message }}\n </div>\n ```\n\n 直到编译完成前，`<div>` 将不可见。\n"
|
|
746
746
|
},
|
|
747
747
|
"references": [
|
|
748
748
|
{
|
|
@@ -775,7 +775,7 @@
|
|
|
775
775
|
"name": "key",
|
|
776
776
|
"description": {
|
|
777
777
|
"kind": "markdown",
|
|
778
|
-
"value": "\n`key` 这个特殊的 attribute 主要作为 Vue 的虚拟 DOM 算法提示，在比较新旧节点列表时用于识别 vnode。\n\n- **预期**：`number | string | symbol`\n\n- **详细信息**\n\n 在没有 key 的情况下，Vue 将使用一种最小化元素移动的算法，并尽可能地就地更新/复用相同类型的元素。如果传了 key，则将根据 key 的变化顺序来重新排列元素，并且将始终移除/销毁 key 已经不存在的元素。\n\n 同一个父元素下的子元素必须具有**唯一的 key**。重复的 key 将会导致渲染异常。\n\n 最常见的用例是与 `v-for` 结合：\n\n ```html\n <ul>\n <li v-for=\"item in items\" :key=\"item.id\">...</li>\n </ul>\n ```\n\n 也可以用于强制替换一个元素/组件而不是复用它。当你想这么做时它可能会很有用：\n\n - 在适当的时候触发组件的生命周期钩子\n - 触发过渡\n\n 举例来说：\n\n ```html\n <transition>\n <span :key=\"text\">{{ text }}</span>\n </transition>\n ```\n\n 当 `text` 变化时，`<span>` 总是会被替换而不是更新，因此 transition 将会被触发。\n\n-
|
|
778
|
+
"value": "\n`key` 这个特殊的 attribute 主要作为 Vue 的虚拟 DOM 算法提示，在比较新旧节点列表时用于识别 vnode。\n\n- **预期**：`number | string | symbol`\n\n- **详细信息**\n\n 在没有 key 的情况下，Vue 将使用一种最小化元素移动的算法，并尽可能地就地更新/复用相同类型的元素。如果传了 key，则将根据 key 的变化顺序来重新排列元素，并且将始终移除/销毁 key 已经不存在的元素。\n\n 同一个父元素下的子元素必须具有**唯一的 key**。重复的 key 将会导致渲染异常。\n\n 最常见的用例是与 `v-for` 结合：\n\n ```html\n <ul>\n <li v-for=\"item in items\" :key=\"item.id\">...</li>\n </ul>\n ```\n\n 也可以用于强制替换一个元素/组件而不是复用它。当你想这么做时它可能会很有用：\n\n - 在适当的时候触发组件的生命周期钩子\n - 触发过渡\n\n 举例来说：\n\n ```html\n <transition>\n <span :key=\"text\">{{ text }}</span>\n </transition>\n ```\n\n 当 `text` 变化时，`<span>` 总是会被替换而不是更新，因此 transition 将会被触发。\n\n- **参考**[指南 - 列表渲染 - 通过 `key` 管理状态](https://cn.vuejs.org/guide/essentials/list.html#maintaining-state-with-key)\n"
|
|
779
779
|
},
|
|
780
780
|
"references": [
|
|
781
781
|
{
|
|
@@ -808,7 +808,7 @@
|
|
|
808
808
|
"name": "ref",
|
|
809
809
|
"description": {
|
|
810
810
|
"kind": "markdown",
|
|
811
|
-
"value": "\n用于注册[模板引用](https://cn.vuejs.org/guide/essentials/template-refs.html)。\n\n- **预期**：`string | Function`\n\n- **详细信息**\n\n `ref` 用于注册元素或子组件的引用。\n\n 使用选项式 API，引用将被注册在组件的 `this.$refs` 对象里：\n\n ```html\n <!-- 存储为 this.$refs.p -->\n <p ref=\"p\">hello</p>\n ```\n\n 使用组合式 API，引用将存储在与名字匹配的 ref 里：\n\n ```vue\n <script setup>\n import { ref } from 'vue'\n\n const p = ref()\n </script>\n\n <template>\n <p ref=\"p\">hello</p>\n </template>\n ```\n\n 如果用于普通 DOM 元素，引用将是元素本身；如果用于子组件，引用将是子组件的实例。\n\n 或者 `ref` 可以接收一个函数值，用于对存储引用位置的完全控制：\n\n ```html\n <ChildComponent :ref=\"(el) => child = el\" />\n ```\n\n 关于 ref 注册时机的重要说明：因为 ref 本身是作为渲染函数的结果来创建的，必须等待组件挂载后才能对它进行访问。\n\n `this.$refs` 也是非响应式的，因此你不应该尝试在模板中使用它来进行数据绑定。\n\n-
|
|
811
|
+
"value": "\n用于注册[模板引用](https://cn.vuejs.org/guide/essentials/template-refs.html)。\n\n- **预期**：`string | Function`\n\n- **详细信息**\n\n `ref` 用于注册元素或子组件的引用。\n\n 使用选项式 API，引用将被注册在组件的 `this.$refs` 对象里：\n\n ```html\n <!-- 存储为 this.$refs.p -->\n <p ref=\"p\">hello</p>\n ```\n\n 使用组合式 API，引用将存储在与名字匹配的 ref 里：\n\n ```vue\n <script setup>\n import { ref } from 'vue'\n\n const p = ref()\n </script>\n\n <template>\n <p ref=\"p\">hello</p>\n </template>\n ```\n\n 如果用于普通 DOM 元素，引用将是元素本身；如果用于子组件，引用将是子组件的实例。\n\n 或者 `ref` 可以接收一个函数值，用于对存储引用位置的完全控制：\n\n ```html\n <ChildComponent :ref=\"(el) => child = el\" />\n ```\n\n 关于 ref 注册时机的重要说明：因为 ref 本身是作为渲染函数的结果来创建的，必须等待组件挂载后才能对它进行访问。\n\n `this.$refs` 也是非响应式的，因此你不应该尝试在模板中使用它来进行数据绑定。\n\n- **参考**\n - [指南 - 模板引用](https://cn.vuejs.org/guide/essentials/template-refs.html)\n - [指南 - 为模板引用标注类型](https://cn.vuejs.org/guide/typescript/composition-api.html#typing-template-refs) <sup class=\"vt-badge ts\" />\n - [指南 - 为组件模板引用标注类型](https://cn.vuejs.org/guide/typescript/composition-api.html#typing-component-template-refs) <sup class=\"vt-badge ts\" />\n"
|
|
812
812
|
},
|
|
813
813
|
"references": [
|
|
814
814
|
{
|
|
@@ -841,7 +841,7 @@
|
|
|
841
841
|
"name": "is",
|
|
842
842
|
"description": {
|
|
843
843
|
"kind": "markdown",
|
|
844
|
-
"value": "\n用于绑定[动态组件](https://cn.vuejs.org/guide/essentials/component-basics.html#dynamic-components)。\n\n- **预期**：`string | Component`\n\n- **用于原生元素** <sup class=\"vt-badge\">3.1+</sup>\n\n 当 `is` attribute 用于原生 HTML 元素时，它将被当作 [Customized built-in element](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-customized-builtin-example)，其为原生 web 平台的特性。\n\n 但是，在这种用例中，你可能需要 Vue 用其组件来替换原生元素，如 [DOM 模板解析注意事项](https://cn.vuejs.org/guide/essentials/component-basics.html#dom-template-parsing-caveats)所述。你可以在 `is` attribute 的值中加上 `vue:` 前缀，这样 Vue 就会把该元素渲染为 Vue 组件：\n\n ```html\n <table>\n <tr is=\"vue:my-row-component\"></tr>\n </table>\n ```\n\n-
|
|
844
|
+
"value": "\n用于绑定[动态组件](https://cn.vuejs.org/guide/essentials/component-basics.html#dynamic-components)。\n\n- **预期**：`string | Component`\n\n- **用于原生元素** <sup class=\"vt-badge\">3.1+</sup>\n\n 当 `is` attribute 用于原生 HTML 元素时，它将被当作 [Customized built-in element](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-customized-builtin-example)，其为原生 web 平台的特性。\n\n 但是，在这种用例中，你可能需要 Vue 用其组件来替换原生元素，如 [DOM 模板解析注意事项](https://cn.vuejs.org/guide/essentials/component-basics.html#dom-template-parsing-caveats)所述。你可以在 `is` attribute 的值中加上 `vue:` 前缀，这样 Vue 就会把该元素渲染为 Vue 组件：\n\n ```html\n <table>\n <tr is=\"vue:my-row-component\"></tr>\n </table>\n ```\n\n- **参考**\n\n - [内置特殊元素 - `<component>`](https://cn.vuejs.org/api/built-in-special-elements.html#component)\n - [动态组件](https://cn.vuejs.org/guide/essentials/component-basics.html#dynamic-components)\n"
|
|
845
845
|
},
|
|
846
846
|
"references": [
|
|
847
847
|
{
|
package/out/languageService.js
CHANGED
|
@@ -21,6 +21,8 @@ const vue_template_1 = require("./plugins/vue-template");
|
|
|
21
21
|
const vue_twoslash_queries_1 = require("./plugins/vue-twoslash-queries");
|
|
22
22
|
const vue_visualize_hidden_callback_param_1 = require("./plugins/vue-visualize-hidden-callback-param");
|
|
23
23
|
const vue_directive_comments_1 = require("./plugins/vue-directive-comments");
|
|
24
|
+
const vue_extract_file_1 = require("./plugins/vue-extract-file");
|
|
25
|
+
const vue_toggle_v_bind_codeaction_1 = require("./plugins/vue-toggle-v-bind-codeaction");
|
|
24
26
|
const types_1 = require("./types");
|
|
25
27
|
function resolveConfig(config, compilerOptions = {}, vueCompilerOptions = {}, ts = require('typescript'), codegenStack = false) {
|
|
26
28
|
const resolvedVueCompilerOptions = vue.resolveVueCompilerOptions(vueCompilerOptions);
|
|
@@ -244,6 +246,8 @@ function resolvePlugins(services, vueCompilerOptions) {
|
|
|
244
246
|
services['vue/autoInsertSpaces'] ??= (0, vue_autoinsert_space_1.default)();
|
|
245
247
|
services['vue/visualizeHiddenCallbackParam'] ??= (0, vue_visualize_hidden_callback_param_1.default)();
|
|
246
248
|
services['vue/directiveComments'] ??= (0, vue_directive_comments_1.default)();
|
|
249
|
+
services['vue/extractComponent'] ??= (0, vue_extract_file_1.default)();
|
|
250
|
+
services['vue/toggleVBind'] ??= (0, vue_toggle_v_bind_codeaction_1.default)();
|
|
247
251
|
services.emmet ??= (0, volar_service_emmet_1.default)();
|
|
248
252
|
return services;
|
|
249
253
|
}
|
|
@@ -0,0 +1,228 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
const language_core_1 = require("@vue/language-core");
|
|
4
|
+
function default_1() {
|
|
5
|
+
return (ctx, modules) => {
|
|
6
|
+
if (!modules?.typescript)
|
|
7
|
+
return {};
|
|
8
|
+
const ts = modules.typescript;
|
|
9
|
+
return {
|
|
10
|
+
async provideCodeActions(document, range, _context) {
|
|
11
|
+
const startOffset = document.offsetAt(range.start);
|
|
12
|
+
const endOffset = document.offsetAt(range.end);
|
|
13
|
+
if (startOffset === endOffset) {
|
|
14
|
+
return;
|
|
15
|
+
}
|
|
16
|
+
const [vueFile] = ctx.documents.getVirtualFileByUri(document.uri);
|
|
17
|
+
if (!vueFile || !(vueFile instanceof language_core_1.VueFile))
|
|
18
|
+
return;
|
|
19
|
+
const { sfc } = vueFile;
|
|
20
|
+
const script = sfc.scriptSetup ?? sfc.script;
|
|
21
|
+
const scriptAst = sfc.scriptSetupAst ?? sfc.scriptAst;
|
|
22
|
+
if (!sfc.template || !sfc.templateAst || !script || !scriptAst)
|
|
23
|
+
return;
|
|
24
|
+
const templateCodeRange = selectTemplateCode(startOffset, endOffset, sfc.template, sfc.templateAst);
|
|
25
|
+
if (!templateCodeRange)
|
|
26
|
+
return;
|
|
27
|
+
return [
|
|
28
|
+
{
|
|
29
|
+
title: 'Extract into new dumb component',
|
|
30
|
+
kind: 'refactor.move.newFile.dumb',
|
|
31
|
+
data: {
|
|
32
|
+
uri: document.uri,
|
|
33
|
+
range: [startOffset, endOffset],
|
|
34
|
+
newName: 'NewComponent',
|
|
35
|
+
},
|
|
36
|
+
},
|
|
37
|
+
];
|
|
38
|
+
},
|
|
39
|
+
async resolveCodeAction(codeAction) {
|
|
40
|
+
const { uri, range, newName } = codeAction.data;
|
|
41
|
+
const document = ctx.getTextDocument(uri);
|
|
42
|
+
const [startOffset, endOffset] = range;
|
|
43
|
+
const [vueFile] = ctx.documents.getVirtualFileByUri(document.uri);
|
|
44
|
+
const { sfc } = vueFile;
|
|
45
|
+
const script = sfc.scriptSetup ?? sfc.script;
|
|
46
|
+
const scriptAst = sfc.scriptSetupAst ?? sfc.scriptAst;
|
|
47
|
+
if (!sfc.template || !sfc.templateAst || !script || !scriptAst)
|
|
48
|
+
return codeAction;
|
|
49
|
+
const templateCodeRange = selectTemplateCode(startOffset, endOffset, sfc.template, sfc.templateAst);
|
|
50
|
+
if (!templateCodeRange)
|
|
51
|
+
return codeAction;
|
|
52
|
+
const languageService = ctx.inject('typescript/languageService');
|
|
53
|
+
const languageServiceHost = ctx.inject('typescript/languageServiceHost');
|
|
54
|
+
const sourceFile = languageService.getProgram().getSourceFile(vueFile.mainScriptName);
|
|
55
|
+
const sourceFileKind = languageServiceHost.getScriptKind?.(vueFile.mainScriptName);
|
|
56
|
+
const toExtract = collectExtractProps();
|
|
57
|
+
const initialIndentSetting = await ctx.env.getConfiguration('volar.format.initialIndent');
|
|
58
|
+
const newUri = document.uri.substring(0, document.uri.lastIndexOf('/') + 1) + `${newName}.vue`;
|
|
59
|
+
const lastImportNode = getLastImportNode(scriptAst);
|
|
60
|
+
let newFileTags = [];
|
|
61
|
+
newFileTags.push(constructTag('template', [], initialIndentSetting.html, sfc.template.content.substring(templateCodeRange[0], templateCodeRange[1])));
|
|
62
|
+
if (toExtract.length) {
|
|
63
|
+
newFileTags.push(constructTag('script', ['setup', 'lang="ts"'], isInitialIndentNeeded(ts, sourceFileKind, initialIndentSetting), generateNewScriptContents()));
|
|
64
|
+
}
|
|
65
|
+
if (sfc.template.startTagEnd > script.startTagEnd) {
|
|
66
|
+
newFileTags = newFileTags.reverse();
|
|
67
|
+
}
|
|
68
|
+
return {
|
|
69
|
+
...codeAction,
|
|
70
|
+
edit: {
|
|
71
|
+
documentChanges: [
|
|
72
|
+
// editing current file
|
|
73
|
+
{
|
|
74
|
+
textDocument: {
|
|
75
|
+
uri: document.uri,
|
|
76
|
+
version: null,
|
|
77
|
+
},
|
|
78
|
+
edits: [
|
|
79
|
+
{
|
|
80
|
+
range: {
|
|
81
|
+
start: document.positionAt(sfc.template.startTagEnd + templateCodeRange[0]),
|
|
82
|
+
end: document.positionAt(sfc.template.startTagEnd + templateCodeRange[1]),
|
|
83
|
+
},
|
|
84
|
+
newText: generateReplaceTemplate(),
|
|
85
|
+
},
|
|
86
|
+
{
|
|
87
|
+
range: lastImportNode ? {
|
|
88
|
+
start: document.positionAt(script.startTagEnd + lastImportNode.end),
|
|
89
|
+
end: document.positionAt(script.startTagEnd + lastImportNode.end),
|
|
90
|
+
} : {
|
|
91
|
+
start: document.positionAt(script.startTagEnd),
|
|
92
|
+
end: document.positionAt(script.startTagEnd),
|
|
93
|
+
},
|
|
94
|
+
newText: `\nimport ${newName} from './${newName}.vue'`,
|
|
95
|
+
},
|
|
96
|
+
],
|
|
97
|
+
},
|
|
98
|
+
// creating new file with content
|
|
99
|
+
{
|
|
100
|
+
uri: newUri,
|
|
101
|
+
kind: 'create',
|
|
102
|
+
},
|
|
103
|
+
{
|
|
104
|
+
textDocument: {
|
|
105
|
+
uri: newUri,
|
|
106
|
+
version: null,
|
|
107
|
+
},
|
|
108
|
+
edits: [
|
|
109
|
+
{
|
|
110
|
+
range: {
|
|
111
|
+
start: { line: 0, character: 0 },
|
|
112
|
+
end: { line: 0, character: 0 },
|
|
113
|
+
},
|
|
114
|
+
newText: newFileTags.join('\n'),
|
|
115
|
+
},
|
|
116
|
+
],
|
|
117
|
+
},
|
|
118
|
+
],
|
|
119
|
+
},
|
|
120
|
+
};
|
|
121
|
+
function getLastImportNode(sourceFile) {
|
|
122
|
+
let lastImportNode;
|
|
123
|
+
for (const statement of sourceFile.statements) {
|
|
124
|
+
if (ts.isImportDeclaration(statement)) {
|
|
125
|
+
lastImportNode = statement;
|
|
126
|
+
}
|
|
127
|
+
else {
|
|
128
|
+
break;
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
return lastImportNode;
|
|
132
|
+
}
|
|
133
|
+
function collectExtractProps() {
|
|
134
|
+
const result = new Map();
|
|
135
|
+
const checker = languageService.getProgram().getTypeChecker();
|
|
136
|
+
const maps = [...ctx.documents.getMapsByVirtualFileName(vueFile.mainScriptName)];
|
|
137
|
+
sourceFile.forEachChild(function visit(node) {
|
|
138
|
+
if (ts.isPropertyAccessExpression(node)
|
|
139
|
+
&& ts.isIdentifier(node.expression)
|
|
140
|
+
&& node.expression.text === '__VLS_ctx'
|
|
141
|
+
&& ts.isIdentifier(node.name)) {
|
|
142
|
+
const { name } = node;
|
|
143
|
+
for (const [_, map] of maps) {
|
|
144
|
+
const source = map.map.toSourceOffset(name.getEnd());
|
|
145
|
+
if (source && source[0] >= sfc.template.startTagEnd + templateCodeRange[0] && source[0] <= sfc.template.startTagEnd + templateCodeRange[1] && source[1].data.semanticTokens) {
|
|
146
|
+
if (!result.has(name.text)) {
|
|
147
|
+
const type = checker.getTypeAtLocation(node);
|
|
148
|
+
const typeString = checker.typeToString(type, node, ts.TypeFormatFlags.NoTruncation);
|
|
149
|
+
result.set(name.text, {
|
|
150
|
+
name: name.text,
|
|
151
|
+
type: typeString.includes('__VLS_') ? 'any' : typeString,
|
|
152
|
+
model: false,
|
|
153
|
+
});
|
|
154
|
+
}
|
|
155
|
+
const isModel = ts.isPostfixUnaryExpression(node.parent) || ts.isBinaryExpression(node.parent);
|
|
156
|
+
if (isModel) {
|
|
157
|
+
result.get(name.text).model = true;
|
|
158
|
+
}
|
|
159
|
+
break;
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
}
|
|
163
|
+
node.forEachChild(visit);
|
|
164
|
+
});
|
|
165
|
+
return [...result.values()];
|
|
166
|
+
}
|
|
167
|
+
function generateNewScriptContents() {
|
|
168
|
+
const lines = [];
|
|
169
|
+
const props = [...toExtract.values()].filter(p => !p.model);
|
|
170
|
+
const models = [...toExtract.values()].filter(p => p.model);
|
|
171
|
+
if (props.length) {
|
|
172
|
+
lines.push(`defineProps<{ \n\t${props.map(p => `${p.name}: ${p.type};`).join('\n\t')}\n}>()`);
|
|
173
|
+
}
|
|
174
|
+
for (const model of models) {
|
|
175
|
+
lines.push(`const ${model.name} = defineModel<${model.type}>('${model.name}', { required: true })`);
|
|
176
|
+
}
|
|
177
|
+
return lines.join('\n');
|
|
178
|
+
}
|
|
179
|
+
function generateReplaceTemplate() {
|
|
180
|
+
const props = [...toExtract.values()].filter(p => !p.model);
|
|
181
|
+
const models = [...toExtract.values()].filter(p => p.model);
|
|
182
|
+
return [
|
|
183
|
+
`<${newName}`,
|
|
184
|
+
...props.map(p => `:${p.name}="${p.name}"`),
|
|
185
|
+
...models.map(p => `v-model:${p.name}="${p.name}"`),
|
|
186
|
+
`/>`,
|
|
187
|
+
].join(' ');
|
|
188
|
+
}
|
|
189
|
+
},
|
|
190
|
+
transformCodeAction(item) {
|
|
191
|
+
return item; // ignore mapping
|
|
192
|
+
},
|
|
193
|
+
};
|
|
194
|
+
};
|
|
195
|
+
}
|
|
196
|
+
exports.default = default_1;
|
|
197
|
+
function selectTemplateCode(startOffset, endOffset, templateBlock, templateAst) {
|
|
198
|
+
if (startOffset < templateBlock.startTagEnd || endOffset > templateBlock.endTagStart)
|
|
199
|
+
return;
|
|
200
|
+
const insideNodes = [];
|
|
201
|
+
(0, language_core_1.walkElementNodes)(templateAst, (node) => {
|
|
202
|
+
if (node.loc.start.offset + templateBlock.startTagEnd >= startOffset
|
|
203
|
+
&& node.loc.end.offset + templateBlock.startTagEnd <= endOffset) {
|
|
204
|
+
insideNodes.push(node);
|
|
205
|
+
}
|
|
206
|
+
});
|
|
207
|
+
if (insideNodes.length) {
|
|
208
|
+
const first = insideNodes.sort((a, b) => a.loc.start.offset - b.loc.start.offset)[0];
|
|
209
|
+
const last = insideNodes.sort((a, b) => b.loc.end.offset - a.loc.end.offset)[0];
|
|
210
|
+
return [first.loc.start.offset, last.loc.end.offset];
|
|
211
|
+
}
|
|
212
|
+
}
|
|
213
|
+
function constructTag(name, attributes, initialIndent, content) {
|
|
214
|
+
if (initialIndent)
|
|
215
|
+
content = content.split('\n').map(line => `\t${line}`).join('\n');
|
|
216
|
+
const attributesString = attributes.length ? ` ${attributes.join(' ')}` : '';
|
|
217
|
+
return `<${name}${attributesString}>\n${content}\n</${name}>\n`;
|
|
218
|
+
}
|
|
219
|
+
function isInitialIndentNeeded(ts, languageKind, initialIndentSetting) {
|
|
220
|
+
const languageKindIdMap = {
|
|
221
|
+
[ts.ScriptKind.JS]: 'javascript',
|
|
222
|
+
[ts.ScriptKind.TS]: 'typescript',
|
|
223
|
+
[ts.ScriptKind.JSX]: 'javascriptreact',
|
|
224
|
+
[ts.ScriptKind.TSX]: 'typescriptreact',
|
|
225
|
+
};
|
|
226
|
+
return initialIndentSetting[languageKindIdMap[languageKind]] ?? false;
|
|
227
|
+
}
|
|
228
|
+
//# sourceMappingURL=vue-extract-file.js.map
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
const language_core_1 = require("@vue/language-core");
|
|
4
|
+
function default_1() {
|
|
5
|
+
return (ctx, modules) => {
|
|
6
|
+
if (!modules?.typescript)
|
|
7
|
+
return {};
|
|
8
|
+
const ts = modules.typescript;
|
|
9
|
+
return {
|
|
10
|
+
provideCodeActions(document, range, _context) {
|
|
11
|
+
const startOffset = document.offsetAt(range.start);
|
|
12
|
+
const endOffset = document.offsetAt(range.end);
|
|
13
|
+
const [vueFile] = ctx.documents.getVirtualFileByUri(document.uri);
|
|
14
|
+
if (!vueFile || !(vueFile instanceof language_core_1.VueFile)) {
|
|
15
|
+
return;
|
|
16
|
+
}
|
|
17
|
+
const { templateAst, template } = vueFile.sfc;
|
|
18
|
+
if (!templateAst)
|
|
19
|
+
return;
|
|
20
|
+
const templateStartOffset = template.startTagEnd;
|
|
21
|
+
const result = [];
|
|
22
|
+
(0, language_core_1.walkElementNodes)(templateAst, node => {
|
|
23
|
+
if (startOffset > templateStartOffset + node.loc.end.offset || endOffset < templateStartOffset + node.loc.start.offset) {
|
|
24
|
+
return;
|
|
25
|
+
}
|
|
26
|
+
for (const prop of node.props) {
|
|
27
|
+
if (startOffset - templateStartOffset >= prop.loc.start.offset
|
|
28
|
+
&& endOffset - templateStartOffset <= prop.loc.end.offset) {
|
|
29
|
+
if (prop.type === 7 /* NodeTypes.DIRECTIVE */ && prop.exp) {
|
|
30
|
+
const sourceFile = ts.createSourceFile('/a.ts', prop.exp.loc.source, ts.ScriptTarget.Latest, true);
|
|
31
|
+
const firstStatement = sourceFile.statements[0];
|
|
32
|
+
if (sourceFile.statements.length === 1 && ts.isExpressionStatement(firstStatement) && ts.isStringLiteralLike(firstStatement.expression)) {
|
|
33
|
+
const stringNode = sourceFile.statements[0];
|
|
34
|
+
const removeTextRanges = [
|
|
35
|
+
[prop.loc.start.offset, prop.loc.start.offset + 1],
|
|
36
|
+
// Work correctly with trivias for cases like <input :type=" 'password' " />
|
|
37
|
+
[prop.exp.loc.start.offset, prop.exp.loc.start.offset + stringNode.pos + stringNode.getLeadingTriviaWidth() + 1],
|
|
38
|
+
[prop.exp.loc.start.offset + stringNode.end - 1, prop.exp.loc.end.offset],
|
|
39
|
+
];
|
|
40
|
+
result.push({
|
|
41
|
+
title: 'Remove v-bind from attribute',
|
|
42
|
+
kind: 'refactor.rewrite.removeVBind',
|
|
43
|
+
edit: {
|
|
44
|
+
changes: {
|
|
45
|
+
[document.uri]: removeTextRanges.map(range => ({
|
|
46
|
+
newText: '',
|
|
47
|
+
range: {
|
|
48
|
+
start: document.positionAt(templateStartOffset + range[0]),
|
|
49
|
+
end: document.positionAt(templateStartOffset + range[1]),
|
|
50
|
+
}
|
|
51
|
+
}))
|
|
52
|
+
},
|
|
53
|
+
},
|
|
54
|
+
});
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
if (prop.type === 6 /* NodeTypes.ATTRIBUTE */) {
|
|
58
|
+
const edits = [];
|
|
59
|
+
const addVBindPos = document.positionAt(templateStartOffset + prop.loc.start.offset);
|
|
60
|
+
edits.push({
|
|
61
|
+
newText: ':',
|
|
62
|
+
range: {
|
|
63
|
+
start: addVBindPos,
|
|
64
|
+
end: addVBindPos,
|
|
65
|
+
},
|
|
66
|
+
});
|
|
67
|
+
let newPosition;
|
|
68
|
+
if (prop.value) {
|
|
69
|
+
const valueStart = document.positionAt(templateStartOffset + prop.value.loc.start.offset);
|
|
70
|
+
const valueEnd = document.positionAt(templateStartOffset + prop.value.loc.end.offset);
|
|
71
|
+
if (prop.value.loc.end.offset - prop.value.loc.start.offset !== prop.value.content.length) {
|
|
72
|
+
valueStart.character++;
|
|
73
|
+
valueEnd.character--;
|
|
74
|
+
}
|
|
75
|
+
edits.push({
|
|
76
|
+
newText: "'",
|
|
77
|
+
range: {
|
|
78
|
+
start: valueStart,
|
|
79
|
+
end: valueStart,
|
|
80
|
+
},
|
|
81
|
+
});
|
|
82
|
+
edits.push({
|
|
83
|
+
newText: "'",
|
|
84
|
+
range: {
|
|
85
|
+
start: valueEnd,
|
|
86
|
+
end: valueEnd,
|
|
87
|
+
},
|
|
88
|
+
});
|
|
89
|
+
}
|
|
90
|
+
else {
|
|
91
|
+
const addValuePos = document.positionAt(templateStartOffset + prop.loc.end.offset);
|
|
92
|
+
newPosition = {
|
|
93
|
+
line: addValuePos.line,
|
|
94
|
+
character: addValuePos.character + ':'.length + '="'.length,
|
|
95
|
+
};
|
|
96
|
+
edits.push({
|
|
97
|
+
newText: '=""',
|
|
98
|
+
range: {
|
|
99
|
+
start: addValuePos,
|
|
100
|
+
end: addValuePos
|
|
101
|
+
},
|
|
102
|
+
});
|
|
103
|
+
}
|
|
104
|
+
result.push({
|
|
105
|
+
title: 'Add v-bind to attribute',
|
|
106
|
+
kind: 'refactor.rewrite.addVBind',
|
|
107
|
+
edit: {
|
|
108
|
+
changes: { [document.uri]: edits },
|
|
109
|
+
},
|
|
110
|
+
command: newPosition ? ctx?.commands.setSelection.create(newPosition) : undefined,
|
|
111
|
+
});
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
});
|
|
116
|
+
return result;
|
|
117
|
+
},
|
|
118
|
+
transformCodeAction(item) {
|
|
119
|
+
return item; // ignore mapping
|
|
120
|
+
},
|
|
121
|
+
};
|
|
122
|
+
};
|
|
123
|
+
}
|
|
124
|
+
exports.default = default_1;
|
|
125
|
+
//# sourceMappingURL=vue-toggle-v-bind-codeaction.js.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vue/language-service",
|
|
3
|
-
"version": "1.8.
|
|
3
|
+
"version": "1.8.6",
|
|
4
4
|
"main": "out/index.js",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"files": [
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
"@volar/language-service": "~1.9.0",
|
|
22
22
|
"@volar/typescript": "~1.9.0",
|
|
23
23
|
"@vue/compiler-dom": "^3.3.0",
|
|
24
|
-
"@vue/language-core": "1.8.
|
|
24
|
+
"@vue/language-core": "1.8.6",
|
|
25
25
|
"@vue/reactivity": "^3.3.0",
|
|
26
26
|
"@vue/shared": "^3.3.0",
|
|
27
27
|
"volar-service-css": "0.0.10",
|
|
@@ -40,5 +40,5 @@
|
|
|
40
40
|
"vscode-languageserver-protocol": "^3.17.3",
|
|
41
41
|
"vscode-uri": "^3.0.7"
|
|
42
42
|
},
|
|
43
|
-
"gitHead": "
|
|
43
|
+
"gitHead": "9da8afee02bc7251ae97716480ba31f8aff2794a"
|
|
44
44
|
}
|