Vue.js + single page aplikace

Yablko (Roman Hraška)

Level
Kapitol: 198
Kategorie: Programování
Hodnocení: 4,9 z 5
Délka: 21h 22min
Jazyk: SK

Předplatné Online kurzy

524 Kč

měsíčně (roční platba)

Koupit samostatný kurz

3 790,00 Kč

doživotní přístup

Reaktivní frameworky (Vue, React, Angular) slouží k programování hbitých UI. Ze statického HTML kódu udělají živou šablonu. Samotnému HTML kódu přidáš pravidla, a vždy když přijde změna, kód se podle nich upraví.

Můžeš programovat přes komponenty. Vue ti dovolí vymyslet si vlastní HTML elementy a naprogramovat jim vzhled a chování. A když přijde změna, prohlížeč sám vymění jen daný komponent, nemusí se refreshnout celá stránka.

Reaktivní frameworky drží UI synchronizovány s daty. Pokud máš v proměnné 3 články, 3 články svítí i na obrazovce. Jestliže jeden vymažeš, automaticky zmizí z obrazovky. Zapomeň na jQuery Selecta, Append, Vue to udělá za tebe.

Tento kurz tě naučí reaktivní frameworky. Vue.js a single page aplikace.

Kupuj, dokud je v akciové ceně 2 699 Kč a uč se hned :). Jak bývá zvykem, postupně přidávám další videa. Dokud jich nebude 100.

MOHU SE TI S NĚČÍM přiznat?

Jmenuji se yablko. A upřímně? Vue je strašná sranda. A toto je zatím můj nejlepší kurz. Já vím, že to říkají všechny kapely o každém novém albu. Ale já nejsem kapela.

Vytvořím několik mini stránek. Jednu velkou single page apku. Veškerý kód si můžeš stáhnout. Dostaneš úkoly, na kterých si Vue procvičíš, přístup do diskuse a kopu materiálů ke stažení. Pod každým videem je malý článek s dalšími imformacemi. Čili 100 videí, 100 blogů. Jdi do toho. Já bych šel.

TAKTO to bude probíhat?

V první části kurzu tě naučím Vue.js. Resp. naučím reaktivní frameworky a konkrétně použiji Vue.js. To znamená, že když se po tomto kurzu rozhodneš přejít na React nebo Angular, budeš přesně vědět, co se děje.

Ve druhé části kurzu vyrobím velkou stránku. První část kurzu bude plná menších příkladů, druhá bude plná jedné velké reality. V první se naučíš Vue.js, v druhé ho použiješ a uděláš skutečnou stránku, velkou Single Page Aplikaci ™.

To jsou stránky jako Netflix, Spotify a Gmail. Já udělám single page admin rozhraní pro skutečnou stránku.

PROČ VUE?

Protože je malý, rychlý, chytrý, použitelný bez build tools, raketově nabírá na popularitě, nejlepší pro začátečníka, pro pochopení konceptů za reaktivními framework, prostě nejlepší vstupní brána do tohoto světa. A jako bonus, za ním nestojí monolitická korporace. Angular = Google, React = Facebook.

Můj cíl je naučit tě Vue tak, že hned pochopíš i React nebo Angular, když se na ně jen podíváš. Tento kurz tě naučí reaktivní frameworky jako takové. A použijeme na to Vue.

V mých kurzech se vždy snažím vysvětlit důvod. Nejen ukázat Vue, ale hlavně vysvětlit, co je jeho pointa. Proč existuje. Čím je jiný než to, co jsme měli před ním. Proč tě má zajímat, pokud znáš JavaScript nebo jQuery. Na jakých konceptech stojí a na co se hodí.

Vždy existují alternativy. Hlavně v JavaScript světě. Já tě naučím Vue tak, abys chápal i React a Angular. Řeší podobné problémy, jen trochu jinak. Kód vypadá jinak, ale nedostane tě. Ty budeš chápat, co ten kód dělá a proč.

Co potřebuješ znát?

Potřebuješ základy HTML, CSS a JavaScriptu. Upřímně, Vue.js je jednodušší než čistý JavaScript. Správně bych měl tvrdit, že potřebuješ umět JS, když se chceš učit framework.

Ale byl bych pokrytec. Já jsem se nejprve naučil jQuery a až potom (i jeho používáním) jsem se postupně doučil JavaScript. Totéž se může stát s Vue i tobě. HTML potřebuješ určitě. A CSS silně pomůže. Potřebuješ mít základní znalosti programování :)

