Vue.js + single page aplikácie
- Level
- Kapitol
- 198
- Kategória
- Programovanie
- Hodnotenie
- 4,9 z 5
- Dĺžka
- 21h 22min
- Jazyk
- SK
Popis online kurzu Vue.js a single page aplikácie
Reaktívne frameworky (Vue, React, Angular) ti pomáhajú programovať svižné UI. Zo statického HTML kódu spravia živú šablónu. Samotnému HTML kódu pridáš pravidlá, a vždy keď príde zmena, sám sa podľa nich upraví.
Môžeš programovať cez komponenty. Vue ti dovolí vymyslieť si vlastné HTML elementy a naprogramovať im výzor a správanie. A keď príde zmena, prehliadač sám vymení len daný komponent, nemusí refreshnúť celú stránku.
Reaktívne frameworky držia UI zosynchronizované s dátami. Ak máš v premennej 3 články, 3 články svietia aj na obrazovke. Ak jeden vymažeš, automaticky zmizne z obrazovky. Zabudni na jQuery selecty, appendy, Vue to spraví za teba.
Tento online kurz ťa naučí reaktívne frameworky. A naučí ťa Vue.js. A single page aplikácie. V januári 2021 bol kurz aktualizovaný na novú verziu VUE 3. Pribudlo 41 nových videí o VUE 3 a Composition API.
MÔŽEM SA TI S NIEČÍM PRIZNAŤ?
Volám sa yablko. A úprimne? Vue je strašná sranda. A toto zatiaľ vyzerá byť môj najlepší kurz. Ja viem, že to hovoria všetky kapely o každom novom albume. Ale ja nie som kapela. A ja to nehovorím. A teraz to hovorím. Tento sa mi podaril:)
Vytvorím niekoľko mini stránok. Jednu veľkú single page appku. Všetok kód si môžeš stiahnuť. Dostaneš úlohy, na ktorých si Vue precvičíš. Prístup do diskusie. Kopu materiálov na stiahnutie. Pod každým videom je malý článok s ďalším infom. Čiže 100 videí, 100 blogov. Choď do toho. Ja by som išiel.
TAKTO TO BUDE PREBIEHAŤ?
V prvej časti kurzu ťa naučím Vue.js. Resp. naučím ťa reaktívne frameworky a konkrétne použijem Vue.js. To znamená, že keby sa po tomto kurze rozhodneš prejsť na React alebo Angular, budeš presne vedieť, čo sa deje.
V druhej časti kurzu vyrobím veľkú stránku. Prvá časť kurzu bude plná menších príkladov, druhá bude plná jednej veľkej reality. V prvej sa naučíš Vue.js, v druhej ho použijeme a spravíme skutočnú stránku, veľkú Single Page Aplikáciu™.
To sú stránky ako Netflix, Spotify a Gmail. Ja spravím single page admin rozhranie pre skutočnú stránku.
PREČO VUE?
Malý, rýchly, šikovný, použiteľný bez build tools, raketovo naberá na popularite, najlepší pre začiatočníka pre pochopenie konceptov za reaktívnymi frameworkami, najlepšia vstupná brána do tohoto sveta. A ako bonus, nestojí za ním monolitická korporácia. Angular = Google, React = Facebook.
Ale môj cieľ je znova naučiť ťa Vue tak, že hneď pochopíš aj React alebo Angular, keď sa na ne pozrieš. Tento kurz ťa naučí reaktívne frameworky ako také. A použijem na to Vue.
V mojich online kurzoch sa vždy snažím vysvetliť dôvod. Nielen ukázať Vue, ale vysvetliť, čo je jeho pointa. Prečo existuje. Čím je iný ako to, čo sme mali pred ním. Prečo ťa má zaujímať, ak poznáš JavaScript alebo jQuery. Na akých konceptoch stojí a na čo sa hodí.
Pretože vždy existujú alternatívy. Hlavne v JavaScript svete. Ja ťa naučím Vue tak, aby si chápal aj React a Angular. Riešia podobné problémy, len trocha inak. Kód vyzerá inak, ale teba nedostane. Ty budeš chápať, čo ten kód robí a prečo.
ČO POTREBUJEŠ VEDIEŤ?
Potrebuješ základy HTML, CSS a JavaScriptu. Úprimne, Vue.js je jednoduchší ako čistý JavaScript. Po správnosti by som ti mal tvrdiť, že potrebuješ vedieť JS, keď sa chceš učiť framework.
Ale bol by som pokrytec. Ja som sa najprv naučil jQuery, až potom (aj jeho používaním) som sa postupne doučil JavaScript. Toto isté sa tebe môže stať s Vue. Ale HTML potrebuješ určite. A CSS silno pomôže. A potrebuješ mať pojem o programovaní:)
V neskorších videách Vue kurzu budem používať NPM, Module Bundlers a ďalšie JS tools. Ak ich nepoznáš, google ti pomôže vysomáriť sa zo základov. Ak sa to ale chceš naučiť poriadne, mám online kurz presne na to.
Ak si nikdy neprogramoval, mám kurz, v ktorom sa síce pracuje v PHP, ale naučí ťa základy programovania a OOP. Má to priam v názve. Prípadne ak poznáš jQuery alebo si videl nejaké tie JS videá z Webrebel 1 kurzu, pokojne môžeš ísť na Vue.
Čo všetko dostaneš
- videotutoriály o Vue.js a single page aplikáciách,
- desiatky nadupaných videotutoriálov,
- certifikát o absolvovaní kurzu,
- garancia vrátanie peňazí do 14 dní, v prípade, že s kurzom nebudeš spokojný.
Kapitoly online kurzu
Reaktívne frameworky (16)
Ukážka zdarma
9:54
Ukážka zdarma
10:02
Ukážka zdarma
8:17
LARAVEL (a Vue 3)
Ukážka 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ážka zdarma
4:55
★ Zadanie 01
05 Výhoda Vue oproti React alebo Angular
6:36
Ukážka 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ážka zdarma
6:20
★ Zadanie 02
Komponenty (10)
Ukážka zdarma
6:31
Ukážka zdarma
5:51
Ukážka zdarma
10:19
Vue 3 | 3 Prepíšem Component appku do Vue 3
5:19
Ukážka 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 (10)
Ukážka 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) (12)
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 (10)
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) (21)
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 (3)
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 (25)
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 | 36 POPUP, origins
4:22
Vue 3 | 37 POPUP OVERLAY, a animácia
7:01
Vue 3 | 38 POPUP, finišings
3:53
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) (5)
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 (32)
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
65 Laravel 03 login, register, auth, databáza, migrations
9:24
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
80 @guest @auth / login / logout / register
8:01
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 (12)
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 (35)
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) (7)
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
Hodnotenie
23
Kurzov
Hodnotenia študentov
Hodnotenia od študentov zapísaných v kurze na Skillmea.
4,9 z 5
· 90 hodnotení
Peter V.
5
Vďaka za super kurz.
Dominik N.
5
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.
5
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.
5
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 :)
