• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

[Vue] Todo aplikacja

VPS Starter Arubacloud
0 głosów
140 wizyt
pytanie zadane 19 lipca 2018 w JavaScript przez `Krzychuu Stary wyjadacz (13,940 p.)
Witam

Uczę się vue js, jak na razie tylko z dokumentacji, postanowiłem wykorzystać zdobytą wiedzę i zrobić todo apke, możecie ocenić kod aplikacji?

 

https://github.com/KrzychuuWEB/Todo-App

2 odpowiedzi

+1 głos
odpowiedź 19 lipca 2018 przez CenterPL Pasjonat (19,070 p.)
<TaskList
                    v-for="item in items"
                    :item="item"
            />

Brakuje atrybutu :key, który jest wymagany w przypadku iteracji. 

createNewTask: function() {
                this.items.push(this.inputAddTask);
                this.inputAddTask = '';
            }

możesz to zrobić zgodnie z nowszymi standardami czyli createNewTask() { //body}

Masz niby w linter, ale nie widzę jego konfiguracji, w każdym razie coś czuję, że się nie stosujesz. Polecam eslint i preset airbnb. 

Ogólnie spoko, ale nie bardzo co tu jest oceniać. Routingu nie ma na dobrą sprawę, łączenia z API też nie, security ani nic takiego. 

komentarz 19 lipca 2018 przez `Krzychuu Stary wyjadacz (13,940 p.)
Dziękuje za poświęcony czas, poczytam o eslint i biorę się za jakąś większą apkę
+1 głos
odpowiedź 19 lipca 2018 przez ProgramistaStepek Nałogowiec (27,020 p.)

Jak na kod początkującego to jest całkiem nieźle (ładnie zwalidowane propsy, skróty), ale masz brzydki styl, rozważ użycie ESLinta, Prettiera itp. oraz brakuje czasami zachowania konwencji np. dlaczego raz używasz v-model a innym razem bawisz się z $ref, czemu raz v-on: a raz @.
Największy problem jaki widzę w tym kodzie to nazwenictwo:

  1. Pod AddTaskInput spodziewam się inputa okazuje się, że jest tam schowany cały <form>
  2. Nazwa taskList sugeruje, że w środku jest cała lista, a okazuje się, że to są tylko pojedyncze <li>

PS: Nie musisz imperatywnie 

e.preventDefault()

Możesz zamiast tego deklaratywnie

v-on:submit.prevent

 

komentarz 19 lipca 2018 przez `Krzychuu Stary wyjadacz (13,940 p.)
dzięki za odpowiedz, popracuje nad nazewnictwem i konwencją, poczytam też o ESlint i biorę się za inną apke
2
komentarz 19 lipca 2018 przez Tomek Sochacki Ekspert (227,510 p.)
AddTaskInput

warto też unikać w nazwach funkcji, metod itp. bezpośredniego określania konkretnego rodzaju elementu HTML, czyli tutaj "input". Nie jest to żaden błąd techniczny, ale jeśli z jakiś względów zmieni się html to może to zrobić nieco zamieszania.

W tym wypadku zapewnie tak się nie stanie i pozostanie input, ale może istnieje ryzyko że np. kiedyś z inputa zrobiło by się textarea i mamy niekonsekwencję :) Teraz będziesz o niej wiedział, ale wraz z rozwojem aplikacji łatwo się pogubić.

Nie pamiętam gdzie, ale czytałem kiedyś fajne zdanie, że lepiej poświęcić pół godziny na znalezienie dobrej nazwy funkcji/zmiennej niż za rok tracić cały dzień na szukaniu błędów. Oczywiście te czasy są przesadzone tak aby podkreślić wagę dobrych nazw :) ale zasada jest jak najbardziej prawidłowa.

 

Oczywiście reguła ta nie dotyczy sytuacji, gdy tworzysz funkcje do tworzenia konkretnych elementów html, czyli np. createCustomInput. W takich wypadkach jest to jak najbardziej poprawne i zgodne z oczekiwaniami. Zawsze trzeba więc dobrze przemyśleć do czego dana funkcja będzie używana i co de facto robi.

komentarz 19 lipca 2018 przez `Krzychuu Stary wyjadacz (13,940 p.)
Dzięki za podpowiedź, mam pytanie czy w pliku public/index.html mogę dodać plik css, i tam pisać styl aplikacji, nie byłoby to błędem ?
1
komentarz 19 lipca 2018 przez Tomek Sochacki Ekspert (227,510 p.)
Nie pracowałem z Vue więc nie odpowiem Ci na to pytanie, nie wiem jakie obowiązują tam dobre praktyki (jestem wyznawcą vanilla, Angular, ewentualnie React :)
2
komentarz 19 lipca 2018 przez niezalogowany

 czy w pliku public/index.html mogę dodać plik css

Zewnętrzne arkusze stylów (na przykład z CDN-ów) - jak najbardziej.

 i tam pisać styl aplikacji

Tu już nie do końca. Jeśli masz dużo globalnego kodu, napisz go w src/assets/sass/ i tam podziel na sensowne moduły. Później tylko import w App.vue

komentarz 20 lipca 2018 przez `Krzychuu Stary wyjadacz (13,940 p.)
Dziękuję za pomoc :)

Podobne pytania

0 głosów
1 odpowiedź 217 wizyt
pytanie zadane 11 września 2017 w JavaScript przez lapacz.kornel Mądrala (6,930 p.)
–1 głos
1 odpowiedź 208 wizyt
pytanie zadane 29 maja 2019 w Rozwój zawodowy, nauka, praca przez Adrian1999 Nałogowiec (34,570 p.)
0 głosów
2 odpowiedzi 617 wizyt
pytanie zadane 11 września 2018 w JavaScript przez sapero Gaduła (4,100 p.)

92,454 zapytań

141,262 odpowiedzi

319,089 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...