V pozdějších videích Vue kurzu budu používat NPM, Module Bundlers a další JS tools. Pokud je neznáš, google ti určitě pomůže vyznat se v základech. Pokud se to ovšem chceš naučit pořádně, mám online kurz přesně na to.

Pokud jsi nikdy neprogramoval, mám kurz, ve kterém se sice pracuje v PHP, ale naučí tě základy programování a OOP. Má to přímo v názvu. Případně pokud znáš jQuery, nebo jsi viděl nějaké ty JS videa z Webrebel 1 kurzu, klidně můžeš jít na Vue.

Co všechno dostaneš

hotový kurz bude mít přibližně 100 kapitol,
desítky nadupaných videotutoriálů,
certifikát o absolvování kurzu,
garance včetně vrácení peněz do 14 dní, v případě, že s kurzem nebudeš spokojený.

Kapitoly online kurzu

Reaktívne frameworky ⁽¹⁶⁾

Ukázka zdarma

9:54

Ukázka zdarma

10:02

Ukázka zdarma

8:17

LARAVEL (a Vue 3)

Ukázka zdarma

4:03

Vue 3 | 2 Prepíšem Dudes app do Vue 3

7:08

Tipy, rady a pravidlá pre každý kurz

5:54

Ukázka zdarma

4:55

★ Zadanie 01

05 Výhoda Vue oproti React alebo Angular

6:36

Ukázka zdarma

7:40

Ak nefunguje PARCEL (alebo template)

"[Vue warn]: You are using the runtime-only build of Vue"

1:10

07 Ak by som to chcel spraviť v čistom JS (pretože masochizmus)

5:31

Ukázka zdarma

6:20

★ Zadanie 02

Komponenty ⁽¹⁰⁾

Ukázka zdarma

6:31

Ukázka zdarma

5:51

Ukázka zdarma

10:19

Vue 3 | 3 Prepíšem Component appku do Vue 3

5:19

Ukázka zdarma

6:45

13 Scoped Styles, komponent má vlastné CSS (Components 05)

4:00

14 Event a Key modifikátory, progress bar (Components 06)

9:59

15 Jeden ROOT element? Prečo? Otáznik? (Components 07)

4:44

16 Komunikácia komponentov cez $emit (Components 08)

8:51

17 Nemusíš všetko (+ frustrujúce úlohy)

11:02

Vue 3 ⚡️ Vite a Single File Components ⁽¹⁰⁾

Ukázka zdarma

3:50

Vue 3 | 5 INŠTALÁCIA, a predstavím appku

5:10

Vue 3 | 6 SINGLE FILE KOMPONENTY, sass a prettier

5:54

Vue 3 | 7 VUE ZÁKLADY, zopakujme si

4:46

Vue 3 | 8 VLASTNÝ KOMPONENT, pravidlá pre ne

4:24

Vue 3 | 9 KOMUNIKÁCIA, smer rodič dieťa

3:36

Vue 3 | 10 VUE EVENTY, event object

4:47

Vue 3 | 11 KOMUNIKÁCIA, smer dieťa rodič

6:22

Vue 3 | 12 VUEX vs Emit vs EventBus

4:08

Vue 3 | 13 KOMUNIKÁCIA, EventBus cez mitt

6:38

Ladíme (a Bulma app) ⁽¹²⁾

18 Virtual DOM (Toretto?)

4:01

19 BULMA, pretože prečo nie

5:50

20 v-if, v-show, :class, [disabled]

11:01

21 Computed Properties

8:24

★ Zadanie 03

22 Poo

4:24

23 Vue animácie cez <transition> komponent

10:18

★ Zadanie 04

24 Čo má byť komponent? Tvoja mamka (prečo som to povedal, prepáč, som zlý človek)

10:13

25 v-cloak, prestaň blikať, čo robíš

6:14

26 Vue CLI / GUI / UI / Hui / Dui / Lui / Chui rýchlokurz

11:38

★ Zadanie 05

Vue CLI a nastavovačky ⁽¹⁰⁾

27 CLI 01 Babel, Typescript, PWA (Progressive Web Apps), Router

9:49

28 CLI 02 Vuex, Preprocessing, Unit testing, End-to-End testing

7:08

29 CLI 03 ESLint, Prettier, Linter / Formatter, Vue CLI config

12:03

Ukážka: toto bude nasledovať (predtým ESLint atď.)

1:25

30 VS Code 01 ESLint

9:13

31 VS Code 02 ESLint + Prettier

7:39

32 VS Code 03 Prettier + Vetur vs. js-beautify-html (pre HTML/Vue šablóny)

