@vue/language-service 2.1.10 → 2.2.0
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/cs.json +29 -930
- package/data/language-blocks/en.json +28 -929
- package/data/language-blocks/fr.json +28 -929
- package/data/language-blocks/it.json +28 -929
- package/data/language-blocks/ja.json +28 -929
- package/data/language-blocks/ko.json +28 -929
- package/data/language-blocks/pt.json +28 -929
- package/data/language-blocks/ru.json +28 -929
- package/data/language-blocks/zh-cn.json +30 -931
- package/data/language-blocks/zh-hk.json +28 -929
- package/data/locale.json +54 -0
- package/data/model-modifiers/cs.json +6 -165
- package/data/model-modifiers/en.json +6 -165
- package/data/model-modifiers/fr.json +6 -165
- package/data/model-modifiers/it.json +6 -165
- package/data/model-modifiers/ja.json +6 -165
- package/data/model-modifiers/ko.json +6 -165
- package/data/model-modifiers/pt.json +6 -165
- package/data/model-modifiers/ru.json +6 -165
- package/data/model-modifiers/zh-cn.json +6 -165
- package/data/model-modifiers/zh-hk.json +6 -165
- package/data/template/cs.json +59 -1429
- package/data/template/en.json +52 -1422
- package/data/template/fr.json +55 -1425
- package/data/template/it.json +44 -1422
- package/data/template/ja.json +53 -1423
- package/data/template/ko.json +44 -1422
- package/data/template/pt.json +44 -1422
- package/data/template/ru.json +52 -1422
- package/data/template/zh-cn.json +53 -1423
- package/data/template/zh-hk.json +44 -1422
- package/index.d.ts +2 -2
- package/index.js +2 -2
- package/lib/ideFeatures/nameCasing.js +14 -16
- package/lib/plugins/data.js +47 -20
- package/lib/plugins/vue-autoinsert-dotvalue.js +4 -3
- package/lib/plugins/vue-autoinsert-space.js +1 -1
- package/lib/plugins/vue-complete-define-assignment.js +11 -13
- package/lib/plugins/vue-directive-comments.js +10 -8
- package/lib/plugins/vue-document-drop.js +15 -12
- package/lib/plugins/vue-document-links.js +45 -39
- package/lib/plugins/vue-extract-file.js +19 -10
- package/lib/plugins/vue-inlayhints.d.ts +1 -1
- package/lib/plugins/vue-inlayhints.js +65 -56
- package/lib/plugins/vue-sfc.js +29 -27
- package/lib/plugins/vue-template.js +194 -162
- package/lib/plugins/vue-twoslash-queries.js +9 -4
- package/package.json +10 -9
- package/scripts/update-html-data.js +74 -70
|
@@ -8,68 +8,15 @@
|
|
|
8
8
|
"name": "src",
|
|
9
9
|
"description": {
|
|
10
10
|
"kind": "markdown",
|
|
11
|
-
"value": "
|
|
11
|
+
"value": "如果你更喜欢将 `*.vue` 组件分散到多个文件中，可以为一个语块使用 `src` 这个 attribute 来导入一个外部文件：\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` 导入和 JS 模块导入遵循相同的路径解析规则，这意味着：\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```"
|
|
12
12
|
},
|
|
13
|
-
"references":
|
|
14
|
-
{
|
|
15
|
-
"name": "en",
|
|
16
|
-
"url": "https://vuejs.org/api/sfc-spec.html#src-imports"
|
|
17
|
-
},
|
|
18
|
-
{
|
|
19
|
-
"name": "zh-cn",
|
|
20
|
-
"url": "https://cn.vuejs.org/api/sfc-spec.html#src-imports"
|
|
21
|
-
},
|
|
22
|
-
{
|
|
23
|
-
"name": "zh-hk",
|
|
24
|
-
"url": "https://zh-hk.vuejs.org/api/sfc-spec.html#src-imports"
|
|
25
|
-
},
|
|
26
|
-
{
|
|
27
|
-
"name": "ja",
|
|
28
|
-
"url": "https://ja.vuejs.org/api/sfc-spec.html#src-imports"
|
|
29
|
-
},
|
|
30
|
-
{
|
|
31
|
-
"name": "ua",
|
|
32
|
-
"url": "https://ua.vuejs.org/api/sfc-spec.html#src-imports"
|
|
33
|
-
},
|
|
34
|
-
{
|
|
35
|
-
"name": "fr",
|
|
36
|
-
"url": "https://fr.vuejs.org/api/sfc-spec.html#src-imports"
|
|
37
|
-
},
|
|
38
|
-
{
|
|
39
|
-
"name": "ko",
|
|
40
|
-
"url": "https://ko.vuejs.org/api/sfc-spec.html#src-imports"
|
|
41
|
-
},
|
|
42
|
-
{
|
|
43
|
-
"name": "pt",
|
|
44
|
-
"url": "https://pt.vuejs.org/api/sfc-spec.html#src-imports"
|
|
45
|
-
},
|
|
46
|
-
{
|
|
47
|
-
"name": "bn",
|
|
48
|
-
"url": "https://bn.vuejs.org/api/sfc-spec.html#src-imports"
|
|
49
|
-
},
|
|
50
|
-
{
|
|
51
|
-
"name": "it",
|
|
52
|
-
"url": "https://it.vuejs.org/api/sfc-spec.html#src-imports"
|
|
53
|
-
},
|
|
54
|
-
{
|
|
55
|
-
"name": "cs",
|
|
56
|
-
"url": "https://cs.vuejs.org/api/sfc-spec.html#src-imports"
|
|
57
|
-
},
|
|
58
|
-
{
|
|
59
|
-
"name": "ru",
|
|
60
|
-
"url": "https://ru.vuejs.org/api/sfc-spec.html#src-imports"
|
|
61
|
-
},
|
|
62
|
-
{
|
|
63
|
-
"name": "fa",
|
|
64
|
-
"url": "https://fa.vuejs.org/api/sfc-spec.html#src-imports"
|
|
65
|
-
}
|
|
66
|
-
]
|
|
13
|
+
"references": "api/sfc-spec.html#src-imports"
|
|
67
14
|
},
|
|
68
15
|
{
|
|
69
16
|
"name": "lang",
|
|
70
17
|
"description": {
|
|
71
18
|
"kind": "markdown",
|
|
72
|
-
"value": "
|
|
19
|
+
"value": "代码块可以使用 `lang` 这个 attribute 来声明预处理器语言，最常见的用例就是在 `<script>` 中使用 TypeScript：\n\n```html\n<script lang=\"ts\">\n // use TypeScript\n</script>\n```\n\n`lang` 在任意块上都能使用，比如我们可以在 `<style>` 标签中使用 [Sass](https://sass-lang.com/) 或是 `<template>` 中使用 [Pug](https://pugjs.org/api/getting-started.html)：\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://cn.vitejs.dev/guide/features.html#css-pre-processors)\n- [Vue CLI](https://cli.vuejs.org/zh/guide/css.html#%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8)\n- [webpack + vue-loader](https://vue-loader.vuejs.org/zh/guide/pre-processors.html#%E4%BD%BF%E7%94%A8%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8)"
|
|
73
20
|
},
|
|
74
21
|
"values": [
|
|
75
22
|
{
|
|
@@ -79,120 +26,14 @@
|
|
|
79
26
|
"name": "pug"
|
|
80
27
|
}
|
|
81
28
|
],
|
|
82
|
-
"references":
|
|
83
|
-
{
|
|
84
|
-
"name": "en",
|
|
85
|
-
"url": "https://vuejs.org/api/sfc-spec.html#pre-processors"
|
|
86
|
-
},
|
|
87
|
-
{
|
|
88
|
-
"name": "zh-cn",
|
|
89
|
-
"url": "https://cn.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
90
|
-
},
|
|
91
|
-
{
|
|
92
|
-
"name": "zh-hk",
|
|
93
|
-
"url": "https://zh-hk.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
94
|
-
},
|
|
95
|
-
{
|
|
96
|
-
"name": "ja",
|
|
97
|
-
"url": "https://ja.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
98
|
-
},
|
|
99
|
-
{
|
|
100
|
-
"name": "ua",
|
|
101
|
-
"url": "https://ua.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
102
|
-
},
|
|
103
|
-
{
|
|
104
|
-
"name": "fr",
|
|
105
|
-
"url": "https://fr.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
106
|
-
},
|
|
107
|
-
{
|
|
108
|
-
"name": "ko",
|
|
109
|
-
"url": "https://ko.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
110
|
-
},
|
|
111
|
-
{
|
|
112
|
-
"name": "pt",
|
|
113
|
-
"url": "https://pt.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
114
|
-
},
|
|
115
|
-
{
|
|
116
|
-
"name": "bn",
|
|
117
|
-
"url": "https://bn.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
118
|
-
},
|
|
119
|
-
{
|
|
120
|
-
"name": "it",
|
|
121
|
-
"url": "https://it.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
122
|
-
},
|
|
123
|
-
{
|
|
124
|
-
"name": "cs",
|
|
125
|
-
"url": "https://cs.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
126
|
-
},
|
|
127
|
-
{
|
|
128
|
-
"name": "ru",
|
|
129
|
-
"url": "https://ru.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
130
|
-
},
|
|
131
|
-
{
|
|
132
|
-
"name": "fa",
|
|
133
|
-
"url": "https://fa.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
134
|
-
}
|
|
135
|
-
]
|
|
29
|
+
"references": "api/sfc-spec.html#pre-processors"
|
|
136
30
|
}
|
|
137
31
|
],
|
|
138
32
|
"description": {
|
|
139
33
|
"kind": "markdown",
|
|
140
34
|
"value": "\n- 每个 `*.vue` 文件最多可以包含一个顶层 `<template>` 块。\n\n- 语块包裹的内容将会被提取、传递给 `@vue/compiler-dom`，预编译为 JavaScript 渲染函数，并附在导出的组件上作为其 `render` 选项。\n"
|
|
141
35
|
},
|
|
142
|
-
"references":
|
|
143
|
-
{
|
|
144
|
-
"name": "en",
|
|
145
|
-
"url": "https://vuejs.org/api/sfc-spec.html#template"
|
|
146
|
-
},
|
|
147
|
-
{
|
|
148
|
-
"name": "zh-cn",
|
|
149
|
-
"url": "https://cn.vuejs.org/api/sfc-spec.html#template"
|
|
150
|
-
},
|
|
151
|
-
{
|
|
152
|
-
"name": "zh-hk",
|
|
153
|
-
"url": "https://zh-hk.vuejs.org/api/sfc-spec.html#template"
|
|
154
|
-
},
|
|
155
|
-
{
|
|
156
|
-
"name": "ja",
|
|
157
|
-
"url": "https://ja.vuejs.org/api/sfc-spec.html#template"
|
|
158
|
-
},
|
|
159
|
-
{
|
|
160
|
-
"name": "ua",
|
|
161
|
-
"url": "https://ua.vuejs.org/api/sfc-spec.html#template"
|
|
162
|
-
},
|
|
163
|
-
{
|
|
164
|
-
"name": "fr",
|
|
165
|
-
"url": "https://fr.vuejs.org/api/sfc-spec.html#template"
|
|
166
|
-
},
|
|
167
|
-
{
|
|
168
|
-
"name": "ko",
|
|
169
|
-
"url": "https://ko.vuejs.org/api/sfc-spec.html#template"
|
|
170
|
-
},
|
|
171
|
-
{
|
|
172
|
-
"name": "pt",
|
|
173
|
-
"url": "https://pt.vuejs.org/api/sfc-spec.html#template"
|
|
174
|
-
},
|
|
175
|
-
{
|
|
176
|
-
"name": "bn",
|
|
177
|
-
"url": "https://bn.vuejs.org/api/sfc-spec.html#template"
|
|
178
|
-
},
|
|
179
|
-
{
|
|
180
|
-
"name": "it",
|
|
181
|
-
"url": "https://it.vuejs.org/api/sfc-spec.html#template"
|
|
182
|
-
},
|
|
183
|
-
{
|
|
184
|
-
"name": "cs",
|
|
185
|
-
"url": "https://cs.vuejs.org/api/sfc-spec.html#template"
|
|
186
|
-
},
|
|
187
|
-
{
|
|
188
|
-
"name": "ru",
|
|
189
|
-
"url": "https://ru.vuejs.org/api/sfc-spec.html#template"
|
|
190
|
-
},
|
|
191
|
-
{
|
|
192
|
-
"name": "fa",
|
|
193
|
-
"url": "https://fa.vuejs.org/api/sfc-spec.html#template"
|
|
194
|
-
}
|
|
195
|
-
]
|
|
36
|
+
"references": "api/sfc-spec.html#template"
|
|
196
37
|
},
|
|
197
38
|
{
|
|
198
39
|
"name": "script",
|
|
@@ -201,68 +42,15 @@
|
|
|
201
42
|
"name": "src",
|
|
202
43
|
"description": {
|
|
203
44
|
"kind": "markdown",
|
|
204
|
-
"value": "
|
|
45
|
+
"value": "如果你更喜欢将 `*.vue` 组件分散到多个文件中，可以为一个语块使用 `src` 这个 attribute 来导入一个外部文件：\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` 导入和 JS 模块导入遵循相同的路径解析规则，这意味着：\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```"
|
|
205
46
|
},
|
|
206
|
-
"references":
|
|
207
|
-
{
|
|
208
|
-
"name": "en",
|
|
209
|
-
"url": "https://vuejs.org/api/sfc-spec.html#src-imports"
|
|
210
|
-
},
|
|
211
|
-
{
|
|
212
|
-
"name": "zh-cn",
|
|
213
|
-
"url": "https://cn.vuejs.org/api/sfc-spec.html#src-imports"
|
|
214
|
-
},
|
|
215
|
-
{
|
|
216
|
-
"name": "zh-hk",
|
|
217
|
-
"url": "https://zh-hk.vuejs.org/api/sfc-spec.html#src-imports"
|
|
218
|
-
},
|
|
219
|
-
{
|
|
220
|
-
"name": "ja",
|
|
221
|
-
"url": "https://ja.vuejs.org/api/sfc-spec.html#src-imports"
|
|
222
|
-
},
|
|
223
|
-
{
|
|
224
|
-
"name": "ua",
|
|
225
|
-
"url": "https://ua.vuejs.org/api/sfc-spec.html#src-imports"
|
|
226
|
-
},
|
|
227
|
-
{
|
|
228
|
-
"name": "fr",
|
|
229
|
-
"url": "https://fr.vuejs.org/api/sfc-spec.html#src-imports"
|
|
230
|
-
},
|
|
231
|
-
{
|
|
232
|
-
"name": "ko",
|
|
233
|
-
"url": "https://ko.vuejs.org/api/sfc-spec.html#src-imports"
|
|
234
|
-
},
|
|
235
|
-
{
|
|
236
|
-
"name": "pt",
|
|
237
|
-
"url": "https://pt.vuejs.org/api/sfc-spec.html#src-imports"
|
|
238
|
-
},
|
|
239
|
-
{
|
|
240
|
-
"name": "bn",
|
|
241
|
-
"url": "https://bn.vuejs.org/api/sfc-spec.html#src-imports"
|
|
242
|
-
},
|
|
243
|
-
{
|
|
244
|
-
"name": "it",
|
|
245
|
-
"url": "https://it.vuejs.org/api/sfc-spec.html#src-imports"
|
|
246
|
-
},
|
|
247
|
-
{
|
|
248
|
-
"name": "cs",
|
|
249
|
-
"url": "https://cs.vuejs.org/api/sfc-spec.html#src-imports"
|
|
250
|
-
},
|
|
251
|
-
{
|
|
252
|
-
"name": "ru",
|
|
253
|
-
"url": "https://ru.vuejs.org/api/sfc-spec.html#src-imports"
|
|
254
|
-
},
|
|
255
|
-
{
|
|
256
|
-
"name": "fa",
|
|
257
|
-
"url": "https://fa.vuejs.org/api/sfc-spec.html#src-imports"
|
|
258
|
-
}
|
|
259
|
-
]
|
|
47
|
+
"references": "api/sfc-spec.html#src-imports"
|
|
260
48
|
},
|
|
261
49
|
{
|
|
262
50
|
"name": "lang",
|
|
263
51
|
"description": {
|
|
264
52
|
"kind": "markdown",
|
|
265
|
-
"value": "
|
|
53
|
+
"value": "代码块可以使用 `lang` 这个 attribute 来声明预处理器语言，最常见的用例就是在 `<script>` 中使用 TypeScript：\n\n```html\n<script lang=\"ts\">\n // use TypeScript\n</script>\n```\n\n`lang` 在任意块上都能使用，比如我们可以在 `<style>` 标签中使用 [Sass](https://sass-lang.com/) 或是 `<template>` 中使用 [Pug](https://pugjs.org/api/getting-started.html)：\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://cn.vitejs.dev/guide/features.html#css-pre-processors)\n- [Vue CLI](https://cli.vuejs.org/zh/guide/css.html#%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8)\n- [webpack + vue-loader](https://vue-loader.vuejs.org/zh/guide/pre-processors.html#%E4%BD%BF%E7%94%A8%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8)"
|
|
266
54
|
},
|
|
267
55
|
"values": [
|
|
268
56
|
{
|
|
@@ -278,60 +66,7 @@
|
|
|
278
66
|
"name": "jsx"
|
|
279
67
|
}
|
|
280
68
|
],
|
|
281
|
-
"references":
|
|
282
|
-
{
|
|
283
|
-
"name": "en",
|
|
284
|
-
"url": "https://vuejs.org/api/sfc-spec.html#pre-processors"
|
|
285
|
-
},
|
|
286
|
-
{
|
|
287
|
-
"name": "zh-cn",
|
|
288
|
-
"url": "https://cn.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
289
|
-
},
|
|
290
|
-
{
|
|
291
|
-
"name": "zh-hk",
|
|
292
|
-
"url": "https://zh-hk.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
293
|
-
},
|
|
294
|
-
{
|
|
295
|
-
"name": "ja",
|
|
296
|
-
"url": "https://ja.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
297
|
-
},
|
|
298
|
-
{
|
|
299
|
-
"name": "ua",
|
|
300
|
-
"url": "https://ua.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
301
|
-
},
|
|
302
|
-
{
|
|
303
|
-
"name": "fr",
|
|
304
|
-
"url": "https://fr.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
305
|
-
},
|
|
306
|
-
{
|
|
307
|
-
"name": "ko",
|
|
308
|
-
"url": "https://ko.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
309
|
-
},
|
|
310
|
-
{
|
|
311
|
-
"name": "pt",
|
|
312
|
-
"url": "https://pt.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
313
|
-
},
|
|
314
|
-
{
|
|
315
|
-
"name": "bn",
|
|
316
|
-
"url": "https://bn.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
317
|
-
},
|
|
318
|
-
{
|
|
319
|
-
"name": "it",
|
|
320
|
-
"url": "https://it.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
321
|
-
},
|
|
322
|
-
{
|
|
323
|
-
"name": "cs",
|
|
324
|
-
"url": "https://cs.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
325
|
-
},
|
|
326
|
-
{
|
|
327
|
-
"name": "ru",
|
|
328
|
-
"url": "https://ru.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
329
|
-
},
|
|
330
|
-
{
|
|
331
|
-
"name": "fa",
|
|
332
|
-
"url": "https://fa.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
333
|
-
}
|
|
334
|
-
]
|
|
69
|
+
"references": "api/sfc-spec.html#pre-processors"
|
|
335
70
|
},
|
|
336
71
|
{
|
|
337
72
|
"name": "generic"
|
|
@@ -343,120 +78,14 @@
|
|
|
343
78
|
"kind": "markdown",
|
|
344
79
|
"value": "\n- 每个 `*.vue` 文件最多可以包含一个 `<script setup>`。(不包括一般的 `<script>`)\n\n- 这个脚本块将被预处理为组件的 `setup()` 函数，这意味着它将**为每一个组件实例**都执行。`<script setup>` 中的顶层绑定都将自动暴露给模板。要了解更多细节，请看 [`<script setup>` 的专门文档](https://cn.vuejs.org/api/sfc-script-setup.html)。\n"
|
|
345
80
|
},
|
|
346
|
-
"references":
|
|
347
|
-
{
|
|
348
|
-
"name": "en",
|
|
349
|
-
"url": "https://vuejs.org/api/sfc-spec.html#script-setup"
|
|
350
|
-
},
|
|
351
|
-
{
|
|
352
|
-
"name": "zh-cn",
|
|
353
|
-
"url": "https://cn.vuejs.org/api/sfc-spec.html#script-setup"
|
|
354
|
-
},
|
|
355
|
-
{
|
|
356
|
-
"name": "zh-hk",
|
|
357
|
-
"url": "https://zh-hk.vuejs.org/api/sfc-spec.html#script-setup"
|
|
358
|
-
},
|
|
359
|
-
{
|
|
360
|
-
"name": "ja",
|
|
361
|
-
"url": "https://ja.vuejs.org/api/sfc-spec.html#script-setup"
|
|
362
|
-
},
|
|
363
|
-
{
|
|
364
|
-
"name": "ua",
|
|
365
|
-
"url": "https://ua.vuejs.org/api/sfc-spec.html#script-setup"
|
|
366
|
-
},
|
|
367
|
-
{
|
|
368
|
-
"name": "fr",
|
|
369
|
-
"url": "https://fr.vuejs.org/api/sfc-spec.html#script-setup"
|
|
370
|
-
},
|
|
371
|
-
{
|
|
372
|
-
"name": "ko",
|
|
373
|
-
"url": "https://ko.vuejs.org/api/sfc-spec.html#script-setup"
|
|
374
|
-
},
|
|
375
|
-
{
|
|
376
|
-
"name": "pt",
|
|
377
|
-
"url": "https://pt.vuejs.org/api/sfc-spec.html#script-setup"
|
|
378
|
-
},
|
|
379
|
-
{
|
|
380
|
-
"name": "bn",
|
|
381
|
-
"url": "https://bn.vuejs.org/api/sfc-spec.html#script-setup"
|
|
382
|
-
},
|
|
383
|
-
{
|
|
384
|
-
"name": "it",
|
|
385
|
-
"url": "https://it.vuejs.org/api/sfc-spec.html#script-setup"
|
|
386
|
-
},
|
|
387
|
-
{
|
|
388
|
-
"name": "cs",
|
|
389
|
-
"url": "https://cs.vuejs.org/api/sfc-spec.html#script-setup"
|
|
390
|
-
},
|
|
391
|
-
{
|
|
392
|
-
"name": "ru",
|
|
393
|
-
"url": "https://ru.vuejs.org/api/sfc-spec.html#script-setup"
|
|
394
|
-
},
|
|
395
|
-
{
|
|
396
|
-
"name": "fa",
|
|
397
|
-
"url": "https://fa.vuejs.org/api/sfc-spec.html#script-setup"
|
|
398
|
-
}
|
|
399
|
-
]
|
|
81
|
+
"references": "api/sfc-spec.html#script-setup"
|
|
400
82
|
}
|
|
401
83
|
],
|
|
402
84
|
"description": {
|
|
403
85
|
"kind": "markdown",
|
|
404
86
|
"value": "\n- 每个 `*.vue` 文件最多可以包含一个 `<script>` 块。(使用 [`<script setup>`](https://cn.vuejs.org/api/sfc-script-setup.html) 的情况除外)\n\n- 这个脚本代码块将作为 ES 模块执行。\n\n- **默认导出**应该是 Vue 的组件选项对象，可以是一个对象字面量或是 [defineComponent](https://cn.vuejs.org/api/general.html#definecomponent) 函数的返回值。\n"
|
|
405
87
|
},
|
|
406
|
-
"references":
|
|
407
|
-
{
|
|
408
|
-
"name": "en",
|
|
409
|
-
"url": "https://vuejs.org/api/sfc-spec.html#script"
|
|
410
|
-
},
|
|
411
|
-
{
|
|
412
|
-
"name": "zh-cn",
|
|
413
|
-
"url": "https://cn.vuejs.org/api/sfc-spec.html#script"
|
|
414
|
-
},
|
|
415
|
-
{
|
|
416
|
-
"name": "zh-hk",
|
|
417
|
-
"url": "https://zh-hk.vuejs.org/api/sfc-spec.html#script"
|
|
418
|
-
},
|
|
419
|
-
{
|
|
420
|
-
"name": "ja",
|
|
421
|
-
"url": "https://ja.vuejs.org/api/sfc-spec.html#script"
|
|
422
|
-
},
|
|
423
|
-
{
|
|
424
|
-
"name": "ua",
|
|
425
|
-
"url": "https://ua.vuejs.org/api/sfc-spec.html#script"
|
|
426
|
-
},
|
|
427
|
-
{
|
|
428
|
-
"name": "fr",
|
|
429
|
-
"url": "https://fr.vuejs.org/api/sfc-spec.html#script"
|
|
430
|
-
},
|
|
431
|
-
{
|
|
432
|
-
"name": "ko",
|
|
433
|
-
"url": "https://ko.vuejs.org/api/sfc-spec.html#script"
|
|
434
|
-
},
|
|
435
|
-
{
|
|
436
|
-
"name": "pt",
|
|
437
|
-
"url": "https://pt.vuejs.org/api/sfc-spec.html#script"
|
|
438
|
-
},
|
|
439
|
-
{
|
|
440
|
-
"name": "bn",
|
|
441
|
-
"url": "https://bn.vuejs.org/api/sfc-spec.html#script"
|
|
442
|
-
},
|
|
443
|
-
{
|
|
444
|
-
"name": "it",
|
|
445
|
-
"url": "https://it.vuejs.org/api/sfc-spec.html#script"
|
|
446
|
-
},
|
|
447
|
-
{
|
|
448
|
-
"name": "cs",
|
|
449
|
-
"url": "https://cs.vuejs.org/api/sfc-spec.html#script"
|
|
450
|
-
},
|
|
451
|
-
{
|
|
452
|
-
"name": "ru",
|
|
453
|
-
"url": "https://ru.vuejs.org/api/sfc-spec.html#script"
|
|
454
|
-
},
|
|
455
|
-
{
|
|
456
|
-
"name": "fa",
|
|
457
|
-
"url": "https://fa.vuejs.org/api/sfc-spec.html#script"
|
|
458
|
-
}
|
|
459
|
-
]
|
|
88
|
+
"references": "api/sfc-spec.html#script"
|
|
460
89
|
},
|
|
461
90
|
{
|
|
462
91
|
"name": "script setup",
|
|
@@ -465,60 +94,7 @@
|
|
|
465
94
|
"kind": "markdown",
|
|
466
95
|
"value": "\n- 每个 `*.vue` 文件最多可以包含一个 `<script setup>`。(不包括一般的 `<script>`)\n\n- 这个脚本块将被预处理为组件的 `setup()` 函数，这意味着它将**为每一个组件实例**都执行。`<script setup>` 中的顶层绑定都将自动暴露给模板。要了解更多细节，请看 [`<script setup>` 的专门文档](https://cn.vuejs.org/api/sfc-script-setup.html)。\n"
|
|
467
96
|
},
|
|
468
|
-
"references":
|
|
469
|
-
{
|
|
470
|
-
"name": "en",
|
|
471
|
-
"url": "https://vuejs.org/api/sfc-spec.html#script-setup"
|
|
472
|
-
},
|
|
473
|
-
{
|
|
474
|
-
"name": "zh-cn",
|
|
475
|
-
"url": "https://cn.vuejs.org/api/sfc-spec.html#script-setup"
|
|
476
|
-
},
|
|
477
|
-
{
|
|
478
|
-
"name": "zh-hk",
|
|
479
|
-
"url": "https://zh-hk.vuejs.org/api/sfc-spec.html#script-setup"
|
|
480
|
-
},
|
|
481
|
-
{
|
|
482
|
-
"name": "ja",
|
|
483
|
-
"url": "https://ja.vuejs.org/api/sfc-spec.html#script-setup"
|
|
484
|
-
},
|
|
485
|
-
{
|
|
486
|
-
"name": "ua",
|
|
487
|
-
"url": "https://ua.vuejs.org/api/sfc-spec.html#script-setup"
|
|
488
|
-
},
|
|
489
|
-
{
|
|
490
|
-
"name": "fr",
|
|
491
|
-
"url": "https://fr.vuejs.org/api/sfc-spec.html#script-setup"
|
|
492
|
-
},
|
|
493
|
-
{
|
|
494
|
-
"name": "ko",
|
|
495
|
-
"url": "https://ko.vuejs.org/api/sfc-spec.html#script-setup"
|
|
496
|
-
},
|
|
497
|
-
{
|
|
498
|
-
"name": "pt",
|
|
499
|
-
"url": "https://pt.vuejs.org/api/sfc-spec.html#script-setup"
|
|
500
|
-
},
|
|
501
|
-
{
|
|
502
|
-
"name": "bn",
|
|
503
|
-
"url": "https://bn.vuejs.org/api/sfc-spec.html#script-setup"
|
|
504
|
-
},
|
|
505
|
-
{
|
|
506
|
-
"name": "it",
|
|
507
|
-
"url": "https://it.vuejs.org/api/sfc-spec.html#script-setup"
|
|
508
|
-
},
|
|
509
|
-
{
|
|
510
|
-
"name": "cs",
|
|
511
|
-
"url": "https://cs.vuejs.org/api/sfc-spec.html#script-setup"
|
|
512
|
-
},
|
|
513
|
-
{
|
|
514
|
-
"name": "ru",
|
|
515
|
-
"url": "https://ru.vuejs.org/api/sfc-spec.html#script-setup"
|
|
516
|
-
},
|
|
517
|
-
{
|
|
518
|
-
"name": "fa",
|
|
519
|
-
"url": "https://fa.vuejs.org/api/sfc-spec.html#script-setup"
|
|
520
|
-
}
|
|
521
|
-
]
|
|
97
|
+
"references": "api/sfc-spec.html#script-setup"
|
|
522
98
|
},
|
|
523
99
|
{
|
|
524
100
|
"name": "style",
|
|
@@ -527,68 +103,15 @@
|
|
|
527
103
|
"name": "src",
|
|
528
104
|
"description": {
|
|
529
105
|
"kind": "markdown",
|
|
530
|
-
"value": "
|
|
106
|
+
"value": "如果你更喜欢将 `*.vue` 组件分散到多个文件中，可以为一个语块使用 `src` 这个 attribute 来导入一个外部文件：\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` 导入和 JS 模块导入遵循相同的路径解析规则，这意味着：\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```"
|
|
531
107
|
},
|
|
532
|
-
"references":
|
|
533
|
-
{
|
|
534
|
-
"name": "en",
|
|
535
|
-
"url": "https://vuejs.org/api/sfc-spec.html#src-imports"
|
|
536
|
-
},
|
|
537
|
-
{
|
|
538
|
-
"name": "zh-cn",
|
|
539
|
-
"url": "https://cn.vuejs.org/api/sfc-spec.html#src-imports"
|
|
540
|
-
},
|
|
541
|
-
{
|
|
542
|
-
"name": "zh-hk",
|
|
543
|
-
"url": "https://zh-hk.vuejs.org/api/sfc-spec.html#src-imports"
|
|
544
|
-
},
|
|
545
|
-
{
|
|
546
|
-
"name": "ja",
|
|
547
|
-
"url": "https://ja.vuejs.org/api/sfc-spec.html#src-imports"
|
|
548
|
-
},
|
|
549
|
-
{
|
|
550
|
-
"name": "ua",
|
|
551
|
-
"url": "https://ua.vuejs.org/api/sfc-spec.html#src-imports"
|
|
552
|
-
},
|
|
553
|
-
{
|
|
554
|
-
"name": "fr",
|
|
555
|
-
"url": "https://fr.vuejs.org/api/sfc-spec.html#src-imports"
|
|
556
|
-
},
|
|
557
|
-
{
|
|
558
|
-
"name": "ko",
|
|
559
|
-
"url": "https://ko.vuejs.org/api/sfc-spec.html#src-imports"
|
|
560
|
-
},
|
|
561
|
-
{
|
|
562
|
-
"name": "pt",
|
|
563
|
-
"url": "https://pt.vuejs.org/api/sfc-spec.html#src-imports"
|
|
564
|
-
},
|
|
565
|
-
{
|
|
566
|
-
"name": "bn",
|
|
567
|
-
"url": "https://bn.vuejs.org/api/sfc-spec.html#src-imports"
|
|
568
|
-
},
|
|
569
|
-
{
|
|
570
|
-
"name": "it",
|
|
571
|
-
"url": "https://it.vuejs.org/api/sfc-spec.html#src-imports"
|
|
572
|
-
},
|
|
573
|
-
{
|
|
574
|
-
"name": "cs",
|
|
575
|
-
"url": "https://cs.vuejs.org/api/sfc-spec.html#src-imports"
|
|
576
|
-
},
|
|
577
|
-
{
|
|
578
|
-
"name": "ru",
|
|
579
|
-
"url": "https://ru.vuejs.org/api/sfc-spec.html#src-imports"
|
|
580
|
-
},
|
|
581
|
-
{
|
|
582
|
-
"name": "fa",
|
|
583
|
-
"url": "https://fa.vuejs.org/api/sfc-spec.html#src-imports"
|
|
584
|
-
}
|
|
585
|
-
]
|
|
108
|
+
"references": "api/sfc-spec.html#src-imports"
|
|
586
109
|
},
|
|
587
110
|
{
|
|
588
111
|
"name": "lang",
|
|
589
112
|
"description": {
|
|
590
113
|
"kind": "markdown",
|
|
591
|
-
"value": "
|
|
114
|
+
"value": "代码块可以使用 `lang` 这个 attribute 来声明预处理器语言，最常见的用例就是在 `<script>` 中使用 TypeScript：\n\n```html\n<script lang=\"ts\">\n // use TypeScript\n</script>\n```\n\n`lang` 在任意块上都能使用，比如我们可以在 `<style>` 标签中使用 [Sass](https://sass-lang.com/) 或是 `<template>` 中使用 [Pug](https://pugjs.org/api/getting-started.html)：\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://cn.vitejs.dev/guide/features.html#css-pre-processors)\n- [Vue CLI](https://cli.vuejs.org/zh/guide/css.html#%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8)\n- [webpack + vue-loader](https://vue-loader.vuejs.org/zh/guide/pre-processors.html#%E4%BD%BF%E7%94%A8%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8)"
|
|
592
115
|
},
|
|
593
116
|
"values": [
|
|
594
117
|
{
|
|
@@ -610,244 +133,32 @@
|
|
|
610
133
|
"name": "sass"
|
|
611
134
|
}
|
|
612
135
|
],
|
|
613
|
-
"references":
|
|
614
|
-
{
|
|
615
|
-
"name": "en",
|
|
616
|
-
"url": "https://vuejs.org/api/sfc-spec.html#pre-processors"
|
|
617
|
-
},
|
|
618
|
-
{
|
|
619
|
-
"name": "zh-cn",
|
|
620
|
-
"url": "https://cn.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
621
|
-
},
|
|
622
|
-
{
|
|
623
|
-
"name": "zh-hk",
|
|
624
|
-
"url": "https://zh-hk.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
625
|
-
},
|
|
626
|
-
{
|
|
627
|
-
"name": "ja",
|
|
628
|
-
"url": "https://ja.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
629
|
-
},
|
|
630
|
-
{
|
|
631
|
-
"name": "ua",
|
|
632
|
-
"url": "https://ua.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
633
|
-
},
|
|
634
|
-
{
|
|
635
|
-
"name": "fr",
|
|
636
|
-
"url": "https://fr.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
637
|
-
},
|
|
638
|
-
{
|
|
639
|
-
"name": "ko",
|
|
640
|
-
"url": "https://ko.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
641
|
-
},
|
|
642
|
-
{
|
|
643
|
-
"name": "pt",
|
|
644
|
-
"url": "https://pt.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
645
|
-
},
|
|
646
|
-
{
|
|
647
|
-
"name": "bn",
|
|
648
|
-
"url": "https://bn.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
649
|
-
},
|
|
650
|
-
{
|
|
651
|
-
"name": "it",
|
|
652
|
-
"url": "https://it.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
653
|
-
},
|
|
654
|
-
{
|
|
655
|
-
"name": "cs",
|
|
656
|
-
"url": "https://cs.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
657
|
-
},
|
|
658
|
-
{
|
|
659
|
-
"name": "ru",
|
|
660
|
-
"url": "https://ru.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
661
|
-
},
|
|
662
|
-
{
|
|
663
|
-
"name": "fa",
|
|
664
|
-
"url": "https://fa.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
665
|
-
}
|
|
666
|
-
]
|
|
136
|
+
"references": "api/sfc-spec.html#pre-processors"
|
|
667
137
|
},
|
|
668
138
|
{
|
|
669
139
|
"name": "scoped",
|
|
670
140
|
"valueSet": "v",
|
|
671
141
|
"description": {
|
|
672
142
|
"kind": "markdown",
|
|
673
|
-
"value": "
|
|
143
|
+
"value": "当 `<style>` 标签带有 `scoped` attribute 的时候，它的 CSS 只会影响当前组件的元素，和 Shadow DOM 中的样式封装类似。使用时有一些注意事项，不过好处是不需要任何的 polyfill。它的实现方式是通过 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` 后，父组件的样式将不会渗透到子组件中。不过，子组件的根节点会同时被父组件的作用域样式和子组件的作用域样式影响。这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式。\n\n### 深度选择器 \n\n处于 `scoped` 样式中的选择器如果想要做更“深度”的选择，也即：影响到子组件，可以使用 `:deep()` 这个伪类：\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 内容不会被作用域样式影响，但你仍然可以使用深度选择器来设置其样式。\n:::\n\n### 插槽选择器 \n\n默认情况下，作用域样式不会影响到 `<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你也可以在同一个组件中同时包含作用域样式和非作用域样式：\n\n```vue\n<style>\n/* 全局样式 */\n</style>\n\n<style scoped>\n/* 局部样式 */\n</style>\n```\n\n### 作用域样式须知 \n\n- **作用域样式并没有消除对 class 的需求**。由于浏览器渲染各种各样 CSS 选择器的方式，`p { color: red }` 结合作用域样式使用时 (即当与 attribute 选择器组合的时候) 会慢很多倍。如果你使用 class 或者 id 来替代，例如 `.example { color: red }`，那你几乎就可以避免性能的损失。\n\n- **小心递归组件中的后代选择器**！对于一个使用了 `.a .b` 选择器的样式规则来说，如果匹配到 `.a` 的元素包含了一个递归的子组件，那么所有的在那个子组件中的 `.b` 都会匹配到这条样式规则。"
|
|
674
144
|
},
|
|
675
|
-
"references":
|
|
676
|
-
{
|
|
677
|
-
"name": "en",
|
|
678
|
-
"url": "https://vuejs.org/api/sfc-css-features.html#scoped-css"
|
|
679
|
-
},
|
|
680
|
-
{
|
|
681
|
-
"name": "zh-cn",
|
|
682
|
-
"url": "https://cn.vuejs.org/api/sfc-css-features.html#scoped-css"
|
|
683
|
-
},
|
|
684
|
-
{
|
|
685
|
-
"name": "zh-hk",
|
|
686
|
-
"url": "https://zh-hk.vuejs.org/api/sfc-css-features.html#scoped-css"
|
|
687
|
-
},
|
|
688
|
-
{
|
|
689
|
-
"name": "ja",
|
|
690
|
-
"url": "https://ja.vuejs.org/api/sfc-css-features.html#scoped-css"
|
|
691
|
-
},
|
|
692
|
-
{
|
|
693
|
-
"name": "ua",
|
|
694
|
-
"url": "https://ua.vuejs.org/api/sfc-css-features.html#scoped-css"
|
|
695
|
-
},
|
|
696
|
-
{
|
|
697
|
-
"name": "fr",
|
|
698
|
-
"url": "https://fr.vuejs.org/api/sfc-css-features.html#scoped-css"
|
|
699
|
-
},
|
|
700
|
-
{
|
|
701
|
-
"name": "ko",
|
|
702
|
-
"url": "https://ko.vuejs.org/api/sfc-css-features.html#scoped-css"
|
|
703
|
-
},
|
|
704
|
-
{
|
|
705
|
-
"name": "pt",
|
|
706
|
-
"url": "https://pt.vuejs.org/api/sfc-css-features.html#scoped-css"
|
|
707
|
-
},
|
|
708
|
-
{
|
|
709
|
-
"name": "bn",
|
|
710
|
-
"url": "https://bn.vuejs.org/api/sfc-css-features.html#scoped-css"
|
|
711
|
-
},
|
|
712
|
-
{
|
|
713
|
-
"name": "it",
|
|
714
|
-
"url": "https://it.vuejs.org/api/sfc-css-features.html#scoped-css"
|
|
715
|
-
},
|
|
716
|
-
{
|
|
717
|
-
"name": "cs",
|
|
718
|
-
"url": "https://cs.vuejs.org/api/sfc-css-features.html#scoped-css"
|
|
719
|
-
},
|
|
720
|
-
{
|
|
721
|
-
"name": "ru",
|
|
722
|
-
"url": "https://ru.vuejs.org/api/sfc-css-features.html#scoped-css"
|
|
723
|
-
},
|
|
724
|
-
{
|
|
725
|
-
"name": "fa",
|
|
726
|
-
"url": "https://fa.vuejs.org/api/sfc-css-features.html#scoped-css"
|
|
727
|
-
}
|
|
728
|
-
]
|
|
145
|
+
"references": "api/sfc-css-features.html#scoped-css"
|
|
729
146
|
},
|
|
730
147
|
{
|
|
731
148
|
"name": "module",
|
|
732
149
|
"valueSet": "v",
|
|
733
150
|
"description": {
|
|
734
151
|
"kind": "markdown",
|
|
735
|
-
"value": "
|
|
152
|
+
"value": "一个 `<style module>` 标签会被编译为 [CSS Modules](https://github.com/css-modules/css-modules) 并且将生成的 CSS class 作为 `$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得出的 class 将被哈希化以避免冲突，实现了同样的将 CSS 仅作用于当前组件的效果。\n\n参考 [CSS Modules spec](https://github.com/css-modules/css-modules) 以查看更多详情，例如 [global exceptions](https://github.com/css-modules/css-modules/blob/master/docs/composition.md#exceptions) 和 [composition](https://github.com/css-modules/css-modules/blob/master/docs/composition.md#composition)。\n\n### 自定义注入名称 \n\n你可以通过给 `module` attribute 一个值来自定义注入 class 对象的属性名：\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### 与组合式 API 一同使用 \n\n可以通过 `useCssModule` API 在 `setup()` 和 `<script setup>` 中访问注入的 class。对于使用了自定义注入名称的 `<style module>` 块，`useCssModule` 接收一个匹配的 `module` attribute 值作为第一个参数：\n\n```js\nimport { useCssModule } from 'vue'\n\n// 在 setup() 作用域中...\n// 默认情况下，返回 <style module> 的 class\nuseCssModule()\n\n// 具名情况下，返回 <style module=\"classes\"> 的 class\nuseCssModule('classes')\n```"
|
|
736
153
|
},
|
|
737
|
-
"references":
|
|
738
|
-
{
|
|
739
|
-
"name": "en",
|
|
740
|
-
"url": "https://vuejs.org/api/sfc-css-features.html#css-modules"
|
|
741
|
-
},
|
|
742
|
-
{
|
|
743
|
-
"name": "zh-cn",
|
|
744
|
-
"url": "https://cn.vuejs.org/api/sfc-css-features.html#css-modules"
|
|
745
|
-
},
|
|
746
|
-
{
|
|
747
|
-
"name": "zh-hk",
|
|
748
|
-
"url": "https://zh-hk.vuejs.org/api/sfc-css-features.html#css-modules"
|
|
749
|
-
},
|
|
750
|
-
{
|
|
751
|
-
"name": "ja",
|
|
752
|
-
"url": "https://ja.vuejs.org/api/sfc-css-features.html#css-modules"
|
|
753
|
-
},
|
|
754
|
-
{
|
|
755
|
-
"name": "ua",
|
|
756
|
-
"url": "https://ua.vuejs.org/api/sfc-css-features.html#css-modules"
|
|
757
|
-
},
|
|
758
|
-
{
|
|
759
|
-
"name": "fr",
|
|
760
|
-
"url": "https://fr.vuejs.org/api/sfc-css-features.html#css-modules"
|
|
761
|
-
},
|
|
762
|
-
{
|
|
763
|
-
"name": "ko",
|
|
764
|
-
"url": "https://ko.vuejs.org/api/sfc-css-features.html#css-modules"
|
|
765
|
-
},
|
|
766
|
-
{
|
|
767
|
-
"name": "pt",
|
|
768
|
-
"url": "https://pt.vuejs.org/api/sfc-css-features.html#css-modules"
|
|
769
|
-
},
|
|
770
|
-
{
|
|
771
|
-
"name": "bn",
|
|
772
|
-
"url": "https://bn.vuejs.org/api/sfc-css-features.html#css-modules"
|
|
773
|
-
},
|
|
774
|
-
{
|
|
775
|
-
"name": "it",
|
|
776
|
-
"url": "https://it.vuejs.org/api/sfc-css-features.html#css-modules"
|
|
777
|
-
},
|
|
778
|
-
{
|
|
779
|
-
"name": "cs",
|
|
780
|
-
"url": "https://cs.vuejs.org/api/sfc-css-features.html#css-modules"
|
|
781
|
-
},
|
|
782
|
-
{
|
|
783
|
-
"name": "ru",
|
|
784
|
-
"url": "https://ru.vuejs.org/api/sfc-css-features.html#css-modules"
|
|
785
|
-
},
|
|
786
|
-
{
|
|
787
|
-
"name": "fa",
|
|
788
|
-
"url": "https://fa.vuejs.org/api/sfc-css-features.html#css-modules"
|
|
789
|
-
}
|
|
790
|
-
]
|
|
154
|
+
"references": "api/sfc-css-features.html#css-modules"
|
|
791
155
|
}
|
|
792
156
|
],
|
|
793
157
|
"description": {
|
|
794
158
|
"kind": "markdown",
|
|
795
|
-
"value": "\n- 每个 `*.vue` 文件可以包含多个 `<style>` 标签。\n\n- 一个 `<style>` 标签可以使用 `scoped` 或 `module` attribute (查看
|
|
159
|
+
"value": "\n- 每个 `*.vue` 文件可以包含多个 `<style>` 标签。\n\n- 一个 `<style>` 标签可以使用 `scoped` 或 `module` attribute (查看[单文件组件样式功能](https://cn.vuejs.org/api/sfc-css-features.html)了解更多细节) 来帮助封装当前组件的样式。使用了不同封装模式的多个 `<style>` 标签可以被混合入同一个组件。\n"
|
|
796
160
|
},
|
|
797
|
-
"references":
|
|
798
|
-
{
|
|
799
|
-
"name": "en",
|
|
800
|
-
"url": "https://vuejs.org/api/sfc-spec.html#style"
|
|
801
|
-
},
|
|
802
|
-
{
|
|
803
|
-
"name": "zh-cn",
|
|
804
|
-
"url": "https://cn.vuejs.org/api/sfc-spec.html#style"
|
|
805
|
-
},
|
|
806
|
-
{
|
|
807
|
-
"name": "zh-hk",
|
|
808
|
-
"url": "https://zh-hk.vuejs.org/api/sfc-spec.html#style"
|
|
809
|
-
},
|
|
810
|
-
{
|
|
811
|
-
"name": "ja",
|
|
812
|
-
"url": "https://ja.vuejs.org/api/sfc-spec.html#style"
|
|
813
|
-
},
|
|
814
|
-
{
|
|
815
|
-
"name": "ua",
|
|
816
|
-
"url": "https://ua.vuejs.org/api/sfc-spec.html#style"
|
|
817
|
-
},
|
|
818
|
-
{
|
|
819
|
-
"name": "fr",
|
|
820
|
-
"url": "https://fr.vuejs.org/api/sfc-spec.html#style"
|
|
821
|
-
},
|
|
822
|
-
{
|
|
823
|
-
"name": "ko",
|
|
824
|
-
"url": "https://ko.vuejs.org/api/sfc-spec.html#style"
|
|
825
|
-
},
|
|
826
|
-
{
|
|
827
|
-
"name": "pt",
|
|
828
|
-
"url": "https://pt.vuejs.org/api/sfc-spec.html#style"
|
|
829
|
-
},
|
|
830
|
-
{
|
|
831
|
-
"name": "bn",
|
|
832
|
-
"url": "https://bn.vuejs.org/api/sfc-spec.html#style"
|
|
833
|
-
},
|
|
834
|
-
{
|
|
835
|
-
"name": "it",
|
|
836
|
-
"url": "https://it.vuejs.org/api/sfc-spec.html#style"
|
|
837
|
-
},
|
|
838
|
-
{
|
|
839
|
-
"name": "cs",
|
|
840
|
-
"url": "https://cs.vuejs.org/api/sfc-spec.html#style"
|
|
841
|
-
},
|
|
842
|
-
{
|
|
843
|
-
"name": "ru",
|
|
844
|
-
"url": "https://ru.vuejs.org/api/sfc-spec.html#style"
|
|
845
|
-
},
|
|
846
|
-
{
|
|
847
|
-
"name": "fa",
|
|
848
|
-
"url": "https://fa.vuejs.org/api/sfc-spec.html#style"
|
|
849
|
-
}
|
|
850
|
-
]
|
|
161
|
+
"references": "api/sfc-spec.html#style"
|
|
851
162
|
},
|
|
852
163
|
{
|
|
853
164
|
"name": "自定义块",
|
|
@@ -856,122 +167,16 @@
|
|
|
856
167
|
"name": "src",
|
|
857
168
|
"description": {
|
|
858
169
|
"kind": "markdown",
|
|
859
|
-
"value": "
|
|
170
|
+
"value": "如果你更喜欢将 `*.vue` 组件分散到多个文件中，可以为一个语块使用 `src` 这个 attribute 来导入一个外部文件：\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` 导入和 JS 模块导入遵循相同的路径解析规则，这意味着：\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```"
|
|
860
171
|
},
|
|
861
|
-
"references":
|
|
862
|
-
{
|
|
863
|
-
"name": "en",
|
|
864
|
-
"url": "https://vuejs.org/api/sfc-spec.html#src-imports"
|
|
865
|
-
},
|
|
866
|
-
{
|
|
867
|
-
"name": "zh-cn",
|
|
868
|
-
"url": "https://cn.vuejs.org/api/sfc-spec.html#src-imports"
|
|
869
|
-
},
|
|
870
|
-
{
|
|
871
|
-
"name": "zh-hk",
|
|
872
|
-
"url": "https://zh-hk.vuejs.org/api/sfc-spec.html#src-imports"
|
|
873
|
-
},
|
|
874
|
-
{
|
|
875
|
-
"name": "ja",
|
|
876
|
-
"url": "https://ja.vuejs.org/api/sfc-spec.html#src-imports"
|
|
877
|
-
},
|
|
878
|
-
{
|
|
879
|
-
"name": "ua",
|
|
880
|
-
"url": "https://ua.vuejs.org/api/sfc-spec.html#src-imports"
|
|
881
|
-
},
|
|
882
|
-
{
|
|
883
|
-
"name": "fr",
|
|
884
|
-
"url": "https://fr.vuejs.org/api/sfc-spec.html#src-imports"
|
|
885
|
-
},
|
|
886
|
-
{
|
|
887
|
-
"name": "ko",
|
|
888
|
-
"url": "https://ko.vuejs.org/api/sfc-spec.html#src-imports"
|
|
889
|
-
},
|
|
890
|
-
{
|
|
891
|
-
"name": "pt",
|
|
892
|
-
"url": "https://pt.vuejs.org/api/sfc-spec.html#src-imports"
|
|
893
|
-
},
|
|
894
|
-
{
|
|
895
|
-
"name": "bn",
|
|
896
|
-
"url": "https://bn.vuejs.org/api/sfc-spec.html#src-imports"
|
|
897
|
-
},
|
|
898
|
-
{
|
|
899
|
-
"name": "it",
|
|
900
|
-
"url": "https://it.vuejs.org/api/sfc-spec.html#src-imports"
|
|
901
|
-
},
|
|
902
|
-
{
|
|
903
|
-
"name": "cs",
|
|
904
|
-
"url": "https://cs.vuejs.org/api/sfc-spec.html#src-imports"
|
|
905
|
-
},
|
|
906
|
-
{
|
|
907
|
-
"name": "ru",
|
|
908
|
-
"url": "https://ru.vuejs.org/api/sfc-spec.html#src-imports"
|
|
909
|
-
},
|
|
910
|
-
{
|
|
911
|
-
"name": "fa",
|
|
912
|
-
"url": "https://fa.vuejs.org/api/sfc-spec.html#src-imports"
|
|
913
|
-
}
|
|
914
|
-
]
|
|
172
|
+
"references": "api/sfc-spec.html#src-imports"
|
|
915
173
|
}
|
|
916
174
|
],
|
|
917
175
|
"description": {
|
|
918
176
|
"kind": "markdown",
|
|
919
|
-
"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自定义块的处理需要依赖工具链。如果你想要在构建中集成你的自定义语块，请参见
|
|
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自定义块的处理需要依赖工具链。如果你想要在构建中集成你的自定义语块，请参见[单文件组件自定义块集成工具链指南](https://cn.vuejs.org/guide/scaling-up/tooling.html#sfc-custom-block-integrations)获取更多细节。\n"
|
|
920
178
|
},
|
|
921
|
-
"references":
|
|
922
|
-
{
|
|
923
|
-
"name": "en",
|
|
924
|
-
"url": "https://vuejs.org/api/sfc-spec.html#自定义块"
|
|
925
|
-
},
|
|
926
|
-
{
|
|
927
|
-
"name": "zh-cn",
|
|
928
|
-
"url": "https://cn.vuejs.org/api/sfc-spec.html#自定义块"
|
|
929
|
-
},
|
|
930
|
-
{
|
|
931
|
-
"name": "zh-hk",
|
|
932
|
-
"url": "https://zh-hk.vuejs.org/api/sfc-spec.html#自定义块"
|
|
933
|
-
},
|
|
934
|
-
{
|
|
935
|
-
"name": "ja",
|
|
936
|
-
"url": "https://ja.vuejs.org/api/sfc-spec.html#自定义块"
|
|
937
|
-
},
|
|
938
|
-
{
|
|
939
|
-
"name": "ua",
|
|
940
|
-
"url": "https://ua.vuejs.org/api/sfc-spec.html#自定义块"
|
|
941
|
-
},
|
|
942
|
-
{
|
|
943
|
-
"name": "fr",
|
|
944
|
-
"url": "https://fr.vuejs.org/api/sfc-spec.html#自定义块"
|
|
945
|
-
},
|
|
946
|
-
{
|
|
947
|
-
"name": "ko",
|
|
948
|
-
"url": "https://ko.vuejs.org/api/sfc-spec.html#自定义块"
|
|
949
|
-
},
|
|
950
|
-
{
|
|
951
|
-
"name": "pt",
|
|
952
|
-
"url": "https://pt.vuejs.org/api/sfc-spec.html#自定义块"
|
|
953
|
-
},
|
|
954
|
-
{
|
|
955
|
-
"name": "bn",
|
|
956
|
-
"url": "https://bn.vuejs.org/api/sfc-spec.html#自定义块"
|
|
957
|
-
},
|
|
958
|
-
{
|
|
959
|
-
"name": "it",
|
|
960
|
-
"url": "https://it.vuejs.org/api/sfc-spec.html#自定义块"
|
|
961
|
-
},
|
|
962
|
-
{
|
|
963
|
-
"name": "cs",
|
|
964
|
-
"url": "https://cs.vuejs.org/api/sfc-spec.html#自定义块"
|
|
965
|
-
},
|
|
966
|
-
{
|
|
967
|
-
"name": "ru",
|
|
968
|
-
"url": "https://ru.vuejs.org/api/sfc-spec.html#自定义块"
|
|
969
|
-
},
|
|
970
|
-
{
|
|
971
|
-
"name": "fa",
|
|
972
|
-
"url": "https://fa.vuejs.org/api/sfc-spec.html#自定义块"
|
|
973
|
-
}
|
|
974
|
-
]
|
|
179
|
+
"references": "api/sfc-spec.html#自定义块"
|
|
975
180
|
}
|
|
976
181
|
],
|
|
977
182
|
"globalAttributes": [
|
|
@@ -979,124 +184,18 @@
|
|
|
979
184
|
"name": "lang",
|
|
980
185
|
"description": {
|
|
981
186
|
"kind": "markdown",
|
|
982
|
-
"value": "
|
|
187
|
+
"value": "代码块可以使用 `lang` 这个 attribute 来声明预处理器语言，最常见的用例就是在 `<script>` 中使用 TypeScript：\n\n```html\n<script lang=\"ts\">\n // use TypeScript\n</script>\n```\n\n`lang` 在任意块上都能使用，比如我们可以在 `<style>` 标签中使用 [Sass](https://sass-lang.com/) 或是 `<template>` 中使用 [Pug](https://pugjs.org/api/getting-started.html)：\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://cn.vitejs.dev/guide/features.html#css-pre-processors)\n- [Vue CLI](https://cli.vuejs.org/zh/guide/css.html#%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8)\n- [webpack + vue-loader](https://vue-loader.vuejs.org/zh/guide/pre-processors.html#%E4%BD%BF%E7%94%A8%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8)"
|
|
983
188
|
},
|
|
984
189
|
"values": [],
|
|
985
|
-
"references":
|
|
986
|
-
{
|
|
987
|
-
"name": "en",
|
|
988
|
-
"url": "https://vuejs.org/api/sfc-spec.html#pre-processors"
|
|
989
|
-
},
|
|
990
|
-
{
|
|
991
|
-
"name": "zh-cn",
|
|
992
|
-
"url": "https://cn.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
993
|
-
},
|
|
994
|
-
{
|
|
995
|
-
"name": "zh-hk",
|
|
996
|
-
"url": "https://zh-hk.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
997
|
-
},
|
|
998
|
-
{
|
|
999
|
-
"name": "ja",
|
|
1000
|
-
"url": "https://ja.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
1001
|
-
},
|
|
1002
|
-
{
|
|
1003
|
-
"name": "ua",
|
|
1004
|
-
"url": "https://ua.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
1005
|
-
},
|
|
1006
|
-
{
|
|
1007
|
-
"name": "fr",
|
|
1008
|
-
"url": "https://fr.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
1009
|
-
},
|
|
1010
|
-
{
|
|
1011
|
-
"name": "ko",
|
|
1012
|
-
"url": "https://ko.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
1013
|
-
},
|
|
1014
|
-
{
|
|
1015
|
-
"name": "pt",
|
|
1016
|
-
"url": "https://pt.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
1017
|
-
},
|
|
1018
|
-
{
|
|
1019
|
-
"name": "bn",
|
|
1020
|
-
"url": "https://bn.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
1021
|
-
},
|
|
1022
|
-
{
|
|
1023
|
-
"name": "it",
|
|
1024
|
-
"url": "https://it.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
1025
|
-
},
|
|
1026
|
-
{
|
|
1027
|
-
"name": "cs",
|
|
1028
|
-
"url": "https://cs.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
1029
|
-
},
|
|
1030
|
-
{
|
|
1031
|
-
"name": "ru",
|
|
1032
|
-
"url": "https://ru.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
1033
|
-
},
|
|
1034
|
-
{
|
|
1035
|
-
"name": "fa",
|
|
1036
|
-
"url": "https://fa.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
1037
|
-
}
|
|
1038
|
-
]
|
|
190
|
+
"references": "api/sfc-spec.html#pre-processors"
|
|
1039
191
|
},
|
|
1040
192
|
{
|
|
1041
193
|
"name": "src",
|
|
1042
194
|
"description": {
|
|
1043
195
|
"kind": "markdown",
|
|
1044
|
-
"value": "
|
|
196
|
+
"value": "如果你更喜欢将 `*.vue` 组件分散到多个文件中，可以为一个语块使用 `src` 这个 attribute 来导入一个外部文件：\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` 导入和 JS 模块导入遵循相同的路径解析规则，这意味着：\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```"
|
|
1045
197
|
},
|
|
1046
|
-
"references":
|
|
1047
|
-
{
|
|
1048
|
-
"name": "en",
|
|
1049
|
-
"url": "https://vuejs.org/api/sfc-spec.html#src-imports"
|
|
1050
|
-
},
|
|
1051
|
-
{
|
|
1052
|
-
"name": "zh-cn",
|
|
1053
|
-
"url": "https://cn.vuejs.org/api/sfc-spec.html#src-imports"
|
|
1054
|
-
},
|
|
1055
|
-
{
|
|
1056
|
-
"name": "zh-hk",
|
|
1057
|
-
"url": "https://zh-hk.vuejs.org/api/sfc-spec.html#src-imports"
|
|
1058
|
-
},
|
|
1059
|
-
{
|
|
1060
|
-
"name": "ja",
|
|
1061
|
-
"url": "https://ja.vuejs.org/api/sfc-spec.html#src-imports"
|
|
1062
|
-
},
|
|
1063
|
-
{
|
|
1064
|
-
"name": "ua",
|
|
1065
|
-
"url": "https://ua.vuejs.org/api/sfc-spec.html#src-imports"
|
|
1066
|
-
},
|
|
1067
|
-
{
|
|
1068
|
-
"name": "fr",
|
|
1069
|
-
"url": "https://fr.vuejs.org/api/sfc-spec.html#src-imports"
|
|
1070
|
-
},
|
|
1071
|
-
{
|
|
1072
|
-
"name": "ko",
|
|
1073
|
-
"url": "https://ko.vuejs.org/api/sfc-spec.html#src-imports"
|
|
1074
|
-
},
|
|
1075
|
-
{
|
|
1076
|
-
"name": "pt",
|
|
1077
|
-
"url": "https://pt.vuejs.org/api/sfc-spec.html#src-imports"
|
|
1078
|
-
},
|
|
1079
|
-
{
|
|
1080
|
-
"name": "bn",
|
|
1081
|
-
"url": "https://bn.vuejs.org/api/sfc-spec.html#src-imports"
|
|
1082
|
-
},
|
|
1083
|
-
{
|
|
1084
|
-
"name": "it",
|
|
1085
|
-
"url": "https://it.vuejs.org/api/sfc-spec.html#src-imports"
|
|
1086
|
-
},
|
|
1087
|
-
{
|
|
1088
|
-
"name": "cs",
|
|
1089
|
-
"url": "https://cs.vuejs.org/api/sfc-spec.html#src-imports"
|
|
1090
|
-
},
|
|
1091
|
-
{
|
|
1092
|
-
"name": "ru",
|
|
1093
|
-
"url": "https://ru.vuejs.org/api/sfc-spec.html#src-imports"
|
|
1094
|
-
},
|
|
1095
|
-
{
|
|
1096
|
-
"name": "fa",
|
|
1097
|
-
"url": "https://fa.vuejs.org/api/sfc-spec.html#src-imports"
|
|
1098
|
-
}
|
|
1099
|
-
]
|
|
198
|
+
"references": "api/sfc-spec.html#src-imports"
|
|
1100
199
|
}
|
|
1101
200
|
]
|
|
1102
201
|
}
|