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: README-PTBR.md
+9-3Lines changed: 9 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -598,12 +598,18 @@ Nota: JSHint não aceita as expressões `vue`, porém aceita as de `html`.
598
598
599
599
---
600
600
601
-
# Quer ajudar?
601
+
##Quer ajudar?
602
602
603
603
Faça um Fork do projeto e depois um Pull Request do que você acha que deve ser interessante ter nesse guia ou crie uma [Issue](https://github.com/pablohpsilva/vuejs-component-style-guide/issues).
604
604
605
-
# Thank you for your help!
606
-
@miljan-aleksic on issue [#1](https://github.com/pablohpsilva/vuejs-component-style-guide/issues/1)
Copy file name to clipboardExpand all lines: README-RU.md
+28-24Lines changed: 28 additions & 24 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,5 +1,9 @@
1
1
Этот документ предалагает для вас ряд правил по разработке компонетов Vue которые:
2
2
3
+
### Переводы
4
+
*[бразильский португальский](README-PTBR.md)
5
+
*[английский](README.md)
6
+
3
7
* потом будет легче для вашей команды (или для вас в будущем) понять или найти что и как работает
4
8
* ваш редактор кода (IDE, среда разработки) поймет с меньшим количеством ошибок и предложит лучшие подсказки
5
9
* улучшит переиспользование в данном проекте и в других ваших проектах
@@ -35,13 +39,13 @@
35
39
36
40
### Как?
37
41
38
-
Старайтесь чтобы каждый Vue компонент соответствовал принципам [FIRST](https://addyosmani.com/first/):
39
-
- Решающий одну задачу,
40
-
- Назависимый,
41
-
- Переиспользуемый,
42
-
- Небольшой,
42
+
Старайтесь чтобы каждый Vue компонент соответствовал принципам [FIRST](https://addyosmani.com/first/):
43
+
- Решающий одну задачу,
44
+
- Назависимый,
45
+
- Переиспользуемый,
46
+
- Небольшой,
43
47
- Простой в тестировании.
44
-
48
+
45
49
[↑ наверх](#Содержание)
46
50
47
51
@@ -306,17 +310,17 @@ export default {
306
310
307
311
## Именование событий
308
312
309
-
В Vue все инлайновые выражения и методы компонента напрямую относятся к MV (ViewModel) и меняют ее состояние. При декларации собственных событий важно их грамотно называть чтобы избежать сложности при дальнейшем разработка и использовании компонента.
313
+
В Vue все инлайновые выражения и методы компонента напрямую относятся к MV (ViewModel) и меняют ее состояние. При декларации собственных событий важно их грамотно называть чтобы избежать сложности при дальнейшем разработка и использовании компонента.
310
314
311
315
### Почему?
312
316
313
-
* разработчики могут использовать имена совпадает с нативными что может вызывать проблема
314
-
* полная свобода в выборе имён событий может даже вести к проблемам с обработкой шаблоны
317
+
* разработчики могут использовать имена совпадает с нативными что может вызывать проблема
318
+
* полная свобода в выборе имён событий может даже вести к проблемам с обработкой шаблоны
315
319
316
320
### Как?
317
321
318
322
* Названия событий стоит использовать кебаб нотацию `kebab-cased`
319
-
* название к. должно быть уникальным и отражать что происходит в компоненте, например: upload-success, upload-error or even dropzone-upload-success, dropzone-upload-error
323
+
* название к. должно быть уникальным и отражать что происходит в компоненте, например: upload-success, upload-error or even dropzone-upload-success, dropzone-upload-error
320
324
* в именовании лучше использовать только существительные и глаголы, например: client-api-load, drive-upload-success. ([источник](https://github.com/GoogleWebComponents/style-guide#events))
321
325
322
326
[↑ наверх](#Содержание)
@@ -325,28 +329,28 @@ export default {
325
329
326
330
## Избегайте использования `this.$parent`
327
331
328
-
Vue поддерживает вложенности компонентов, поэтому дочерние компоненты могут обращаться к данным родителя.
332
+
Vue поддерживает вложенности компонентов, поэтому дочерние компоненты могут обращаться к данным родителя.
329
333
Обращение к внутреннему состоянию компонент снаружи в принципе нарушает [FIRST](https://addyosmani.com/first/). Старайтесь избегать конструкции `this.$parent`. Возможны случаи когда это разумный выход, но то слишком плохой дизайн чтобы использовать его всегда.
330
334
331
335
### Почему?
332
336
333
-
* компонент Vue, как и любой другой должен работать изолированно. Если для работы требуется взаимодействия с соседними скоупами то нарушается принципе компонентной разработки
334
-
* если компоненту требуется обращение к соседям - такой компонент не может быть полноценно переиспользован
337
+
* компонент Vue, как и любой другой должен работать изолированно. Если для работы требуется взаимодействия с соседними скоупами то нарушается принципе компонентной разработки
338
+
* если компоненту требуется обращение к соседям - такой компонент не может быть полноценно переиспользован
335
339
336
340
337
341
### Как?
338
342
339
-
* передавайте данные из родителя а дочерний компонент используя атрибуты и свойства
343
+
* передавайте данные из родителя а дочерний компонент используя атрибуты и свойства
340
344
* передавайте методы используя коллбеки и выражения в атрибутах
341
-
* в обратную сторону - дочерние к. должны генерировать события которые будет перехватить родитель
345
+
* в обратную сторону - дочерние к. должны генерировать события которые будет перехватить родитель
342
346
343
347
[↑ наверх](#Содержание)
344
348
345
349
346
350
## Используйте `this.$refs` осторожно
347
351
348
-
Vue как и React поддерживает обращение к другим компонентам и html-элементам с использованием атрибута ref.
349
-
Через обращение к this.$refs разработчик может получить доступ к контексту других компонентов или тегов. В большинстве случаев можно не использовать this.$refs для обращения к другим компонентам.
352
+
Vue как и React поддерживает обращение к другим компонентам и html-элементам с использованием атрибута ref.
353
+
Через обращение к this.$refs разработчик может получить доступ к контексту других компонентов или тегов. В большинстве случаев можно не использовать this.$refs для обращения к другим компонентам.
350
354
351
355
### Почему?
352
356
@@ -355,12 +359,12 @@ Vue как и React поддерживает обращение к другим
355
359
356
360
### Как?
357
361
358
-
* Серьезно относитесь к дизайну API ваших компонентов
359
-
* Старайтесь избегать умножнений и ветвлений пути исполнения кода в компонентах. Наличие таких фрагментов является признаком того что либо API не достаточно общее, либо вам нужно создать и использовать другие компоненты для других юзкейсов
362
+
* Серьезно относитесь к дизайну API ваших компонентов
363
+
* Старайтесь избегать умножнений и ветвлений пути исполнения кода в компонентах. Наличие таких фрагментов является признаком того что либо API не достаточно общее, либо вам нужно создать и использовать другие компоненты для других юзкейсов
360
364
* Используя компонент, обратите внимание если вдруг какого-то из свойств не хватает; если это так, то добавьте их сами и/или создайте тикет если это osc библиотека
361
-
* то же самое с событиями - если чего либо не хватает значит другой разработчик (или вы сами, в прошлом) не добавили их. Нужно это пофиксить - либо добавив отсутсвующее, либо проверить бизнес-логику компонента, возможно это событие уже не используется, тогда его можно просто удалить
362
-
* используйте `this.$refs` только если других путей нет и вам никак не обойтись событиями и свойствами
363
-
* если по другому никак, то отдавайте предпочтение refs по сравнению с jQuery или `document.queryElement`. Так вы останетесь на одном уровне абстракции (который даёт Vue) а не будете мешать их в трудно понимаемую кучу.
365
+
* то же самое с событиями - если чего либо не хватает значит другой разработчик (или вы сами, в прошлом) не добавили их. Нужно это пофиксить - либо добавив отсутсвующее, либо проверить бизнес-логику компонента, возможно это событие уже не используется, тогда его можно просто удалить
366
+
* используйте `this.$refs` только если других путей нет и вам никак не обойтись событиями и свойствами
367
+
* если по другому никак, то отдавайте предпочтение refs по сравнению с jQuery или `document.queryElement`. Так вы останетесь на одном уровне абстракции (который даёт Vue) а не будете мешать их в трудно понимаемую кучу.
364
368
365
369
366
370
```html
@@ -463,7 +467,7 @@ Vue как и React поддерживает обращение к другим
463
467
464
468
465
469
466
-
## Документируйте API компонента
470
+
## Документируйте API компонента
467
471
468
472
Экземпляр Vue компонента создается при размещении элемента к. в коде приложения. Дополнительная конфигурация экземпляра осуществляется при использовании атрибутов. Для того чтобы компонент мог быть успешно переиспользован другими разработчиками эти атрибуты, по сути они и есть API вашего к. могут быть доходчиво описаны в сопроводительном файле `README.md`.
Copy file name to clipboardExpand all lines: README.md
+3-5Lines changed: 3 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -599,13 +599,10 @@ Note: JSHint does not accept `vue` as extension, but only `html`.
599
599
600
600
---
601
601
602
-
# Wanna help?
602
+
##Wanna help?
603
603
604
604
Fork it and Pull Request what you think it should be good to have or just create an [Issue](https://github.com/pablohpsilva/vuejs-component-style-guide/issues).
605
605
606
-
# Thank you for your help!
607
-
@miljan-aleksic on issue [#1](https://github.com/pablohpsilva/vuejs-component-style-guide/issues/1)
608
-
609
606
610
607
<!-- ## Add badge to your project
611
608
@@ -650,4 +647,5 @@ You can copy, modify, distribute and perform the work, even for commercial purpo
0 commit comments