@vue/language-service 3.0.0-beta.5 → 3.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/data/language-blocks/ko.json +19 -19
- package/data/model-modifiers/ko.json +3 -3
- package/data/template/ko.json +34 -26
- package/lib/types.d.ts +13 -0
- package/lib/types.js +34 -0
- package/package.json +7 -7
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
"name": "src",
|
|
9
9
|
"description": {
|
|
10
10
|
"kind": "markdown",
|
|
11
|
-
"value": "`*.vue` 컴포넌트를 여러 파일로
|
|
11
|
+
"value": "`*.vue` 컴포넌트를 여러 파일로 분리하고 싶다면, `src` 속성을 사용하여 언어 블록에 외부 파일을 임포트할 수 있습니다:\n\n```vue\n<template src=\"./template.html\"></template>\n<style src=\"./style.css\"></style>\n<script src=\"./script.js\"></script>\n```\n\n`src` 임포트는 webpack 모듈 요청과 동일한 경로 해상 규칙을 따르므로 주의하세요:\n\n- 상대 경로는 `./`로 시작해야 합니다.\n- npm 의존성에서 리소스를 임포트할 수 있습니다:\n\n```vue\n<!-- 설치된 \"todomvc-app-css\" npm 패키지에서 파일 임포트 -->\n<style src=\"todomvc-app-css/index.css\" />\n```\n\n`src` 임포트는 커스텀 블록에도 사용할 수 있습니다. 예:\n\n```vue\n<unit-test src=\"./unit-test.js\">\n</unit-test>\n```\n\n:::warning 참고\n`src`에서 별칭을 사용할 때는 `~`로 시작하지 마세요. 그 뒤의 모든 것은 모듈 요청으로 해석됩니다. 즉, node 모듈 내부의 에셋을 참조할 수 있습니다:\n```vue\n<img src=\"~some-npm-package/foo.png\">\n```\n:::"
|
|
12
12
|
},
|
|
13
13
|
"references": "api/sfc-spec.html#src-imports"
|
|
14
14
|
},
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"name": "lang",
|
|
17
17
|
"description": {
|
|
18
18
|
"kind": "markdown",
|
|
19
|
-
"value": "블록은 `lang` 속성을 사용하여
|
|
19
|
+
"value": "블록은 `lang` 속성을 사용하여 프리프로세서 언어를 선언할 수 있습니다. 가장 일반적인 예는 `<script>` 블록에서 TypeScript를 사용하는 경우입니다:\n\n```html\n<script lang=\"ts\">\n // TypeScript 사용\n</script>\n```\n\n`lang`는 모든 블록에 적용할 수 있습니다. 예를 들어, [Sass](https://sass-lang.com/)를 사용하는 `<style>`과 [Pug](https://pugjs.org/api/getting-started.html)를 사용하는 `<template>`을 사용할 수 있습니다:\n\n```html\n<template lang=\"pug\">\np {{ msg }}\n</template>\n\n<style lang=\"scss\">\n $primary-color: #333;\n body {\n color: $primary-color;\n }\n</style>\n```\n\n다양한 프리프로세서와의 통합은 도구 체인에 따라 다를 수 있습니다. 예시는 각 문서를 참고하세요:\n\n- [Vite](https://vitejs.dev/guide/features.html#css-pre-processors)\n- [Vue CLI](https://cli.vuejs.org/guide/css.html#pre-processors)\n- [webpack + vue-loader](https://vue-loader.vuejs.org/guide/pre-processors.html#using-pre-processors)"
|
|
20
20
|
},
|
|
21
21
|
"values": [
|
|
22
22
|
{
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
],
|
|
32
32
|
"description": {
|
|
33
33
|
"kind": "markdown",
|
|
34
|
-
"value": "\n- 각 `*.vue`
|
|
34
|
+
"value": "\n- 각 `*.vue` 파일에는 최상위 `<template>` 블록이 최대 한 개만 포함될 수 있습니다.\n\n- 내용은 추출되어 `@vue/compiler-dom`에 전달되고, JavaScript 렌더 함수로 사전 컴파일되어 내보내는 컴포넌트의 `render` 옵션에 연결됩니다.\n"
|
|
35
35
|
},
|
|
36
36
|
"references": "api/sfc-spec.html#template"
|
|
37
37
|
},
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
"name": "src",
|
|
43
43
|
"description": {
|
|
44
44
|
"kind": "markdown",
|
|
45
|
-
"value": "`*.vue` 컴포넌트를 여러 파일로
|
|
45
|
+
"value": "`*.vue` 컴포넌트를 여러 파일로 분리하고 싶다면, `src` 속성을 사용하여 언어 블록에 외부 파일을 임포트할 수 있습니다:\n\n```vue\n<template src=\"./template.html\"></template>\n<style src=\"./style.css\"></style>\n<script src=\"./script.js\"></script>\n```\n\n`src` 임포트는 webpack 모듈 요청과 동일한 경로 해상 규칙을 따르므로 주의하세요:\n\n- 상대 경로는 `./`로 시작해야 합니다.\n- npm 의존성에서 리소스를 임포트할 수 있습니다:\n\n```vue\n<!-- 설치된 \"todomvc-app-css\" npm 패키지에서 파일 임포트 -->\n<style src=\"todomvc-app-css/index.css\" />\n```\n\n`src` 임포트는 커스텀 블록에도 사용할 수 있습니다. 예:\n\n```vue\n<unit-test src=\"./unit-test.js\">\n</unit-test>\n```\n\n:::warning 참고\n`src`에서 별칭을 사용할 때는 `~`로 시작하지 마세요. 그 뒤의 모든 것은 모듈 요청으로 해석됩니다. 즉, node 모듈 내부의 에셋을 참조할 수 있습니다:\n```vue\n<img src=\"~some-npm-package/foo.png\">\n```\n:::"
|
|
46
46
|
},
|
|
47
47
|
"references": "api/sfc-spec.html#src-imports"
|
|
48
48
|
},
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
"name": "lang",
|
|
51
51
|
"description": {
|
|
52
52
|
"kind": "markdown",
|
|
53
|
-
"value": "블록은 `lang` 속성을 사용하여
|
|
53
|
+
"value": "블록은 `lang` 속성을 사용하여 프리프로세서 언어를 선언할 수 있습니다. 가장 일반적인 예는 `<script>` 블록에서 TypeScript를 사용하는 경우입니다:\n\n```html\n<script lang=\"ts\">\n // TypeScript 사용\n</script>\n```\n\n`lang`는 모든 블록에 적용할 수 있습니다. 예를 들어, [Sass](https://sass-lang.com/)를 사용하는 `<style>`과 [Pug](https://pugjs.org/api/getting-started.html)를 사용하는 `<template>`을 사용할 수 있습니다:\n\n```html\n<template lang=\"pug\">\np {{ msg }}\n</template>\n\n<style lang=\"scss\">\n $primary-color: #333;\n body {\n color: $primary-color;\n }\n</style>\n```\n\n다양한 프리프로세서와의 통합은 도구 체인에 따라 다를 수 있습니다. 예시는 각 문서를 참고하세요:\n\n- [Vite](https://vitejs.dev/guide/features.html#css-pre-processors)\n- [Vue CLI](https://cli.vuejs.org/guide/css.html#pre-processors)\n- [webpack + vue-loader](https://vue-loader.vuejs.org/guide/pre-processors.html#using-pre-processors)"
|
|
54
54
|
},
|
|
55
55
|
"values": [
|
|
56
56
|
{
|
|
@@ -76,14 +76,14 @@
|
|
|
76
76
|
"valueSet": "v",
|
|
77
77
|
"description": {
|
|
78
78
|
"kind": "markdown",
|
|
79
|
-
"value": "\n- 각 `*.vue`
|
|
79
|
+
"value": "\n- 각 `*.vue` 파일에는 `<script setup>` 블록이 최대 한 개만 포함될 수 있습니다(일반 `<script>`는 제외).\n\n- 이 스크립트는 사전 처리되어 컴포넌트의 `setup()` 함수로 사용되며, 즉 **컴포넌트의 각 인스턴스마다 실행**됩니다. `<script setup>`의 최상위 바인딩은 템플릿에 자동으로 노출됩니다. 자세한 내용은 [`<script setup>` 전용 문서](https://ko.vuejs.org/api/sfc-script-setup.html)를 참고하세요.\n"
|
|
80
80
|
},
|
|
81
81
|
"references": "api/sfc-spec.html#script-setup"
|
|
82
82
|
}
|
|
83
83
|
],
|
|
84
84
|
"description": {
|
|
85
85
|
"kind": "markdown",
|
|
86
|
-
"value": "\n- 각 `*.vue`
|
|
86
|
+
"value": "\n- 각 `*.vue` 파일에는 `<script>` 블록이 최대 한 개만 포함될 수 있습니다([`<script setup>`](https://ko.vuejs.org/api/sfc-script-setup.html)은 제외).\n\n- 스크립트는 ES 모듈로 실행됩니다.\n\n- **기본 내보내기(default export)**는 Vue 컴포넌트 옵션 객체여야 하며, 일반 객체이거나 [defineComponent](https://ko.vuejs.org/api/general.html#definecomponent)의 반환값일 수 있습니다.\n"
|
|
87
87
|
},
|
|
88
88
|
"references": "api/sfc-spec.html#script"
|
|
89
89
|
},
|
|
@@ -92,7 +92,7 @@
|
|
|
92
92
|
"attributes": [],
|
|
93
93
|
"description": {
|
|
94
94
|
"kind": "markdown",
|
|
95
|
-
"value": "\n- 각 `*.vue`
|
|
95
|
+
"value": "\n- 각 `*.vue` 파일에는 `<script setup>` 블록이 최대 한 개만 포함될 수 있습니다(일반 `<script>`는 제외).\n\n- 이 스크립트는 사전 처리되어 컴포넌트의 `setup()` 함수로 사용되며, 즉 **컴포넌트의 각 인스턴스마다 실행**됩니다. `<script setup>`의 최상위 바인딩은 템플릿에 자동으로 노출됩니다. 자세한 내용은 [`<script setup>` 전용 문서](https://ko.vuejs.org/api/sfc-script-setup.html)를 참고하세요.\n"
|
|
96
96
|
},
|
|
97
97
|
"references": "api/sfc-spec.html#script-setup"
|
|
98
98
|
},
|
|
@@ -103,7 +103,7 @@
|
|
|
103
103
|
"name": "src",
|
|
104
104
|
"description": {
|
|
105
105
|
"kind": "markdown",
|
|
106
|
-
"value": "`*.vue` 컴포넌트를 여러 파일로
|
|
106
|
+
"value": "`*.vue` 컴포넌트를 여러 파일로 분리하고 싶다면, `src` 속성을 사용하여 언어 블록에 외부 파일을 임포트할 수 있습니다:\n\n```vue\n<template src=\"./template.html\"></template>\n<style src=\"./style.css\"></style>\n<script src=\"./script.js\"></script>\n```\n\n`src` 임포트는 webpack 모듈 요청과 동일한 경로 해상 규칙을 따르므로 주의하세요:\n\n- 상대 경로는 `./`로 시작해야 합니다.\n- npm 의존성에서 리소스를 임포트할 수 있습니다:\n\n```vue\n<!-- 설치된 \"todomvc-app-css\" npm 패키지에서 파일 임포트 -->\n<style src=\"todomvc-app-css/index.css\" />\n```\n\n`src` 임포트는 커스텀 블록에도 사용할 수 있습니다. 예:\n\n```vue\n<unit-test src=\"./unit-test.js\">\n</unit-test>\n```\n\n:::warning 참고\n`src`에서 별칭을 사용할 때는 `~`로 시작하지 마세요. 그 뒤의 모든 것은 모듈 요청으로 해석됩니다. 즉, node 모듈 내부의 에셋을 참조할 수 있습니다:\n```vue\n<img src=\"~some-npm-package/foo.png\">\n```\n:::"
|
|
107
107
|
},
|
|
108
108
|
"references": "api/sfc-spec.html#src-imports"
|
|
109
109
|
},
|
|
@@ -111,7 +111,7 @@
|
|
|
111
111
|
"name": "lang",
|
|
112
112
|
"description": {
|
|
113
113
|
"kind": "markdown",
|
|
114
|
-
"value": "블록은 `lang` 속성을 사용하여
|
|
114
|
+
"value": "블록은 `lang` 속성을 사용하여 프리프로세서 언어를 선언할 수 있습니다. 가장 일반적인 예는 `<script>` 블록에서 TypeScript를 사용하는 경우입니다:\n\n```html\n<script lang=\"ts\">\n // TypeScript 사용\n</script>\n```\n\n`lang`는 모든 블록에 적용할 수 있습니다. 예를 들어, [Sass](https://sass-lang.com/)를 사용하는 `<style>`과 [Pug](https://pugjs.org/api/getting-started.html)를 사용하는 `<template>`을 사용할 수 있습니다:\n\n```html\n<template lang=\"pug\">\np {{ msg }}\n</template>\n\n<style lang=\"scss\">\n $primary-color: #333;\n body {\n color: $primary-color;\n }\n</style>\n```\n\n다양한 프리프로세서와의 통합은 도구 체인에 따라 다를 수 있습니다. 예시는 각 문서를 참고하세요:\n\n- [Vite](https://vitejs.dev/guide/features.html#css-pre-processors)\n- [Vue CLI](https://cli.vuejs.org/guide/css.html#pre-processors)\n- [webpack + vue-loader](https://vue-loader.vuejs.org/guide/pre-processors.html#using-pre-processors)"
|
|
115
115
|
},
|
|
116
116
|
"values": [
|
|
117
117
|
{
|
|
@@ -140,7 +140,7 @@
|
|
|
140
140
|
"valueSet": "v",
|
|
141
141
|
"description": {
|
|
142
142
|
"kind": "markdown",
|
|
143
|
-
"value": "`<style>` 태그에 `scoped` 속성이 있으면, 해당 CSS는 현재 컴포넌트의
|
|
143
|
+
"value": "`<style>` 태그에 `scoped` 속성이 있으면, 해당 CSS는 현재 컴포넌트의 요소에만 적용됩니다. 이는 Shadow DOM에서 볼 수 있는 스타일 캡슐화와 유사합니다. 몇 가지 주의사항이 있지만, 별도의 폴리필이 필요하지 않습니다. PostCSS를 사용하여 다음과 같이 변환함으로써 구현됩니다:\n\n```vue\n<style scoped>\n.example {\n color: red;\n}\n</style>\n\n<template>\n <div class=\"example\">hi</div>\n</template>\n```\n\n다음과 같이 변환됩니다:\n\n```vue\n<style>\n.example[data-v-f3f3eg9] {\n color: red;\n}\n</style>\n\n<template>\n <div class=\"example\" data-v-f3f3eg9>hi</div>\n</template>\n```\n\n### 자식 컴포넌트 루트 요소 \n\n`scoped`를 사용하면, 부모 컴포넌트의 스타일이 자식 컴포넌트로 누출되지 않습니다. 하지만, 자식 컴포넌트의 루트 노드는 부모의 scoped CSS와 자식의 scoped CSS 모두의 영향을 받습니다. 이는 부모가 레이아웃 목적으로 자식의 루트 요소를 스타일링할 수 있도록 의도된 동작입니다.\n\n### 딥 셀렉터 \n\n`scoped` 스타일에서 셀렉터가 \"딥\"하게, 즉 자식 컴포넌트에까지 영향을 미치게 하려면 `:deep()` 의사 클래스(pseudo-class)를 사용할 수 있습니다:\n\n```vue\n<style scoped>\n.a :deep(.b) {\n /* ... */\n}\n</style>\n```\n\n위 코드는 다음과 같이 컴파일됩니다:\n\n```css\n.a[data-v-f3f3eg9] .b {\n /* ... */\n}\n```\n\n:::tip\n`v-html`로 생성된 DOM 콘텐츠는 scoped 스타일의 영향을 받지 않지만, 딥 셀렉터를 사용하여 여전히 스타일링할 수 있습니다.\n:::\n\n### 슬롯 셀렉터 \n\n기본적으로, scoped 스타일은 `<slot/>`으로 렌더링된 콘텐츠에 영향을 주지 않습니다. 이는 해당 콘텐츠가 전달한 부모 컴포넌트의 소유로 간주되기 때문입니다. 슬롯 콘텐츠를 명시적으로 타겟팅하려면 `:slotted` 의사 클래스를 사용하세요:\n\n```vue\n<style scoped>\n:slotted(div) {\n color: red;\n}\n</style>\n```\n\n### 글로벌 셀렉터 \n\n단일 규칙만 전역적으로 적용하고 싶다면, 별도의 `<style>`을 만들지 않고 `:global` 의사 클래스를 사용할 수 있습니다(아래 참고):\n\n```vue\n<style scoped>\n:global(.red) {\n color: red;\n}\n</style>\n```\n\n### 로컬 및 글로벌 스타일 혼합 \n\n동일한 컴포넌트 내에서 scoped 스타일과 non-scoped 스타일을 모두 포함할 수도 있습니다:\n\n```vue\n<style>\n/* 글로벌 스타일 */\n</style>\n\n<style scoped>\n/* 로컬 스타일 */\n</style>\n```\n\n### Scoped 스타일 팁 \n\n- **Scoped 스타일이 클래스의 필요성을 없애지는 않습니다.** 브라우저가 다양한 CSS 셀렉터를 렌더링하는 방식 때문에, `p { color: red }`와 같은 셀렉터는 scoped(즉, 속성 셀렉터와 결합될 때)일 때 훨씬 느려집니다. 대신 `.example { color: red }`와 같이 클래스나 id를 사용하면 성능 저하를 사실상 없앨 수 있습니다.\n\n- **재귀 컴포넌트에서 자손 셀렉터를 사용할 때 주의하세요!** `.a .b`와 같은 셀렉터가 있는 CSS 규칙에서, `.a`에 해당하는 요소가 재귀 자식 컴포넌트를 포함하면, 해당 자식 컴포넌트 내의 모든 `.b`가 이 규칙에 의해 매칭됩니다."
|
|
144
144
|
},
|
|
145
145
|
"references": "api/sfc-css-features.html#scoped-css"
|
|
146
146
|
},
|
|
@@ -149,34 +149,34 @@
|
|
|
149
149
|
"valueSet": "v",
|
|
150
150
|
"description": {
|
|
151
151
|
"kind": "markdown",
|
|
152
|
-
"value": "`<style module>` 태그는 [CSS
|
|
152
|
+
"value": "`<style module>` 태그는 [CSS Modules](https://github.com/css-modules/css-modules)로 컴파일되며, 결과 CSS 클래스가 `$style` 키 아래의 객체로 컴포넌트에 노출됩니다:\n\n```vue\n<template>\n <p :class=\"$style.red\">This should be red</p>\n</template>\n\n<style module>\n.red {\n color: red;\n}\n</style>\n```\n\n결과 클래스는 충돌을 방지하기 위해 해시 처리되어, CSS가 현재 컴포넌트에만 적용되는 것과 동일한 효과를 얻습니다.\n\n[CSS Modules 명세](https://github.com/css-modules/css-modules)에서 [글로벌 예외](https://github.com/css-modules/css-modules/blob/master/docs/composition.md#exceptions) 및 [컴포지션](https://github.com/css-modules/css-modules/blob/master/docs/composition.md#composition) 등 자세한 내용을 참고하세요.\n\n### 커스텀 주입 이름 \n\n`module` 속성에 값을 지정하여 주입된 클래스 객체의 프로퍼티 키를 커스터마이즈할 수 있습니다:\n\n```vue\n<template>\n <p :class=\"classes.red\">red</p>\n</template>\n\n<style module=\"classes\">\n.red {\n color: red;\n}\n</style>\n```\n\n### Composition API와 함께 사용하기 \n\n주입된 클래스는 `setup()` 및 `<script setup>`에서 `useCssModule` API를 통해 접근할 수 있습니다. 커스텀 주입 이름이 있는 `<style module>` 블록의 경우, `useCssModule`의 첫 번째 인자로 일치하는 `module` 속성 값을 전달합니다:\n\n```js\nimport { useCssModule } from 'vue'\n\n// setup() 범위 내에서...\n// 기본값, <style module>의 클래스를 반환\nuseCssModule()\n\n// 이름 지정, <style module=\"classes\">의 클래스를 반환\nuseCssModule('classes')\n```\n\n- **예시**\n\n```vue\n<script setup lang=\"ts\">\nimport { useCssModule } from 'vue'\n\nconst classes = useCssModule()\n</script>\n\n<template>\n <p :class=\"classes.red\">red</p>\n</template>\n\n<style module>\n.red {\n color: red;\n}\n</style>\n```"
|
|
153
153
|
},
|
|
154
154
|
"references": "api/sfc-css-features.html#css-modules"
|
|
155
155
|
}
|
|
156
156
|
],
|
|
157
157
|
"description": {
|
|
158
158
|
"kind": "markdown",
|
|
159
|
-
"value": "\n- `*.vue` 파일에는 여러 `<style>`
|
|
159
|
+
"value": "\n- 하나의 `*.vue` 파일에는 여러 개의 `<style>` 태그를 포함할 수 있습니다.\n\n- `<style>` 태그는 `scoped` 또는 `module` 속성(자세한 내용은 [SFC 스타일 기능](https://ko.vuejs.org/api/sfc-css-features.html) 참고)을 가질 수 있어, 스타일을 현재 컴포넌트에 캡슐화하는 데 도움이 됩니다. 서로 다른 캡슐화 모드를 가진 여러 `<style>` 태그를 하나의 컴포넌트에 혼합할 수 있습니다.\n"
|
|
160
160
|
},
|
|
161
161
|
"references": "api/sfc-spec.html#style"
|
|
162
162
|
},
|
|
163
163
|
{
|
|
164
|
-
"name": "커스텀
|
|
164
|
+
"name": "커스텀 블록",
|
|
165
165
|
"attributes": [
|
|
166
166
|
{
|
|
167
167
|
"name": "src",
|
|
168
168
|
"description": {
|
|
169
169
|
"kind": "markdown",
|
|
170
|
-
"value": "`*.vue` 컴포넌트를 여러 파일로
|
|
170
|
+
"value": "`*.vue` 컴포넌트를 여러 파일로 분리하고 싶다면, `src` 속성을 사용하여 언어 블록에 외부 파일을 임포트할 수 있습니다:\n\n```vue\n<template src=\"./template.html\"></template>\n<style src=\"./style.css\"></style>\n<script src=\"./script.js\"></script>\n```\n\n`src` 임포트는 webpack 모듈 요청과 동일한 경로 해상 규칙을 따르므로 주의하세요:\n\n- 상대 경로는 `./`로 시작해야 합니다.\n- npm 의존성에서 리소스를 임포트할 수 있습니다:\n\n```vue\n<!-- 설치된 \"todomvc-app-css\" npm 패키지에서 파일 임포트 -->\n<style src=\"todomvc-app-css/index.css\" />\n```\n\n`src` 임포트는 커스텀 블록에도 사용할 수 있습니다. 예:\n\n```vue\n<unit-test src=\"./unit-test.js\">\n</unit-test>\n```\n\n:::warning 참고\n`src`에서 별칭을 사용할 때는 `~`로 시작하지 마세요. 그 뒤의 모든 것은 모듈 요청으로 해석됩니다. 즉, node 모듈 내부의 에셋을 참조할 수 있습니다:\n```vue\n<img src=\"~some-npm-package/foo.png\">\n```\n:::"
|
|
171
171
|
},
|
|
172
172
|
"references": "api/sfc-spec.html#src-imports"
|
|
173
173
|
}
|
|
174
174
|
],
|
|
175
175
|
"description": {
|
|
176
176
|
"kind": "markdown",
|
|
177
|
-
"value": "\n프로젝트별
|
|
177
|
+
"value": "\n프로젝트별 필요에 따라 추가적인 커스텀 블록을 `*.vue` 파일에 포함할 수 있습니다. 예를 들어 `<docs>` 블록이 있습니다. 실제 커스텀 블록의 예시는 다음과 같습니다:\n\n- [Gridsome: `<page-query>`](https://gridsome.org/docs/querying-data/)\n- [vite-plugin-vue-gql: `<gql>`](https://github.com/wheatjs/vite-plugin-vue-gql)\n- [vue-i18n: `<i18n>`](https://github.com/intlify/bundle-tools/tree/main/packages/unplugin-vue-i18n#i18n-custom-block)\n\n커스텀 블록의 처리는 도구에 따라 달라집니다. 커스텀 블록 통합을 직접 구축하고 싶다면 [SFC 커스텀 블록 통합 도구 섹션](https://ko.vuejs.org/guide/scaling-up/tooling.html#sfc-custom-block-integrations)을 참고하세요.\n"
|
|
178
178
|
},
|
|
179
|
-
"references": "api/sfc-spec.html
|
|
179
|
+
"references": "api/sfc-spec.html#커스텀-블록"
|
|
180
180
|
}
|
|
181
181
|
],
|
|
182
182
|
"globalAttributes": [
|
|
@@ -184,7 +184,7 @@
|
|
|
184
184
|
"name": "lang",
|
|
185
185
|
"description": {
|
|
186
186
|
"kind": "markdown",
|
|
187
|
-
"value": "블록은 `lang` 속성을 사용하여
|
|
187
|
+
"value": "블록은 `lang` 속성을 사용하여 프리프로세서 언어를 선언할 수 있습니다. 가장 일반적인 예는 `<script>` 블록에서 TypeScript를 사용하는 경우입니다:\n\n```html\n<script lang=\"ts\">\n // TypeScript 사용\n</script>\n```\n\n`lang`는 모든 블록에 적용할 수 있습니다. 예를 들어, [Sass](https://sass-lang.com/)를 사용하는 `<style>`과 [Pug](https://pugjs.org/api/getting-started.html)를 사용하는 `<template>`을 사용할 수 있습니다:\n\n```html\n<template lang=\"pug\">\np {{ msg }}\n</template>\n\n<style lang=\"scss\">\n $primary-color: #333;\n body {\n color: $primary-color;\n }\n</style>\n```\n\n다양한 프리프로세서와의 통합은 도구 체인에 따라 다를 수 있습니다. 예시는 각 문서를 참고하세요:\n\n- [Vite](https://vitejs.dev/guide/features.html#css-pre-processors)\n- [Vue CLI](https://cli.vuejs.org/guide/css.html#pre-processors)\n- [webpack + vue-loader](https://vue-loader.vuejs.org/guide/pre-processors.html#using-pre-processors)"
|
|
188
188
|
},
|
|
189
189
|
"values": [],
|
|
190
190
|
"references": "api/sfc-spec.html#pre-processors"
|
|
@@ -193,7 +193,7 @@
|
|
|
193
193
|
"name": "src",
|
|
194
194
|
"description": {
|
|
195
195
|
"kind": "markdown",
|
|
196
|
-
"value": "`*.vue` 컴포넌트를 여러 파일로
|
|
196
|
+
"value": "`*.vue` 컴포넌트를 여러 파일로 분리하고 싶다면, `src` 속성을 사용하여 언어 블록에 외부 파일을 임포트할 수 있습니다:\n\n```vue\n<template src=\"./template.html\"></template>\n<style src=\"./style.css\"></style>\n<script src=\"./script.js\"></script>\n```\n\n`src` 임포트는 webpack 모듈 요청과 동일한 경로 해상 규칙을 따르므로 주의하세요:\n\n- 상대 경로는 `./`로 시작해야 합니다.\n- npm 의존성에서 리소스를 임포트할 수 있습니다:\n\n```vue\n<!-- 설치된 \"todomvc-app-css\" npm 패키지에서 파일 임포트 -->\n<style src=\"todomvc-app-css/index.css\" />\n```\n\n`src` 임포트는 커스텀 블록에도 사용할 수 있습니다. 예:\n\n```vue\n<unit-test src=\"./unit-test.js\">\n</unit-test>\n```\n\n:::warning 참고\n`src`에서 별칭을 사용할 때는 `~`로 시작하지 마세요. 그 뒤의 모든 것은 모듈 요청으로 해석됩니다. 즉, node 모듈 내부의 에셋을 참조할 수 있습니다:\n```vue\n<img src=\"~some-npm-package/foo.png\">\n```\n:::"
|
|
197
197
|
},
|
|
198
198
|
"references": "api/sfc-spec.html#src-imports"
|
|
199
199
|
}
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
"name": "lazy",
|
|
6
6
|
"description": {
|
|
7
7
|
"kind": "markdown",
|
|
8
|
-
"value": "
|
|
8
|
+
"value": "기본적으로, `v-model`은 각 `input` 이벤트 후에 입력과 데이터를 동기화합니다([위에서 언급한 IME 조합 제외](#vmodel-ime-tip)). 대신 `change` 이벤트 후에 동기화하려면 `lazy` 수식어를 추가할 수 있습니다:\n\n```html\n<!-- \"input\" 대신 \"change\" 후에 동기화됨 -->\n<input v-model.lazy=\"msg\" />\n```"
|
|
9
9
|
},
|
|
10
10
|
"references": "guide/essentials/forms.html#lazy"
|
|
11
11
|
},
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
"name": "number",
|
|
14
14
|
"description": {
|
|
15
15
|
"kind": "markdown",
|
|
16
|
-
"value": "사용자
|
|
16
|
+
"value": "사용자 입력을 자동으로 숫자 타입으로 변환하려면, `v-model`이 적용된 입력에 `number` 수식어를 추가할 수 있습니다:\n\n```html\n<input v-model.number=\"age\" />\n```\n\n값이 `parseFloat()`로 파싱될 수 없으면, 원래(문자열) 값이 대신 사용됩니다. 특히 입력이 비어 있으면(예: 사용자가 입력 필드를 지운 경우), 빈 문자열이 반환됩니다. 이 동작은 [DOM 속성 `valueAsNumber`](https://developer.mozilla.org/ko/docs/Web/API/HTMLInputElement#valueasnumber)와 다릅니다.\n\n입력에 `type=\"number\"`가 있으면 `number` 수식어가 자동으로 적용됩니다."
|
|
17
17
|
},
|
|
18
18
|
"references": "guide/essentials/forms.html#number"
|
|
19
19
|
},
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
"name": "trim",
|
|
22
22
|
"description": {
|
|
23
23
|
"kind": "markdown",
|
|
24
|
-
"value": "사용자 입력의
|
|
24
|
+
"value": "사용자 입력의 공백을 자동으로 제거하려면, `v-model`이 적용된 입력에 `trim` 수식어를 추가할 수 있습니다:\n\n```html\n<input v-model.trim=\"msg\" />\n```"
|
|
25
25
|
},
|
|
26
26
|
"references": "guide/essentials/forms.html#trim"
|
|
27
27
|
}
|
package/data/template/ko.json
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
"name": "Transition",
|
|
6
6
|
"description": {
|
|
7
7
|
"kind": "markdown",
|
|
8
|
-
"value": "\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 * 기본 동작은 루트 전환 요소에서 첫 번째 `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 * 전환 클래스를 커스터마이즈하기 위한 props입니다.\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 동적 컴포넌트, 전환 모드 + appear 시 애니메이션:\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": "api/built-in-components.html#transition"
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
"name": "TransitionGroup",
|
|
15
15
|
"description": {
|
|
16
16
|
"kind": "markdown",
|
|
17
|
-
"value": "\n
|
|
17
|
+
"value": "\n목록 내 **여러** 요소 또는 컴포넌트에 전환 효과를 제공합니다.\n\n- **Props**\n\n `<TransitionGroup>`은 `mode`를 제외한 `<Transition>`과 동일한 props를 받으며, 두 가지 추가 props가 있습니다:\n\n ```ts\n interface TransitionGroupProps extends Omit<TransitionProps, 'mode'> {\n /**\n * 정의하지 않으면 fragment로 렌더링됩니다.\n */\n tag?: string\n /**\n * 이동 전환 중 적용되는 CSS 클래스를 커스터마이즈합니다.\n * 템플릿에서는 케밥 케이스를 사용하세요. 예: 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://ko.vuejs.org/guide/essentials/list.html#maintaining-state-with-key)가 있어야 합니다.\n\n `<TransitionGroup>`은 CSS transform을 통한 이동 전환을 지원합니다. 업데이트 후 자식의 화면 위치가 변경되면, 이동 CSS 클래스( `name` 속성에서 자동 생성되거나 `move-class` prop으로 지정됨)가 적용됩니다. 이동 클래스가 적용될 때 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://ko.vuejs.org/guide/built-ins/transition-group.html)\n"
|
|
18
18
|
},
|
|
19
19
|
"attributes": [],
|
|
20
20
|
"references": "api/built-in-components.html#transitiongroup"
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
"name": "KeepAlive",
|
|
24
24
|
"description": {
|
|
25
25
|
"kind": "markdown",
|
|
26
|
-
"value": "\n내부에
|
|
26
|
+
"value": "\n내부에 감싼 동적으로 토글되는 컴포넌트를 캐시합니다.\n\n- **Props**\n\n ```ts\n interface KeepAliveProps {\n /**\n * 지정하면, `include`에 일치하는 이름의\n * 컴포넌트만 캐시됩니다.\n */\n include?: MatchPattern\n /**\n * `exclude`에 일치하는 이름의\n * 컴포넌트는 캐시되지 않습니다.\n */\n exclude?: MatchPattern\n /**\n * 캐시할 컴포넌트 인스턴스의 최대 개수입니다.\n */\n max?: number | string\n }\n\n type MatchPattern = string | RegExp | (string | RegExp)[]\n ```\n\n- **상세 설명**\n\n 동적 컴포넌트를 감쌀 때, `<KeepAlive>`는 비활성 컴포넌트 인스턴스를 파괴하지 않고 캐시합니다.\n\n 한 번에 `<KeepAlive>`의 직접 자식으로는 하나의 활성 컴포넌트 인스턴스만 존재할 수 있습니다.\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://ko.vuejs.org/guide/built-ins/keep-alive.html)\n"
|
|
27
27
|
},
|
|
28
28
|
"attributes": [],
|
|
29
29
|
"references": "api/built-in-components.html#keepalive"
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
"name": "Teleport",
|
|
33
33
|
"description": {
|
|
34
34
|
"kind": "markdown",
|
|
35
|
-
"value": "\n슬롯
|
|
35
|
+
"value": "\n슬롯 콘텐츠를 DOM의 다른 위치에 렌더링합니다.\n\n- **Props**\n\n ```ts\n interface TeleportProps {\n /**\n * 필수. 대상 컨테이너를 지정합니다.\n * 선택자 또는 실제 요소가 될 수 있습니다.\n */\n to: string | HTMLElement\n /**\n * `true`이면, 콘텐츠가 대상 컨테이너로 이동하지 않고\n * 원래 위치에 남아 있습니다.\n * 동적으로 변경할 수 있습니다.\n */\n disabled?: boolean\n /**\n * `true`이면, Teleport는\n * 애플리케이션의 다른 부분이 마운트된 후\n * 대상 해석을 지연합니다. (3.5+)\n */\n defer?: boolean\n }\n ```\n\n- **예시**\n\n 대상 컨테이너 지정:\n\n ```html\n <Teleport to=\"#some-id\" />\n <Teleport to=\".some-class\" />\n <Teleport to=\"[data-teleport]\" />\n ```\n\n 조건부 비활성화:\n\n ```html\n <Teleport to=\"#popup\" :disabled=\"displayVideoInline\">\n <video src=\"./my-movie.mp4\">\n </Teleport>\n ```\n\n 대상 해석 지연 <sup class=\"vt-badge\" data-text=\"3.5+\" />:\n\n ```html\n <Teleport defer to=\"#late-div\">...</Teleport>\n\n <!-- 템플릿의 다른 위치에 -->\n <div id=\"late-div\"></div>\n ```\n\n- **더 알아보기** [가이드 - Teleport](https://ko.vuejs.org/guide/built-ins/teleport.html)\n"
|
|
36
36
|
},
|
|
37
37
|
"attributes": [],
|
|
38
38
|
"references": "api/built-in-components.html#teleport"
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
"name": "Suspense",
|
|
42
42
|
"description": {
|
|
43
43
|
"kind": "markdown",
|
|
44
|
-
"value": "\n컴포넌트
|
|
44
|
+
"value": "\n컴포넌트 트리 내에서 중첩된 비동기 의존성을 조율하는 데 사용됩니다.\n\n- **Props**\n\n ```ts\n interface SuspenseProps {\n timeout?: string | number\n suspensible?: boolean\n }\n ```\n\n- **이벤트**\n\n - `@resolve`\n - `@pending`\n - `@fallback`\n\n- **상세 설명**\n\n `<Suspense>`는 두 개의 슬롯을 받습니다: `#default` 슬롯과 `#fallback` 슬롯. 기본 슬롯을 메모리에서 렌더링하는 동안 fallback 슬롯의 내용을 표시합니다.\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 Suspense를 `suspensible`로 설정하면, 모든 비동기 의존성 처리가 부모 Suspense에 의해 처리됩니다. [구현 세부사항](https://github.com/vuejs/core/pull/6736) 참고\n\n- **더 알아보기** [가이드 - Suspense](https://ko.vuejs.org/guide/built-ins/suspense.html)\n"
|
|
45
45
|
},
|
|
46
46
|
"attributes": [],
|
|
47
47
|
"references": "api/built-in-components.html#suspense"
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
"name": "component",
|
|
51
51
|
"description": {
|
|
52
52
|
"kind": "markdown",
|
|
53
|
-
"value": "\n동적 컴포넌트 또는 엘리먼트를 렌더링하기 위한 \"메타 컴포넌트\"입니다.\n\n- **Props**\n\n ```ts\n interface DynamicComponentProps {\n is: string | Component\n }\n ```\n\n-
|
|
53
|
+
"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 등록된 이름으로 컴포넌트 렌더링하기 (Options API):\n\n ```vue\n <script>\n import Foo from './Foo.vue'\n import Bar from './Bar.vue'\n\n export default {\n components: { Foo, Bar },\n data() {\n return {\n view: 'Foo'\n }\n }\n }\n </script>\n\n <template>\n <component :is=\"view\" />\n </template>\n ```\n\n 컴포넌트 정의로 렌더링하기 (`<script setup>`을 사용하는 Composition API):\n\n ```vue\n <script setup>\n import Foo from './Foo.vue'\n import Bar from './Bar.vue'\n </script>\n\n <template>\n <component :is=\"Math.random() > 0.5 ? Foo : Bar\" />\n </template>\n ```\n\n HTML 엘리먼트 렌더링하기:\n\n ```html\n <component :is=\"href ? 'a' : 'span'\"></component>\n ```\n\n [내장 컴포넌트](./built-in-components)도 모두 `is`에 전달할 수 있지만, 이름으로 전달하려면 반드시 등록해야 합니다. 예를 들어:\n\n ```vue\n <script>\n import { Transition, TransitionGroup } from 'vue'\n\n export default {\n components: {\n Transition,\n TransitionGroup\n }\n }\n </script>\n\n <template>\n <component :is=\"isGroup ? 'TransitionGroup' : 'Transition'\">\n ...\n </component>\n </template>\n ```\n\n 컴포넌트 자체를 `is`에 전달하는 경우(예: `<script setup>`에서)는 등록이 필요하지 않습니다.\n\n `<component>` 태그에 `v-model`을 사용할 경우, 템플릿 컴파일러는 이를 `modelValue` prop과 `update:modelValue` 이벤트 리스너로 확장합니다. 이는 다른 컴포넌트와 마찬가지입니다. 하지만, 이는 `<input>`이나 `<select>`와 같은 네이티브 HTML 엘리먼트와는 호환되지 않습니다. 따라서, 동적으로 생성된 네이티브 엘리먼트에 `v-model`을 사용하는 것은 동작하지 않습니다:\n\n ```vue\n <script setup>\n import { ref } from 'vue'\n\n const tag = ref('input')\n const username = ref('')\n </script>\n\n <template>\n <!-- 'input'이 네이티브 HTML 엘리먼트이므로 동작하지 않습니다 -->\n <component :is=\"tag\" v-model=\"username\" />\n </template>\n ```\n\n 실제로 이와 같은 예외적인 경우는 드물며, 네이티브 폼 필드는 실제 애플리케이션에서 보통 컴포넌트로 감싸서 사용합니다. 만약 네이티브 엘리먼트를 직접 사용해야 한다면, `v-model`을 속성과 이벤트로 수동 분리하여 사용할 수 있습니다.\n\n- **관련 문서** [동적 컴포넌트](https://ko.vuejs.org/guide/essentials/component-basics.html#dynamic-components)\n"
|
|
54
54
|
},
|
|
55
55
|
"attributes": [],
|
|
56
56
|
"references": "api/built-in-special-elements.html#component"
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
"name": "slot",
|
|
60
60
|
"description": {
|
|
61
61
|
"kind": "markdown",
|
|
62
|
-
"value": "\n
|
|
62
|
+
"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` 속성을 사용하여 슬롯 이름을 지정할 수 있습니다. `name`이 지정되지 않으면 기본 슬롯이 렌더링됩니다. 슬롯 엘리먼트에 전달된 추가 속성들은 부모에서 정의된 스코프 슬롯에 슬롯 prop으로 전달됩니다.\n\n 해당 엘리먼트 자체는 일치하는 슬롯 콘텐츠로 대체됩니다.\n\n Vue 템플릿의 `<slot>` 엘리먼트는 자바스크립트로 컴파일되므로, [네이티브 `<slot>` 엘리먼트](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot)와 혼동하지 마세요.\n\n- **관련 문서** [컴포넌트 - 슬롯](https://ko.vuejs.org/guide/components/slots.html)\n"
|
|
63
63
|
},
|
|
64
64
|
"attributes": [],
|
|
65
65
|
"references": "api/built-in-special-elements.html#slot"
|
|
@@ -68,7 +68,7 @@
|
|
|
68
68
|
"name": "template",
|
|
69
69
|
"description": {
|
|
70
70
|
"kind": "markdown",
|
|
71
|
-
"value": "\n`<template>` 태그는 DOM에
|
|
71
|
+
"value": "\n`<template>` 태그는 DOM에 엘리먼트를 렌더링하지 않고 내장 디렉티브를 사용하고 싶을 때 플레이스홀더로 사용됩니다.\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://ko.vuejs.org/api/built-in-special-attributes.html#key)을 사용할 수 있습니다. 그 외의 모든 속성과 디렉티브는 해당 엘리먼트가 없으면 의미가 없으므로 무시됩니다.\n\n 싱글 파일 컴포넌트는 전체 템플릿을 감싸기 위해 [최상위 `<template>` 태그](https://ko.vuejs.org/api/sfc-spec.html#language-blocks)를 사용합니다. 이 사용법은 위에서 설명한 `<template>`의 사용과는 별개입니다. 최상위 태그는 템플릿 자체의 일부가 아니며, 디렉티브와 같은 템플릿 문법을 지원하지 않습니다.\n\n- **관련 문서**\n - [가이드 - `<template>`에서의 `v-if`](https://ko.vuejs.org/guide/essentials/conditional.html#v-if-on-template)\n - [가이드 - `<template>`에서의 `v-for`](https://ko.vuejs.org/guide/essentials/list.html#v-for-on-template)\n - [가이드 - 네임드 슬롯](https://ko.vuejs.org/guide/components/slots.html#named-slots)\n"
|
|
72
72
|
},
|
|
73
73
|
"attributes": [],
|
|
74
74
|
"references": "api/built-in-special-elements.html#template"
|
|
@@ -79,7 +79,7 @@
|
|
|
79
79
|
"name": "v-text",
|
|
80
80
|
"description": {
|
|
81
81
|
"kind": "markdown",
|
|
82
|
-
"value": "
|
|
82
|
+
"value": "요소의 텍스트 콘텐츠를 업데이트합니다.\n\n- **기대값:** `string`\n\n- **세부사항**\n\n `v-text`는 요소의 [textContent](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) 속성을 설정하여 동작하므로, 요소 내부의 기존 콘텐츠를 모두 덮어씁니다. `textContent`의 일부만 업데이트해야 한다면 [머스태시 보간법](https://ko.vuejs.org/guide/essentials/template-syntax.html#text-interpolation)을 대신 사용해야 합니다.\n\n- **예시**\n\n ```html\n <span v-text=\"msg\"></span>\n <!-- 아래와 동일 -->\n <span>{{msg}}</span>\n ```\n\n- **참고** [템플릿 문법 - 텍스트 보간](https://ko.vuejs.org/guide/essentials/template-syntax.html#text-interpolation)"
|
|
83
83
|
},
|
|
84
84
|
"references": "api/built-in-directives.html#v-text"
|
|
85
85
|
},
|
|
@@ -87,7 +87,7 @@
|
|
|
87
87
|
"name": "v-html",
|
|
88
88
|
"description": {
|
|
89
89
|
"kind": "markdown",
|
|
90
|
-
"value": "
|
|
90
|
+
"value": "요소의 [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)으로 이어질 수 있기 때문입니다. 신뢰할 수 있는 콘텐츠에만 `v-html`을 사용하고, **절대** 사용자로부터 제공된 콘텐츠에는 사용하지 마세요.\n :::\n\n [싱글 파일 컴포넌트](https://ko.vuejs.org/guide/scaling-up/sfc.html)에서는, `scoped` 스타일이 `v-html` 내부의 콘텐츠에는 적용되지 않습니다. 이는 해당 HTML이 Vue의 템플릿 컴파일러에 의해 처리되지 않기 때문입니다. `v-html` 콘텐츠에 scoped CSS를 적용하려면 [CSS 모듈](./sfc-css-features#css-modules)이나 BEM과 같은 수동 스코핑 전략을 가진 추가적인 전역 `<style>` 요소를 사용할 수 있습니다.\n\n- **예시**\n\n ```html\n <div v-html=\"html\"></div>\n ```\n\n- **참고** [템플릿 문법 - Raw HTML](https://ko.vuejs.org/guide/essentials/template-syntax.html#raw-html)"
|
|
91
91
|
},
|
|
92
92
|
"references": "api/built-in-directives.html#v-html"
|
|
93
93
|
},
|
|
@@ -95,7 +95,7 @@
|
|
|
95
95
|
"name": "v-show",
|
|
96
96
|
"description": {
|
|
97
97
|
"kind": "markdown",
|
|
98
|
-
"value": "
|
|
98
|
+
"value": "표현식 값의 참/거짓에 따라 요소의 표시 여부를 토글합니다.\n\n- **기대값:** `any`\n\n- **세부사항**\n\n `v-show`는 인라인 스타일을 통해 `display` CSS 속성을 설정하여 동작하며, 요소가 보일 때 초기 `display` 값을 최대한 존중합니다. 또한 조건이 변경될 때 트랜지션을 트리거합니다.\n\n- **참고** [조건부 렌더링 - v-show](https://ko.vuejs.org/guide/essentials/conditional.html#v-show)"
|
|
99
99
|
},
|
|
100
100
|
"references": "api/built-in-directives.html#v-show"
|
|
101
101
|
},
|
|
@@ -103,7 +103,7 @@
|
|
|
103
103
|
"name": "v-if",
|
|
104
104
|
"description": {
|
|
105
105
|
"kind": "markdown",
|
|
106
|
-
"value": "
|
|
106
|
+
"value": "표현식 값의 참/거짓에 따라 요소 또는 템플릿 조각을 조건부로 렌더링합니다.\n\n- **기대값:** `any`\n\n- **세부사항**\n\n `v-if` 요소가 토글될 때, 해당 요소와 그 안의 디렉티브/컴포넌트는 파괴되고 다시 생성됩니다. 초기 조건이 거짓이라면 내부 콘텐츠는 전혀 렌더링되지 않습니다.\n\n `<template>`에 사용할 수 있어, 텍스트만 포함하거나 여러 요소를 포함하는 조건부 블록을 나타낼 수 있습니다.\n\n 이 디렉티브는 조건이 변경될 때 트랜지션을 트리거합니다.\n\n 함께 사용할 때, `v-if`가 `v-for`보다 우선순위가 높습니다. 이 두 디렉티브를 하나의 요소에 함께 사용하는 것은 권장하지 않습니다. 자세한 내용은 [리스트 렌더링 가이드](https://ko.vuejs.org/guide/essentials/list.html#v-for-with-v-if)를 참고하세요.\n\n- **참고** [조건부 렌더링 - v-if](https://ko.vuejs.org/guide/essentials/conditional.html#v-if)"
|
|
107
107
|
},
|
|
108
108
|
"references": "api/built-in-directives.html#v-if"
|
|
109
109
|
},
|
|
@@ -112,7 +112,7 @@
|
|
|
112
112
|
"valueSet": "v",
|
|
113
113
|
"description": {
|
|
114
114
|
"kind": "markdown",
|
|
115
|
-
"value": "`v-if` 또는 `v-else-if`
|
|
115
|
+
"value": "`v-if` 또는 `v-if` / `v-else-if` 체인의 \"else 블록\"을 나타냅니다.\n\n- **표현식 없음**\n\n- **세부사항**\n\n - 제한: 이전 형제 요소에 `v-if` 또는 `v-else-if`가 있어야 합니다.\n\n - `<template>`에 사용할 수 있어, 텍스트만 포함하거나 여러 요소를 포함하는 조건부 블록을 나타낼 수 있습니다.\n\n- **예시**\n\n ```html\n <div v-if=\"Math.random() > 0.5\">\n Now you see me\n </div>\n <div v-else>\n Now you don't\n </div>\n ```\n\n- **참고** [조건부 렌더링 - v-else](https://ko.vuejs.org/guide/essentials/conditional.html#v-else)"
|
|
116
116
|
},
|
|
117
117
|
"references": "api/built-in-directives.html#v-else"
|
|
118
118
|
},
|
|
@@ -120,7 +120,7 @@
|
|
|
120
120
|
"name": "v-else-if",
|
|
121
121
|
"description": {
|
|
122
122
|
"kind": "markdown",
|
|
123
|
-
"value": "`v-if
|
|
123
|
+
"value": "`v-if`의 \"else if 블록\"을 나타냅니다. 체이닝이 가능합니다.\n\n- **기대값:** `any`\n\n- **세부사항**\n\n - 제한: 이전 형제 요소에 `v-if` 또는 `v-else-if`가 있어야 합니다.\n\n - `<template>`에 사용할 수 있어, 텍스트만 포함하거나 여러 요소를 포함하는 조건부 블록을 나타낼 수 있습니다.\n\n- **예시**\n\n ```html\n <div v-if=\"type === 'A'\">\n A\n </div>\n <div v-else-if=\"type === 'B'\">\n B\n </div>\n <div v-else-if=\"type === 'C'\">\n C\n </div>\n <div v-else>\n Not A/B/C\n </div>\n ```\n\n- **참고** [조건부 렌더링 - v-else-if](https://ko.vuejs.org/guide/essentials/conditional.html#v-else-if)"
|
|
124
124
|
},
|
|
125
125
|
"references": "api/built-in-directives.html#v-else-if"
|
|
126
126
|
},
|
|
@@ -128,7 +128,7 @@
|
|
|
128
128
|
"name": "v-for",
|
|
129
129
|
"description": {
|
|
130
130
|
"kind": "markdown",
|
|
131
|
-
"value": "소스 데이터를 기반으로
|
|
131
|
+
"value": "소스 데이터를 기반으로 요소 또는 템플릿 블록을 여러 번 렌더링합니다.\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`의 기본 동작은 요소를 제자리에서 패치하려고 시도하며, 이동시키지 않습니다. 요소의 순서를 강제로 재정렬하려면 `key` 특수 속성으로 정렬 힌트를 제공해야 합니다:\n\n ```html\n <div v-for=\"item in items\" :key=\"item.id\">\n {{ item.text }}\n </div>\n ```\n\n `v-for`는 [이터러블 프로토콜](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol)을 구현한 값(네이티브 `Map` 및 `Set` 포함)에도 사용할 수 있습니다.\n\n- **참고**\n - [리스트 렌더링](https://ko.vuejs.org/guide/essentials/list.html)"
|
|
132
132
|
},
|
|
133
133
|
"references": "api/built-in-directives.html#v-for"
|
|
134
134
|
},
|
|
@@ -136,7 +136,7 @@
|
|
|
136
136
|
"name": "v-on",
|
|
137
137
|
"description": {
|
|
138
138
|
"kind": "markdown",
|
|
139
|
-
"value": "
|
|
139
|
+
"value": "요소에 이벤트 리스너를 연결합니다.\n\n- **축약형:** `@`\n\n- **기대값:** `Function | 인라인 문장 | Object (인자 없이)`\n\n- **인자:** `event` (Object 문법 사용 시 선택)\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\"가 emit될 때 핸들러가 호출됨):\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)"
|
|
140
140
|
},
|
|
141
141
|
"references": "api/built-in-directives.html#v-on"
|
|
142
142
|
},
|
|
@@ -144,7 +144,7 @@
|
|
|
144
144
|
"name": "v-bind",
|
|
145
145
|
"description": {
|
|
146
146
|
"kind": "markdown",
|
|
147
|
-
"value": "하나 이상의 속성 또는 컴포넌트 prop을 표현식에 동적으로 바인딩합니다.\n\n-
|
|
147
|
+
"value": "하나 이상의 속성 또는 컴포넌트 prop을 표현식에 동적으로 바인딩합니다.\n\n- **축약형:**\n - `:` 또는 `.` (`.prop` 수식어 사용 시)\n - 값 생략(속성과 바인딩 값의 이름이 같을 때, 3.4+ 필요)\n\n- **기대값:** `any (인자 사용 시) | Object (인자 없이)`\n\n- **인자:** `attrOrProp (선택)`\n\n- **수식어**\n\n - `.camel` - 케밥 케이스 속성명을 camelCase로 변환\n - `.prop` - 바인딩을 DOM 속성으로 강제 설정 (3.2+)\n - `.attr` - 바인딩을 DOM 속성으로 강제 설정 (3.2+)\n\n- **사용법**\n\n `class` 또는 `style` 속성에 바인딩할 때, `v-bind`는 Array 또는 Object와 같은 추가 값 타입을 지원합니다. 자세한 내용은 아래 가이드 섹션을 참고하세요.\n\n 요소에 바인딩을 설정할 때, Vue는 기본적으로 `in` 연산자 체크를 통해 해당 키가 속성으로 정의되어 있는지 확인합니다. 속성이 정의되어 있으면, Vue는 값을 속성이 아닌 DOM 속성으로 설정합니다. 대부분의 경우 이 방식이 잘 동작하지만, `.prop` 또는 `.attr` 수식어를 명시적으로 사용하여 이 동작을 오버라이드할 수 있습니다. 특히 [커스텀 엘리먼트 작업 시](https://ko.vuejs.org/guide/extras/web-components.html#passing-dom-properties) 필요할 수 있습니다.\n\n 컴포넌트 prop 바인딩에 사용할 때, prop은 자식 컴포넌트에서 올바르게 선언되어 있어야 합니다.\n\n 인자 없이 사용할 경우, 속성명-값 쌍을 포함하는 객체를 바인딩할 수 있습니다.\n\n- **예시**\n\n ```html\n <!-- 속성 바인딩 -->\n <img v-bind:src=\"imageSrc\" />\n\n <!-- 동적 속성명 -->\n <button v-bind:[key]=\"value\"></button>\n\n <!-- 축약형 -->\n <img :src=\"imageSrc\" />\n\n <!-- 동일 이름 축약형 (3.4+), :src=\"src\"로 확장됨 -->\n <img :src />\n\n <!-- 축약형 동적 속성명 -->\n <button :[key]=\"value\"></button>\n\n <!-- 인라인 문자열 연결 -->\n <img :src=\"'/path/to/images/' + fileName\" />\n\n <!-- 클래스 바인딩 -->\n <div :class=\"{ red: isRed }\"></div>\n <div :class=\"[classA, classB]\"></div>\n <div :class=\"[classA, { classB: isB, classC: isC }]\"></div>\n\n <!-- 스타일 바인딩 -->\n <div :style=\"{ fontSize: size + 'px' }\"></div>\n <div :style=\"[styleObjectA, styleObjectB]\"></div>\n\n <!-- 속성 객체 바인딩 -->\n <div v-bind=\"{ id: someProp, 'other-attr': otherProp }\"></div>\n\n <!-- 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 `.camel` 수식어는 in-DOM 템플릿에서 `v-bind` 속성명을 camelCase로 변환할 수 있습니다. 예: 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 - [컴포넌트 - Prop 전달 세부사항](https://ko.vuejs.org/guide/components/props.html#prop-passing-details)"
|
|
148
148
|
},
|
|
149
149
|
"references": "api/built-in-directives.html#v-bind"
|
|
150
150
|
},
|
|
@@ -152,7 +152,7 @@
|
|
|
152
152
|
"name": "v-model",
|
|
153
153
|
"description": {
|
|
154
154
|
"kind": "markdown",
|
|
155
|
-
"value": "
|
|
155
|
+
"value": "폼 입력 요소 또는 컴포넌트에서 양방향 바인딩을 생성합니다.\n\n- **기대값:** 폼 입력 요소의 값 또는 컴포넌트의 출력에 따라 다름\n\n- **제한:**\n\n - `<input>`\n - `<select>`\n - `<textarea>`\n - 컴포넌트\n\n- **수식어**\n\n - [`.lazy`](https://ko.vuejs.org/guide/essentials/forms.html#lazy) - `input` 대신 `change` 이벤트 리스닝\n - [`.number`](https://ko.vuejs.org/guide/essentials/forms.html#number) - 유효한 입력 문자열을 숫자로 변환\n - [`.trim`](https://ko.vuejs.org/guide/essentials/forms.html#trim) - 입력값 트림\n\n- **참고**\n\n - [폼 입력 바인딩](https://ko.vuejs.org/guide/essentials/forms.html)\n - [컴포넌트 이벤트 - `v-model`과 함께 사용](https://ko.vuejs.org/guide/components/v-model.html)"
|
|
156
156
|
},
|
|
157
157
|
"references": "api/built-in-directives.html#v-model"
|
|
158
158
|
},
|
|
@@ -160,7 +160,7 @@
|
|
|
160
160
|
"name": "v-slot",
|
|
161
161
|
"description": {
|
|
162
162
|
"kind": "markdown",
|
|
163
|
-
"value": "
|
|
163
|
+
"value": "props를 받을 것으로 예상되는 명명된 슬롯 또는 스코프 슬롯을 나타냅니다.\n\n- **축약형:** `#`\n\n- **기대값:** 함수 인자 위치에서 유효한 JavaScript 표현식(구조 분해 지원 포함). 선택 사항 - 슬롯에 props가 전달될 것으로 예상될 때만 필요.\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 Header content\n </template>\n\n <template v-slot:default>\n Default slot content\n </template>\n\n <template v-slot:footer>\n Footer content\n </template>\n </BaseLayout>\n\n <!-- props를 받는 명명된 슬롯 -->\n <InfiniteScroll>\n <template v-slot:item=\"slotProps\">\n <div class=\"item\">\n {{ slotProps.item.text }}\n </div>\n </template>\n </InfiniteScroll>\n\n <!-- 구조 분해와 함께 props를 받는 기본 슬롯 -->\n <Mouse v-slot=\"{ x, y }\">\n Mouse position: {{ x }}, {{ y }}\n </Mouse>\n ```\n\n- **참고**\n - [컴포넌트 - 슬롯](https://ko.vuejs.org/guide/components/slots.html)"
|
|
164
164
|
},
|
|
165
165
|
"references": "api/built-in-directives.html#v-slot"
|
|
166
166
|
},
|
|
@@ -169,7 +169,7 @@
|
|
|
169
169
|
"valueSet": "v",
|
|
170
170
|
"description": {
|
|
171
171
|
"kind": "markdown",
|
|
172
|
-
"value": "이
|
|
172
|
+
"value": "이 요소와 모든 자식에 대한 컴파일을 건너뜁니다.\n\n- **표현식 없음**\n\n- **세부사항**\n\n `v-pre`가 있는 요소 내부에서는 모든 Vue 템플릿 문법이 그대로 보존되어 렌더링됩니다. 가장 일반적인 사용 사례는 원시 머스태시 태그를 표시하는 것입니다.\n\n- **예시**\n\n ```html\n <span v-pre>{{ this will not be compiled }}</span>\n ```"
|
|
173
173
|
},
|
|
174
174
|
"references": "api/built-in-directives.html#v-pre"
|
|
175
175
|
},
|
|
@@ -178,7 +178,7 @@
|
|
|
178
178
|
"valueSet": "v",
|
|
179
179
|
"description": {
|
|
180
180
|
"kind": "markdown",
|
|
181
|
-
"value": "
|
|
181
|
+
"value": "요소와 컴포넌트를 한 번만 렌더링하고, 이후 업데이트를 건너뜁니다.\n\n- **표현식 없음**\n\n- **세부사항**\n\n 이후 다시 렌더링될 때, 해당 요소/컴포넌트와 모든 자식은 정적 콘텐츠로 간주되어 건너뜁니다. 이는 업데이트 성능을 최적화하는 데 사용할 수 있습니다.\n\n ```html\n <!-- 단일 요소 -->\n <span v-once>This will never change: {{msg}}</span>\n <!-- 자식이 있는 요소 -->\n <div v-once>\n <h1>Comment</h1>\n <p>{{msg}}</p>\n </div>\n <!-- 컴포넌트 -->\n <MyComponent v-once :comment=\"msg\"></MyComponent>\n <!-- `v-for` 디렉티브 -->\n <ul>\n <li v-for=\"i in list\" v-once>{{i}}</li>\n </ul>\n ```\n\n 3.2부터는 [`v-memo`](#v-memo)를 사용해 무효화 조건과 함께 템플릿의 일부를 메모이즈할 수도 있습니다.\n\n- **참고**\n - [데이터 바인딩 문법 - 보간](https://ko.vuejs.org/guide/essentials/template-syntax.html#text-interpolation)\n - [v-memo](#v-memo)"
|
|
182
182
|
},
|
|
183
183
|
"references": "api/built-in-directives.html#v-once"
|
|
184
184
|
},
|
|
@@ -186,7 +186,7 @@
|
|
|
186
186
|
"name": "v-memo",
|
|
187
187
|
"description": {
|
|
188
188
|
"kind": "markdown",
|
|
189
|
-
"value": "- 3.2
|
|
189
|
+
"value": "- 3.2+에서만 지원\n\n- **기대값:** `any[]`\n\n- **세부사항**\n\n 템플릿의 서브 트리를 메모이즈합니다. 요소와 컴포넌트 모두에 사용할 수 있습니다. 디렉티브는 메모이제이션을 위해 비교할 고정 길이의 의존성 값 배열을 기대합니다. 배열의 모든 값이 마지막 렌더와 동일하다면, 전체 서브 트리에 대한 업데이트가 건너뜁니다. 예를 들어:\n\n ```html\n <div v-memo=\"[valueA, valueB]\">\n ...\n </div>\n ```\n\n 컴포넌트가 다시 렌더링될 때, `valueA`와 `valueB`가 모두 동일하다면 이 `<div>`와 그 자식에 대한 모든 업데이트가 건너뜁니다. 실제로, 메모이즈된 서브 트리의 복사본을 재사용할 수 있으므로 Virtual DOM VNode 생성조차도 건너뜁니다.\n\n 메모이제이션 배열을 올바르게 지정하는 것이 중요합니다. 그렇지 않으면 실제로 적용되어야 할 업데이트를 건너뛸 수 있습니다. 의존성 배열이 비어있는 `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를 재사용하여 diffing을 완전히 건너뜁니다. 이때, Vue가 항목의 `:key`에서 자동으로 추론하므로 memo 의존성 배열에 `item.id`를 포함할 필요는 없습니다.\n\n :::warning\n `v-memo`를 `v-for`와 함께 사용할 때는 반드시 같은 요소에 사용해야 합니다. **`v-memo`는 `v-for` 내부에서는 동작하지 않습니다.**\n :::\n\n `v-memo`는 자식 컴포넌트 업데이트 체크가 비최적화된 특정 엣지 케이스에서 원치 않는 업데이트를 수동으로 방지하는 데도 사용할 수 있습니다. 하지만, 필요한 업데이트가 건너뛰어지지 않도록 올바른 의존성 배열을 지정하는 것은 개발자의 책임입니다.\n\n- **참고**\n - [v-once](#v-once)"
|
|
190
190
|
},
|
|
191
191
|
"references": "api/built-in-directives.html#v-memo"
|
|
192
192
|
},
|
|
@@ -195,7 +195,7 @@
|
|
|
195
195
|
"valueSet": "v",
|
|
196
196
|
"description": {
|
|
197
197
|
"kind": "markdown",
|
|
198
|
-
"value": "
|
|
198
|
+
"value": "컴파일되지 않은 템플릿을 준비될 때까지 숨기는 데 사용됩니다.\n\n- **표현식 없음**\n\n- **세부사항**\n\n **이 디렉티브는 빌드 단계가 없는 환경에서만 필요합니다.**\n\n in-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>`는 보이지 않습니다."
|
|
199
199
|
},
|
|
200
200
|
"references": "api/built-in-directives.html#v-cloak"
|
|
201
201
|
},
|
|
@@ -203,7 +203,7 @@
|
|
|
203
203
|
"name": "key",
|
|
204
204
|
"description": {
|
|
205
205
|
"kind": "markdown",
|
|
206
|
-
"value": "특수
|
|
206
|
+
"value": "`key` 특수 속성은 주로 Vue의 가상 DOM 알고리즘이 새로운 노드 목록과 이전 노드 목록을 비교(diffing)할 때 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>`은 항상 패치되는 대신 교체되어 트랜지션이 트리거됩니다.\n\n- **관련 문서** [가이드 - 리스트 렌더링 - `key`로 상태 유지하기](https://ko.vuejs.org/guide/essentials/list.html#maintaining-state-with-key)"
|
|
207
207
|
},
|
|
208
208
|
"references": "api/built-in-special-attributes.html#key"
|
|
209
209
|
},
|
|
@@ -211,7 +211,7 @@
|
|
|
211
211
|
"name": "ref",
|
|
212
212
|
"description": {
|
|
213
213
|
"kind": "markdown",
|
|
214
|
-
"value": "[템플릿
|
|
214
|
+
"value": "[템플릿 ref](https://ko.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 { useTemplateRef } from 'vue'\n\n const pRef = useTemplateRef('p')\n </script>\n\n <template>\n <p ref=\"p\">hello</p>\n </template>\n ```\n\n 일반 DOM 요소에 사용하면 참조는 해당 요소가 되고, 자식 컴포넌트에 사용하면 참조는 자식 컴포넌트 인스턴스가 됩니다.\n\n 또는 `ref`는 함수 값을 받아 참조를 어디에 저장할지 완전히 제어할 수 있습니다:\n\n ```html\n <ChildComponent :ref=\"(el) => child = el\" />\n ```\n\n ref 등록 타이밍에 대한 중요한 참고 사항: ref 자체는 렌더 함수의 결과로 생성되기 때문에, 컴포넌트가 마운트될 때까지 참조에 접근해서는 안 됩니다.\n\n `this.$refs`는 반응형이 아니므로, 데이터 바인딩을 위해 템플릿에서 사용하려고 해서는 안 됩니다.\n\n- **관련 문서**\n - [가이드 - 템플릿 ref](https://ko.vuejs.org/guide/essentials/template-refs.html)\n - [가이드 - 템플릿 ref 타입 지정](https://ko.vuejs.org/guide/typescript/composition-api.html#typing-template-refs) <sup class=\"vt-badge ts\" />\n - [가이드 - 컴포넌트 템플릿 ref 타입 지정](https://ko.vuejs.org/guide/typescript/composition-api.html#typing-component-template-refs) <sup class=\"vt-badge ts\" />"
|
|
215
215
|
},
|
|
216
216
|
"references": "api/built-in-special-attributes.html#ref"
|
|
217
217
|
},
|
|
@@ -219,9 +219,17 @@
|
|
|
219
219
|
"name": "is",
|
|
220
220
|
"description": {
|
|
221
221
|
"kind": "markdown",
|
|
222
|
-
"value": "[동적 컴포넌트](https://ko.vuejs.org/guide/essentials/component-basics.html#dynamic-components) 바인딩에
|
|
222
|
+
"value": "[동적 컴포넌트](https://ko.vuejs.org/guide/essentials/component-basics.html#dynamic-components) 바인딩에 사용됩니다.\n\n- **기대값:** `string | Component`\n\n- **네이티브 요소에서의 사용**\n \n - 3.1+에서만 지원됩니다\n\n `is` 속성이 네이티브 HTML 요소에 사용되면, [커스터마이즈드 내장 요소](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-customized-builtin-example)로 해석되며, 이는 웹 플랫폼의 네이티브 기능입니다.\n\n 하지만 [in-DOM 템플릿 파싱 주의사항](https://ko.vuejs.org/guide/essentials/component-basics.html#in-dom-template-parsing-caveats)에서 설명한 것처럼, 네이티브 요소를 Vue 컴포넌트로 대체해야 할 필요가 있을 수 있습니다. 이 경우 `is` 속성 값 앞에 `vue:`를 붙이면 Vue가 해당 요소를 Vue 컴포넌트로 렌더링합니다:\n\n ```html\n <table>\n <tr is=\"vue:my-row-component\"></tr>\n </table>\n ```\n\n- **관련 문서**\n\n - [내장 특수 요소 - `<component>`](https://ko.vuejs.org/api/built-in-special-elements.html#component)\n - [동적 컴포넌트](https://ko.vuejs.org/guide/essentials/component-basics.html#dynamic-components)"
|
|
223
223
|
},
|
|
224
224
|
"references": "api/built-in-special-attributes.html#is"
|
|
225
|
+
},
|
|
226
|
+
{
|
|
227
|
+
"name": "data-allow-mismatch",
|
|
228
|
+
"description": {
|
|
229
|
+
"kind": "markdown",
|
|
230
|
+
"value": "[하이드레이션 불일치](https://ko.vuejs.org/guide/scaling-up/ssr.html#hydration-mismatch) 경고를 억제하는 데 사용할 수 있는 특수 속성입니다.\n\n- **예시**\n\n ```html\n <div data-allow-mismatch=\"text\">{{ data.toLocaleString() }}</div>\n ```\n\n 값은 허용되는 불일치 유형을 특정 타입으로 제한할 수 있습니다. 허용되는 값은 다음과 같습니다:\n\n - `text`\n - `children` (직접 자식에 대한 불일치만 허용)\n - `class`\n - `style`\n - `attribute`\n\n 값을 제공하지 않으면 모든 유형의 불일치가 허용됩니다.\n"
|
|
231
|
+
},
|
|
232
|
+
"references": "api/ssr.html#data-allow-mismatch"
|
|
225
233
|
}
|
|
226
234
|
]
|
|
227
235
|
}
|
package/lib/types.d.ts
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
export declare enum TagNameCasing {
|
|
2
|
+
Kebab = 0,
|
|
3
|
+
Pascal = 1,
|
|
4
|
+
}
|
|
5
|
+
export declare enum AttrNameCasing {
|
|
6
|
+
Kebab = 0,
|
|
7
|
+
Camel = 1,
|
|
8
|
+
}
|
|
9
|
+
export declare const commands: {
|
|
10
|
+
parseSfc: string;
|
|
11
|
+
};
|
|
12
|
+
export * from '@volar/language-service/lib/types';
|
|
13
|
+
export * from '@vue/language-core/lib/types';
|
package/lib/types.js
ADDED
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
exports.commands = exports.AttrNameCasing = exports.TagNameCasing = void 0;
|
|
18
|
+
var TagNameCasing;
|
|
19
|
+
(function (TagNameCasing) {
|
|
20
|
+
TagNameCasing[TagNameCasing["Kebab"] = 0] = "Kebab";
|
|
21
|
+
TagNameCasing[TagNameCasing["Pascal"] = 1] = "Pascal";
|
|
22
|
+
})(TagNameCasing || (exports.TagNameCasing = TagNameCasing = {}));
|
|
23
|
+
var AttrNameCasing;
|
|
24
|
+
(function (AttrNameCasing) {
|
|
25
|
+
AttrNameCasing[AttrNameCasing["Kebab"] = 0] = "Kebab";
|
|
26
|
+
AttrNameCasing[AttrNameCasing["Camel"] = 1] = "Camel";
|
|
27
|
+
})(AttrNameCasing || (exports.AttrNameCasing = AttrNameCasing = {}));
|
|
28
|
+
exports.commands = {
|
|
29
|
+
parseSfc: 'vue.parseSfc',
|
|
30
|
+
};
|
|
31
|
+
// only export types of depend packages
|
|
32
|
+
__exportStar(require("@volar/language-service/lib/types"), exports);
|
|
33
|
+
__exportStar(require("@vue/language-core/lib/types"), exports);
|
|
34
|
+
//# sourceMappingURL=types.js.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vue/language-service",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"files": [
|
|
6
6
|
"data",
|
|
@@ -17,8 +17,8 @@
|
|
|
17
17
|
"update-html-data": "node ./scripts/update-html-data.js"
|
|
18
18
|
},
|
|
19
19
|
"dependencies": {
|
|
20
|
-
"@volar/language-service": "2.4.
|
|
21
|
-
"@vue/language-core": "3.0.
|
|
20
|
+
"@volar/language-service": "2.4.17",
|
|
21
|
+
"@vue/language-core": "3.0.1",
|
|
22
22
|
"@vue/shared": "^3.5.0",
|
|
23
23
|
"path-browserify": "^1.0.1",
|
|
24
24
|
"volar-service-css": "0.0.64",
|
|
@@ -35,11 +35,11 @@
|
|
|
35
35
|
"devDependencies": {
|
|
36
36
|
"@types/node": "^22.10.4",
|
|
37
37
|
"@types/path-browserify": "^1.0.1",
|
|
38
|
-
"@volar/kit": "2.4.
|
|
39
|
-
"@volar/typescript": "2.4.
|
|
38
|
+
"@volar/kit": "2.4.17",
|
|
39
|
+
"@volar/typescript": "2.4.17",
|
|
40
40
|
"@vue/compiler-dom": "^3.5.0",
|
|
41
|
-
"@vue/typescript-plugin": "3.0.
|
|
41
|
+
"@vue/typescript-plugin": "3.0.1",
|
|
42
42
|
"vscode-css-languageservice": "^6.3.1"
|
|
43
43
|
},
|
|
44
|
-
"gitHead": "
|
|
44
|
+
"gitHead": "43884409838dfdce44de51f6622926ac6ddd7318"
|
|
45
45
|
}
|