diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2017-04-20 11:24:40 +0000 |
---|---|---|
committer | Jacob Schatz <jschatz@gitlab.com> | 2017-04-20 11:24:40 +0000 |
commit | c7b3ba834b80d81521a7e6619276e0920d4af94c (patch) | |
tree | c55178e7e85b20f626806a3e3ad8ad057d45feac /doc/development/fe_guide/style_guide_js.md | |
parent | 381e3484ed2b65549b56dd13f3f7656d17d50996 (diff) | |
download | gitlab-ce-c7b3ba834b80d81521a7e6619276e0920d4af94c.tar.gz |
Adds vue js example application and documentation
Diffstat (limited to 'doc/development/fe_guide/style_guide_js.md')
-rw-r--r-- | doc/development/fe_guide/style_guide_js.md | 23 |
1 files changed, 22 insertions, 1 deletions
diff --git a/doc/development/fe_guide/style_guide_js.md b/doc/development/fe_guide/style_guide_js.md index abd241c0bc8..ed656476a96 100644 --- a/doc/development/fe_guide/style_guide_js.md +++ b/doc/development/fe_guide/style_guide_js.md @@ -58,7 +58,7 @@ See [our current .eslintrc][eslintrc] for specific rules and patterns. import Bar from './bar'; ``` -- **Never** disable the `no-undef` rule. Declare globals with `/* global Foo */` instead. +- **Never** disable the `no-undef` rule. Declare globals with `/* global Foo */` instead. - When declaring multiple globals, always use one `/* global [name] */` line per variable. @@ -183,6 +183,19 @@ See [our current .eslintrc][eslintrc] for specific rules and patterns. parseInt('10', 10); ``` +#### CSS classes used for JavaScript +- If the class is being used in Javascript it needs to be prepend with `js-` + ```html + // bad + <button class="add-user"> + Add User + </button> + + // good + <button class="js-add-user"> + Add User + </button> + ``` ### Vue.js @@ -200,6 +213,7 @@ See [our current .eslintrc][eslintrc] for specific rules and patterns. #### Naming - **Extensions**: Use `.vue` extension for Vue components. - **Reference Naming**: Use PascalCase for Vue components and camelCase for their instances: + ```javascript // bad import cardBoard from 'cardBoard'; @@ -217,6 +231,7 @@ See [our current .eslintrc][eslintrc] for specific rules and patterns. cardBoard: CardBoard }; ``` + - **Props Naming:** - Avoid using DOM component prop names. - Use kebab-case instead of camelCase to provide props in templates. @@ -243,12 +258,18 @@ See [our current .eslintrc][eslintrc] for specific rules and patterns. <component v-if="bar" param="baz" /> + <button class="btn">Click me</button> + // good <component v-if="bar" param="baz" /> + <button class="btn"> + Click me + </button> + // if props fit in one line then keep it on the same line <component bar="bar" /> ``` |