You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/v2/style-guide/index.md
+8-8Lines changed: 8 additions & 8 deletions
Original file line number
Diff line number
Diff line change
@@ -313,7 +313,7 @@ In our experience, it's better to _always_ add a unique key, so that you and you
313
313
314
314
**For applications, styles in a top-level `App` component and in layout components may be global, but all other components should always be scoped.**
315
315
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.
317
317
318
318
**Component libraries, however, should prefer a class-based strategy instead of using the `scoped` attribute.**
**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.**
541
541
542
542
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.
**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.**
817
817
818
818
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.
819
819
@@ -851,7 +851,7 @@ Unfortunately, HTML doesn't allow custom elements to be self-closing - only [off
851
851
852
852
### Component name casing in templates <supdata-p="b">strongly recommended</sup>
853
853
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.**
855
855
856
856
PascalCase has a few advantages over kebab-case:
857
857
@@ -903,7 +903,7 @@ Unfortunately, due to HTML's case insensitivity, DOM templates must still use ke
903
903
904
904
### Component name casing in JS/JSX <supdata-p="b">strongly recommended</sup>
905
905
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`.**
907
907
908
908
{% raw %}
909
909
<details>
@@ -1007,7 +1007,7 @@ components/
1007
1007
1008
1008
### Prop name casing <supdata-p="b">strongly recommended</sup>
1009
1009
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).**
1011
1011
1012
1012
We're simply following the conventions of each language. Within JavaScript, camelCase is more natural. Within HTML, kebab-case is.
1013
1013
@@ -1045,7 +1045,7 @@ props: {
1045
1045
1046
1046
**Elements with multiple attributes should span multiple lines, with one attribute per line.**
1047
1047
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.
1049
1049
1050
1050
{% raw %}<divclass="style-example example-bad">{% endraw %}
1051
1051
#### Bad
@@ -1439,7 +1439,7 @@ computed: {
1439
1439
1440
1440
### Single-
5DC3
file component top-level element order <supdata-p="c">recommended</sup>
1441
1441
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.**
1443
1443
1444
1444
{% raw %}<divclass="style-example example-bad">{% endraw %}
0 commit comments