8000 Style guide: Fix JSX and single-file components links (#1178) · vuejs-jp-bot/jp.vuejs.org@40440dd · GitHub
[go: up one dir, main page]

Skip to content

Commit 40440dd

Browse files
etiennellipsevuejs-jp-bot
authored andcommitted
Style guide: Fix JSX and single-file components links (vuejs#1178)
1 parent d115217 commit 40440dd

File tree

1 file changed

+8
-8
lines changed

1 file changed

+8
-8
lines changed

src/v2/style-guide/index.md

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -313,7 +313,7 @@ In our experience, it's better to _always_ add a unique key, so that you and you
313313

314314
**For applications, styles in a top-level `App` component and in layout components may be global, but all other components should always be scoped.**
315315

316-
This is only relevant for [single-file components](single-file-components.html). It does _not_ require that the [`scoped` attribute](https://vue-loader.vuejs.org/en/features/scoped-css.html) be used. Scoping could be through [CSS modules](https://vue-loader.vuejs.org/en/features/css-modules.html), a class-based strategy such as [BEM](http://getbem.com/), or another library/convention.
316+
This is only relevant for [single-file components](../guide/single-file-components.html). It does _not_ require that the [`scoped` attribute](https://vue-loader.vuejs.org/en/features/scoped-css.html) be used. Scoping could be through [CSS modules](https://vue-loader.vuejs.org/en/features/css-modules.html), a class-based strategy such as [BEM](http://getbem.com/), or another library/convention.
317317

318318
**Component libraries, however, should prefer a class-based strategy instead of using the `scoped` attribute.**
319319

@@ -537,7 +537,7 @@ components/
537537

538538
### Single-file component filename casing <sup data-p="b">strongly recommended</sup>
539539

540-
**Filenames of [single-file components](single-file-components.html) should either be always PascalCase or always kebab-case.**
540+
**Filenames of [single-file components](../guide/single-file-components.html) should either be always PascalCase or always kebab-case.**
541541

542542
PascalCase works best with autocompletion in code editors, as it's consistent with how we reference components in JS(X) and templates, wherever possible. However, mixed case filenames can sometimes create issues on case-insensitive filesystems, which is why kebab-case is also perfectly acceptable.
543543

@@ -813,7 +813,7 @@ components/
813813

814814
### Self-closing components <sup data-p="b">strongly recommended</sup>
815815

816-
**Components with no content should be self-closing in [single-file components](single-file-components.html), string templates, and [JSX](render-function.html#JSX) - but never in DOM templates.**
816+
**Components with no content should be self-closing in [single-file components](../guide/single-file-components.html), string templates, and [JSX](../guide/render-function.html#JSX) - but never in DOM templates.**
817817

818818
Components that self-close communicate that they not only have no content, but are **meant** to have no content. It's the difference between a blank page in a book and one labeled "This page intentionally left blank." Your code is also cleaner without the unnecessary closing tag.
819819

@@ -851,7 +851,7 @@ Unfortunately, HTML doesn't allow custom elements to be self-closing - only [off
851851

852852
### Component name casing in templates <sup data-p="b">strongly recommended</sup>
853853

854-
**Component names should always be PascalCase in [single-file components](single-file-components.html) and string templates - but kebab-case in DOM templates.**
854+
**Component names should always be PascalCase in [single-file components](../guide/single-file-components.html) and string templates - but kebab-case in DOM templates.**
855855

856856
PascalCase has a few advantages over kebab-case:
857857

@@ -903,7 +903,7 @@ Unfortunately, due to HTML's case insensitivity, DOM templates must still use ke
903903

904904
### Component name casing in JS/JSX <sup data-p="b">strongly recommended</sup>
905905

906-
**Component names in JS/[JSX](render-function.html#JSX) should always be PascalCase, though may be kebab-case inside strings for simpler applications that only use global component registration through `Vue.component`.**
906+
**Component names in JS/[JSX](../guide/render-function.html#JSX) should always be PascalCase, though may be kebab-case inside strings for simpler applications that only use global component registration through `Vue.component`.**
907907

908908
{% raw %}
909909
<details>
@@ -1007,7 +1007,7 @@ components/
10071007

10081008
### Prop name casing <sup data-p="b">strongly recommended</sup>
10091009

1010-
**Prop names should always use camelCase during declaration, but kebab-case in templates and [JSX](render-function.html#JSX).**
1010+
**Prop names should always use camelCase during declaration, but kebab-case in templates and [JSX](../guide/render-function.html#JSX).**
10111011

10121012
We're simply following the conventions of each language. Within JavaScript, camelCase is more natural. Within HTML, kebab-case is.
10131013

@@ -1045,7 +1045,7 @@ props: {
10451045

10461046
**Elements with multiple attributes should span multiple lines, with one attribute per line.**
10471047

1048-
In JavaScript, splitting objects with multiple properties over multiple lines is widely considered a good convention, because it's much easier to read. Our templates and [JSX](render-function.html#JSX) deserve the same consideration.
1048+
In JavaScript, splitting objects with multiple properties over multiple lines is widely considered a good convention, because it's much easier to read. Our templates and [JSX](../guide/render-function.html#JSX) deserve the same consideration.
10491049

10501050
{% raw %}<div class="style-example example-bad">{% endraw %}
10511051
#### Bad
@@ -1439,7 +1439,7 @@ computed: {
14391439

14401440
### Single- 5DC3 file component top-level element order <sup data-p="c">recommended</sup>
14411441

1442-
**[Single-file components](single-file-components.html) should always order `template`, `script`, and `style` tags consistently, with `<style>` last, because at least one of the other two is always necessary.**
1442+
**[Single-file components](../guide/single-file-components.html) should always order `template`, `script`, and `style` tags consistently, with `<style>` last, because at least one of the other two is always necessary.**
14431443

14441444
{% raw %}<div class="style-example example-bad">{% endraw %}
14451445
#### Bad

0 commit comments

Comments
 (0)
0