6:08

33 Vue Snippety + moje VS Code extensions

4:58

34 Užitočné Vue tools, Evan You a Dragonball a prečo Vue??

6:43

35 Vue NPM verzie "[Vue warn]: You are using the runtime-only build of Vue"

7:41

SPA (Single Page Apps) ⁽²¹⁾

36 Vue Router (iTunes Single Page App začína)

6:45

37 BUILD script, konzolové servery, všetok kód sa stiahne naraz:(

5:43

38 Lazy Loading, Code Splitting (na neskôr, pre bigass stránky)

9:24

39 Vue filters, iTunes app

8:48

40 Axios, práca s API (konkrétne iTunes)

8:24

41 extractData( object destructuring )

9:43

42 Free APIs a rvem si srcco

6:40

43 Vue Style Guide, pravidlá pre Vue kód, Refactoring 01

10:48

44 Refactoring 02

8:13

45 props / $emit, komunikácia komponentov

10:43

46 Event Bus, komunikácia komponentov, Lifecycle Hooks

7:13

47 Komponent má byť samotár (veľmi romantické)

8:01

48 Externé (S)CSS, google a lokálne fonty

5:21

49 "THE" komponenty

3:19

50 Redizajn (toto video si pusti na pozadí, keď si varíš párky)

6:52

51 Sila samostatnosti komponentov (a čo som ukradol?)

2:40

52 Automatický Sass import + animácia objavenia (sa)

7:21

53 Vlastný helper functions PLUGIN, webpack eslint --fix, SPA autofocus

8:30

54 lodash VS. lodash-es, debounce na hľadanie počas písania

5:04

55 Kedy NIE arrow functions, odsekni písmená (auč) a upratovačky

6:44

★ Zadanie 06

Vue 3 📻 SPA iTunes ⁽³⁾

Vue 3 | 14 Opravíme iTunes appku vo Vue 2, node-gyp node-sass problém

6:19

Vue 3 | 15 Prepíšem iTunes app do Vue 3

5:32

Vue 3 | 16 EventBus, Filters, Inline template (iTunes 3, časť 2)

8:42

Vue 3 ✨ Composition API ⁽²⁵⁾

Vue 3 | 17 INTRO, composition api

6:12

Vue 3 | 18 COMPOSITION API, verzus OPTIONS API

6:00

Vue 3 | 19 REF, a computed

5:06

Vue 3 | 20 REACTIVE, a lifecycle hooks

4:58

Vue 3 | 21 TRUĽO, origins

5:51

Vue 3 | 22 DATA.JS, moja fake databáza

4:12

Vue 3 | 23 PREPÍNATKO, prvá dávka reaktivity

6:47

Vue 3 | 24 LIST FORM, budeme pridávať

4:08

Vue 3 | 25 ULOŽÍME NOVÝ, list

9:18

Vue 3 | 26 EVENT BUS, cez mitt

5:48

Vue 3 | 27 ULOŽÍME NOVÝ, card

6:24

Vue 3 | 28 SILA COMPOSITION API, je v upratovaní

9:21

Vue 3 | 29 LABELS, farebné sú

4:12

Vue 3 | 30 TAGS a IMAGES, vue trik pre obrázky v src

6:22

Vue 3 | 31 REFACTORING, komponenty nové

3:15

Vue 3 | 32 ANIMÁCIE, pre luxusný produkt

5:25

Vue 3 | 33 CONTENT EDITABLE, upravíme list title

6:51

Vue 3 | 34 REF, na DOM element

3:54

Vue 3 | 35 EDITUJEME, list title

4:22

Vue 3 | 39 DELETE, card

6:13

Vue 3 | 40 EDIT CARD, text

5:11

Vue 3 | 41 EDIT DONE, composition api done

7:14

Vuex (a history mode) ⁽⁵⁾

56 Vuex 01

5:16

57 Vuex 02 state, mutations

9:41

58 Vuex 03 actions, getters

8:16

59 Vuex 04 čistý kód, väčšie Vuex príklady, rozbehni môj kód

7:58

60 History Mode (a čo pre pána znamená 'single page app'?)

7:10

Laravel + Vue ⁽³²⁾

61 Laravel? Huh??

4:55

62 1 stránka sú 2 appky, poviem ti čo budeme robiť

7:35

63 Laravel 01 inštalácia, routes, artisan, VS Code pluginy

8:48

64 Laravel 02 controllers, views

8:22

Laravel 6 / 01 nové UI a HELPERS package (zmeny v AUTH)

4:49

66 Client-side vs. server-side rendering

6:42

Ako rozbeháš stiahnutý kód (+ Laravelu bude o kúsok viac)

5:03

67 Laravel/Composer update a čo bude ďalej (v kurze, nie živote)

6:12

68 Master layout a Config súbory

9:51

Laravel 6 / 02 frontend v Laravel 5 vs 6 + ako inštalovať inú verziu

3:44

69 nice (Vue a frontend v Laraveli)

11:51

70 Databáza, migrácie

4:51

71 Modely, kolekcie, z databázy na stránku, juj!

8:12

72 Vzťahy medzi modelmi, auto dopĺňanie 'use'

8:57

73 FAKER (laravel sám naplní databázu, DB SEED)

10:14

74 Usporiadanie dát z databázy, @include šablóny

6:58

75 Escaping, JS frameworky v Laraveli, pluralizácia textu

7:56

76 CRUD, REST, Resource controllers

7:39

77 Podstránka pre kontkrétny článok cez PostController

6:20

78 Fajné formátovanie dátumu cez Carbon... a komentáre!

5:16

79 Cibri™ si vkus

4:28

81 Form pre koment, hlavná navigácia, named routes a route()

9:20

82 Form problém 01 CSRF (Cross Site Request Forgery)

5:26

83 Form problém 02 Mass Assignment Exception, odoslanie formu

7:29

84 Uloženie do DB cez vzťah, usporiadanie vzťahov

5:15

85 Validácia formuláru, výpis chýb, lepšie zabezpečenie formu

8:41

86 SLUG v adrese pre lepšie SEO, unique index v DB cez migrate

7:14

87 Debug cez Laravel TELESCOPE, efektívne SQL cez EAGER LOADING vzťahov

9:36

Laravel 6 / 03 novinky, vylepšenia, Ignition errors

6:21

Laravel 6 / 04 update na Laravel 6.0 + ako vymazať Telescope

4:18

Vue komponenty pre Flash a Komentáre ⁽¹²⁾

88 Vue FlashMessage komponent

8:48

89 Session, Laravel flash message

9:58

NEMEŇ SÚBORY Z VENDOR ADRESÁRA (ako ja, človek, ktorý je hlúpy)

3:45

90 Prechod na ES6 import syntax, ESLint a Prettier sú späť

5:10

91 Vue inline-templates

10:05

92 Edit a delete linky, doubleclick, blur, contenteditable

6:29

93 Práva usera, Authorization Policy, @can, iba autor môže zmazať koment

6:50

94 Editácia a mazanie cez AXIOS ajax (aj bez neho)

9:22

95 Polish time! (Poľský čas!) Dokončím úpravy, vyladím mazanie

6:25

96 Vyladím edit komentu, autovyznačím text a blur vráti pôvodný

6:09

97 Flash notifikácia po (ťažko úspešnom) edite a delete

5:59

★ Zadanie 07

Vue SPA admin rozhranie ⁽³⁵⁾

Takýto ADMIN PANEL budeme vyrábať! JUJ!

1:13

98 Smooth scroll k elementu a VERY SORRY

7:04

99 Vue a Laravel Admin Panely, Dashboardy a CMSká

4:42

100 Admin panel frontend kostra

7:19

101 ADMIN PANEL Vue Router

6:11

102 Admin Panel šťavnatý BULMA.CSS dizajn

8:33

103 Cez API ťahám Posty, API controllers, API routes

7:29

104 Dáta čo prišli z API nakreslím do tabuľky či troch

7:05

105 Lazy Loading a import() a zisti, či je žiadosť AJAXová

7:32

106 Auto reload, Hot Module Replacement

5:56

107 Vyhľadávanie v Posts, filtrovanie tabuľky

5:58

108 VUE WATCHERS a search component

7:43

109 VUE MIXINS a reusable kód pre komponenty

8:24

110 Transformuj dáta na polceste z DB do JSONu (a taktiež vzťahy)

9:27

111 Moment.js pre pekné dátumy v JS (a v našej tabuľke)

5:26

112 MATERIAL DESIGN ikonky v BULME pre EDIT LINKY do tabuľky

11:32

113 Podstránka pre konkrétny POST (a Resource všeobecne)

8:05

114 Pekné EDITAČNÉ LINKY pre Resource podstránky

4:59

115 Admin podstránka pre KOMENTÁR (a upratovacie práce)

6:49

116 REDIRECT cez router, 404 NOT FOUND a dôležitosť STATUS kódov

5:59

117 Mažeme cez API, API status kódy a mesidže

9:25

★ Zadanie 08

118 ROUTER-LINK namiesto šupáckych linkov pre šupákov

7:03

119 CREATE FORM formulár pre pridanie nového postu

6:43

120 SLUG sa AUTOMATICKY vytvára počas písania

7:55

121 AUTH vs API AUTH, len prihlásenec sa dostane do admin panelu

3:33

122 Uložíme nový post do DB a všetko bude krásne

7:04

123 VALIDÁCIA 01: na strane servera

5:39

124 VALIDÁCIA 02: na strane VUE, inputy sa budú červenať

6:33

125 Computed property ZRADA (vyfintím slug)

4:21

126 TRIX wysiwyg EDITOR

10:49

127 Zmena na ZNOVU-POUŽITEĽNÝ formulár - reusable, bitches!

6:38

128 EDIT FORM 01: predvyplníme hodnoty (aj trixu)

6:07

129 EDIT FORM 02: zajepíšeme zmeny do databázy

8:14

★ Zadanie 09

API auth (tokeny a tak) ⁽⁷⁾

130 API AUTH, TOKENY, prečo, DDOS, middleware, RATE LIMITING

8:02

131 API AUTH cez jednoduchý API TOKEN 01

8:52

132 BEARER TOKEN, api auth cez jednoduchý API TOKEN 02

7:33

133 JWT, JSON WEB TOKEN, OAUTH

6:10

134 HASHED tokeny (pre verejné API)

13:37

135 + a - SPA appiek a ZÁVER KURZU AHOJ ČAU SRANDA BOLA

9:00

★ Zadanie 10

Lektor online kurzu

Yablko (Roman Hraška)

Front-end, back-end

Ďalšie programátorské tutoriály (a rady pre život v IT svete) nájdeš na mojom youtube rob web s yablkom. Na internete pôsobím roky. Som autorom kurzu WEBREBEL. Predtým Nauč sa jQuery, Nauč sa CodeIgniter, Yablkov TurboTip, Robíme WordPress a potom desiatok ďalších kurzov, ktoré nájdeš aj tu. Napísal som kopu článkov pre zajtra.sk, brm.sk, medium a inde. Všade ma nájdeš ako yablko. Napríklad na yablko.sk alebo youtube.com/yablko.

4,9 Hodnocení

Hodnocení studentů

Hodnocení od studentů zapsaných v kurzu na Skillmea.

4,9 z 5 · 90 hodnocení

Peter V.

před více než 4 roky

Vďaka za super kurz.

Dominik N.

před téměř 5 roky

Top, ako všetky tvoje kurzy. Pri tomto sa neskutočne bavím! Poznámka, že robím tento kurz na Vianoce 2018, lebo som smutný ... :D :D Vrelo odporúčam! Vďaka

Martin B.

před téměř 5 roky

Za mňa topka učím sa full-stack laravel + vue.js pred tým som sa sám učil symfony + react avšak nešlo mi to vôbec. Po týchto kurzoch Laravel a vue.js som sa to omnoho rýchlejšie naučil. Nehovoriac o naozaj zaujímavom humore yablka :D, ktorý je úplne úžasný a nedovolí ti zaspať. Určite odporúčam full-stack programátorom, ale aj frontenďákom, keďže nieje na škodu čosi to vedieť aspoň ako to funguje ten backend. Predsa len mindset programátora by mala byť otvorená všetkým technológiam a smerom.

Július S.

před asi 5 roky

Naozaj monstruozny kurz. Mne sa praveze pacila ta cast s laravelom, nesuhlasim s tymi, ktori tu pisali, ze frontendaci mozu vyuzit len cast kurzu a ostatne je im nanic. Tym, ze pridal aj backend, frontendakov nijako neposkodil. Treba si uvedomit, ze VUE je aj backendovou zalezitostou a Yablko to celkom spravne ukazal. A ked uz php backend, tak snad musel pouzit nejaky framework, snad to nebude robit v pure php? Uz nejakych 18 rokov programujem v php s vlastnym frameworkom a uplne ma uchvatilo, ako laravel riesi tie veci, ktore som aj ja musel vo svojom frameworku vyriesit na low-level urovni. Neviem-neviem, ci teraz nezahodim ten moj framework a neprejdem na laravel :)

Doporučené online kurzy

Předplatné Online kurzy

524 Kč

měsíčně (roční platba)

Koupit samostatný kurz

3 790,00 Kč

doživotní přístup