Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
G
gitlab-ce
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
1
Merge Requests
1
Analytics
Analytics
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Commits
Issue Boards
Open sidebar
nexedi
gitlab-ce
Commits
7b07f29c
Commit
7b07f29c
authored
Jul 13, 2020
by
Angelo Gulina
Committed by
Marcia Ramos
Jul 13, 2020
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Docs: refine sentences in Vue guidelines
parent
1834d622
Changes
1
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
7 additions
and
7 deletions
+7
-7
doc/development/fe_guide/vue.md
doc/development/fe_guide/vue.md
+7
-7
No files found.
doc/development/fe_guide/vue.md
View file @
7b07f29c
...
@@ -53,14 +53,14 @@ Be sure to read about [page-specific JavaScript](./performance.md#page-specific-
...
@@ -53,14 +53,14 @@ Be sure to read about [page-specific JavaScript](./performance.md#page-specific-
#### Providing data from HAML to JavaScript
#### Providing data from HAML to JavaScript
While mounting a Vue application
may be a
need to provide data from Rails to JavaScript.
While mounting a Vue application
, you might
need to provide data from Rails to JavaScript.
To do that,
provide the data through
`data`
attributes in the HTML element and query them while mounting the application.
To do that,
you can use the
`data`
attributes in the HTML element and query them while mounting the application.
_Note:_
You should only do this while initializing the application, because the mounted element will be replaced with Vue-generated DOM.
_Note:_
You should only do this while initializing the application, because the mounted element will be replaced with Vue-generated DOM.
The advantage of providing data from the DOM to the Vue instance through
`props`
in the
`render`
function
The advantage of providing data from the DOM to the Vue instance through
`props`
in the
`render`
function
instead of querying the DOM inside the main Vue component is
that makes tests easier by avoiding the need to
instead of querying the DOM inside the main Vue component is
avoiding the need to create a fixture or an HTML element in the unit test,
create a fixture or an HTML element in the unit test
. See the following example:
which will make the tests easier
. See the following example:
```
javascript
```
javascript
// haml
// haml
...
@@ -134,7 +134,7 @@ This approach has a few benefits:
...
@@ -134,7 +134,7 @@ This approach has a few benefits:
intermediate components being aware of it (c.f. passing the flag down via
intermediate components being aware of it (c.f. passing the flag down via
props).
props).
-
Good testability, since the flag can be provided to
`mount`
/
`shallowMount`
-
Good testability, since the flag can be provided to
`mount`
/
`shallowMount`
from
`vue-test-utils`
as easi
ly as a prop.
from
`vue-test-utils`
simp
ly as a prop.
```
javascript
```
javascript
import
{
shallowMount
}
from
'
@vue/test-utils
'
;
import
{
shallowMount
}
from
'
@vue/test-utils
'
;
...
@@ -155,7 +155,7 @@ This folder holds all components that are specific of this new feature.
...
@@ -155,7 +155,7 @@ This folder holds all components that are specific of this new feature.
If you need to use or create a component that will probably be used somewhere
If you need to use or create a component that will probably be used somewhere
else, please refer to
`vue_shared/components`
.
else, please refer to
`vue_shared/components`
.
A good
thumb rule
to know when you should create a component is to think if
A good
rule of thumb
to know when you should create a component is to think if
it will be reusable elsewhere.
it will be reusable elsewhere.
For example, tables are used in a quite amount of places across GitLab, a table
For example, tables are used in a quite amount of places across GitLab, a table
...
@@ -321,7 +321,7 @@ We should verify an event has been fired by asserting against the result of the
...
@@ -321,7 +321,7 @@ We should verify an event has been fired by asserting against the result of the
## Vue.js Expert Role
## Vue.js Expert Role
One should apply to be a Vue.js expert by opening an MR when the Merge Request's they create and review
show:
You should only apply to be a Vue.js expert when your own merge requests and your reviews
show:
-
Deep understanding of Vue and Vuex reactivity
-
Deep understanding of Vue and Vuex reactivity
-
Vue and Vuex code are structured according to both official and our guidelines
-
Vue and Vuex code are structured according to both official and our guidelines
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment