Skip to content

Commit baf2dd8

Browse files
Pablo Henrique Penha SilvaPablo Henrique Penha Silva
authored andcommitted
fixing README files
1 parent 76b49bb commit baf2dd8

File tree

3 files changed

+40
-32
lines changed

3 files changed

+40
-32
lines changed

README-PTBR.md

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -598,12 +598,18 @@ Nota: JSHint não aceita as expressões `vue`, porém aceita as de `html`.
598598

599599
---
600600

601-
# Quer ajudar?
601+
## Quer ajudar?
602602

603603
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).
604604

605-
# Thank you for your help!
606-
@miljan-aleksic on issue [#1](https://github.com/pablohpsilva/vuejs-component-style-guide/issues/1)
605+
## Sobre o tradutor
606+
607+
Pablo Henrique Penha Silva
608+
609+
- Github [pablohpsilva](https://github.com/pablohpsilva)
610+
- Twitter [@PabloHPSilva](https://twitter.com/PabloHPSilva)
611+
- Medium [@pablohpsilva](https://medium.com/@pablohpsilva)
612+
607613

608614

609615
<!-- ## Add badge to your project

README-RU.md

Lines changed: 28 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
Этот документ предалагает для вас ряд правил по разработке компонетов Vue которые:
22

3+
### Переводы
4+
* [бразильский португальский](README-PTBR.md)
5+
* [английский](README.md)
6+
37
* потом будет легче для вашей команды (или для вас в будущем) понять или найти что и как работает
48
* ваш редактор кода (IDE, среда разработки) поймет с меньшим количеством ошибок и предложит лучшие подсказки
59
* улучшит переиспользование в данном проекте и в других ваших проектах
@@ -35,13 +39,13 @@
3539

3640
### Как?
3741

38-
Старайтесь чтобы каждый Vue компонент соответствовал принципам [FIRST](https://addyosmani.com/first/):
39-
- Решающий одну задачу,
40-
- Назависимый,
41-
- Переиспользуемый,
42-
- Небольшой,
42+
Старайтесь чтобы каждый Vue компонент соответствовал принципам [FIRST](https://addyosmani.com/first/):
43+
- Решающий одну задачу,
44+
- Назависимый,
45+
- Переиспользуемый,
46+
- Небольшой,
4347
- Простой в тестировании.
44-
48+
4549
[↑ наверх](#Содержание)
4650

4751

@@ -306,17 +310,17 @@ export default {
306310

307311
## Именование событий
308312

309-
В Vue все инлайновые выражения и методы компонента напрямую относятся к MV (ViewModel) и меняют ее состояние. При декларации собственных событий важно их грамотно называть чтобы избежать сложности при дальнейшем разработка и использовании компонента.
313+
В Vue все инлайновые выражения и методы компонента напрямую относятся к MV (ViewModel) и меняют ее состояние. При декларации собственных событий важно их грамотно называть чтобы избежать сложности при дальнейшем разработка и использовании компонента.
310314

311315
### Почему?
312316

313-
* разработчики могут использовать имена совпадает с нативными что может вызывать проблема
314-
* полная свобода в выборе имён событий может даже вести к проблемам с обработкой шаблоны
317+
* разработчики могут использовать имена совпадает с нативными что может вызывать проблема
318+
* полная свобода в выборе имён событий может даже вести к проблемам с обработкой шаблоны
315319

316320
### Как?
317321

318322
* Названия событий стоит использовать кебаб нотацию `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
320324
* в именовании лучше использовать только существительные и глаголы, например: client-api-load, drive-upload-success. ([источник](https://github.com/GoogleWebComponents/style-guide#events))
321325

322326
[↑ наверх](#Содержание)
@@ -325,28 +329,28 @@ export default {
325329

326330
## Избегайте использования `this.$parent`
327331

328-
Vue поддерживает вложенности компонентов, поэтому дочерние компоненты могут обращаться к данным родителя.
332+
Vue поддерживает вложенности компонентов, поэтому дочерние компоненты могут обращаться к данным родителя.
329333
Обращение к внутреннему состоянию компонент снаружи в принципе нарушает [FIRST](https://addyosmani.com/first/). Старайтесь избегать конструкции `this.$parent`. Возможны случаи когда это разумный выход, но то слишком плохой дизайн чтобы использовать его всегда.
330334

331335
### Почему?
332336

333-
* компонент Vue, как и любой другой должен работать изолированно. Если для работы требуется взаимодействия с соседними скоупами то нарушается принципе компонентной разработки
334-
* если компоненту требуется обращение к соседям - такой компонент не может быть полноценно переиспользован
337+
* компонент Vue, как и любой другой должен работать изолированно. Если для работы требуется взаимодействия с соседними скоупами то нарушается принципе компонентной разработки
338+
* если компоненту требуется обращение к соседям - такой компонент не может быть полноценно переиспользован
335339

336340

337341
### Как?
338342

339-
* передавайте данные из родителя а дочерний компонент используя атрибуты и свойства
343+
* передавайте данные из родителя а дочерний компонент используя атрибуты и свойства
340344
* передавайте методы используя коллбеки и выражения в атрибутах
341-
* в обратную сторону - дочерние к. должны генерировать события которые будет перехватить родитель
345+
* в обратную сторону - дочерние к. должны генерировать события которые будет перехватить родитель
342346

343347
[↑ наверх](#Содержание)
344348

345349

346350
## Используйте `this.$refs` осторожно
347351

348-
Vue как и React поддерживает обращение к другим компонентам и html-элементам с использованием атрибута ref.
349-
Через обращение к this.$refs разработчик может получить доступ к контексту других компонентов или тегов. В большинстве случаев можно не использовать this.$refs для обращения к другим компонентам.
352+
Vue как и React поддерживает обращение к другим компонентам и html-элементам с использованием атрибута ref.
353+
Через обращение к this.$refs разработчик может получить доступ к контексту других компонентов или тегов. В большинстве случаев можно не использовать this.$refs для обращения к другим компонентам.
350354

351355
### Почему?
352356

@@ -355,12 +359,12 @@ Vue как и React поддерживает обращение к другим
355359

356360
### Как?
357361

358-
* Серьезно относитесь к дизайну API ваших компонентов
359-
* Старайтесь избегать умножнений и ветвлений пути исполнения кода в компонентах. Наличие таких фрагментов является признаком того что либо API не достаточно общее, либо вам нужно создать и использовать другие компоненты для других юзкейсов
362+
* Серьезно относитесь к дизайну API ваших компонентов
363+
* Старайтесь избегать умножнений и ветвлений пути исполнения кода в компонентах. Наличие таких фрагментов является признаком того что либо API не достаточно общее, либо вам нужно создать и использовать другие компоненты для других юзкейсов
360364
* Используя компонент, обратите внимание если вдруг какого-то из свойств не хватает; если это так, то добавьте их сами и/или создайте тикет если это osc библиотека
361-
* то же самое с событиями - если чего либо не хватает значит другой разработчик (или вы сами, в прошлом) не добавили их. Нужно это пофиксить - либо добавив отсутсвующее, либо проверить бизнес-логику компонента, возможно это событие уже не используется, тогда его можно просто удалить
362-
* используйте `this.$refs` только если других путей нет и вам никак не обойтись событиями и свойствами
363-
* если по другому никак, то отдавайте предпочтение refs по сравнению с jQuery или `document.queryElement`. Так вы останетесь на одном уровне абстракции (который даёт Vue) а не будете мешать их в трудно понимаемую кучу.
365+
* то же самое с событиями - если чего либо не хватает значит другой разработчик (или вы сами, в прошлом) не добавили их. Нужно это пофиксить - либо добавив отсутсвующее, либо проверить бизнес-логику компонента, возможно это событие уже не используется, тогда его можно просто удалить
366+
* используйте `this.$refs` только если других путей нет и вам никак не обойтись событиями и свойствами
367+
* если по другому никак, то отдавайте предпочтение refs по сравнению с jQuery или `document.queryElement`. Так вы останетесь на одном уровне абстракции (который даёт Vue) а не будете мешать их в трудно понимаемую кучу.
364368

365369

366370
```html
@@ -463,7 +467,7 @@ Vue как и React поддерживает обращение к другим
463467

464468

465469

466-
## Документируйте API компонента
470+
## Документируйте API компонента
467471

468472
Экземпляр Vue компонента создается при размещении элемента к. в коде приложения. Дополнительная конфигурация экземпляра осуществляется при использовании атрибутов. Для того чтобы компонент мог быть успешно переиспользован другими разработчиками эти атрибуты, по сути они и есть API вашего к. могут быть доходчиво описаны в сопроводительном файле `README.md`.
469473

@@ -573,4 +577,4 @@ jshint --config modules/.jshintrc --extra-ext=html --extract=auto modules/
573577
Mikhail Kuznetcov
574578

575579
- Github [shershen08](https://github.com/shershen08)
576-
- Twitter: [@legkoletat](https://twitter.com/legkoletat)
580+
- Twitter [@legkoletat](https://twitter.com/legkoletat)

README.md

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -599,13 +599,10 @@ Note: JSHint does not accept `vue` as extension, but only `html`.
599599

600600
---
601601

602-
# Wanna help?
602+
## Wanna help?
603603

604604
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).
605605

606-
# Thank you for your help!
607-
@miljan-aleksic on issue [#1](https://github.com/pablohpsilva/vuejs-component-style-guide/issues/1)
608-
609606

610607
<!-- ## Add badge to your project
611608
@@ -650,4 +647,5 @@ You can copy, modify, distribute and perform the work, even for commercial purpo
650647

651648
## Translation authors
652649

653-
- [Russian](https://github.com/shershen08/vuejs-component-style-guide): Mikhail Kuznetcov [github:shershen08](https://github.com/shershen08), [twitter: @legkoletat](https://twitter.com/legkoletat)
650+
- [Brazilian Portuguese](https://github.com/pablohpsilva/vuejs-component-style-guide/blob/master/README-PTBR.md): Pablo Henrique Silva [github:pablohpsilva](https://github.com/pablohpsilva), [twitter: @PabloHPSilva](https://twitter.com/PabloHPSilva)
651+
- [Russian](https://github.com/pablohpsilva/vuejs-component-style-guide/blob/master/README-RU.md): Mikhail Kuznetcov [github:shershen08](https://github.com/shershen08), [twitter: @legkoletat](https://twitter.com/legkoletat)

0 commit comments

Comments
 (0)