Vue.js + single page aplikácie

21h 22m 18s
Čas
198
Kapitol
2 632
Študentov
4.9
Hodnotenie
Mierne pokročilý
Level
slovenský
Jazyk kurzu
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 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 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š

  • hotový kurz bude mať približne 100 kapitol,
  • 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ý.
Online kurz Vue.js + single page aplikácie je možné

Zoznam kapitol

Reaktívne frameworky
LARAVEL (a Vue 3)
Vue 3 | 2 Prepíšem Dudes app do Vue 3
Tipy, rady a pravidlá pre každý kurz
★ Zadanie 01
05 Výhoda Vue oproti React alebo Angular
Ak nefunguje PARCEL (alebo template)
"[Vue warn]: You are using the runtime-only build of Vue"
07 Ak by som to chcel spraviť v čistom JS (pretože masochizmus)
★ Zadanie 02
Komponenty
Vue 3 | 3 Prepíšem Component appku do Vue 3
13 Scoped Styles, komponent má vlastné CSS (Components 05)
14 Event a Key modifikátory, progress bar (Components 06)
15 Jeden ROOT element? Prečo? Otáznik? (Components 07)
16 Komunikácia komponentov cez $emit (Components 08)
17 Nemusíš všetko (+ frustrujúce úlohy)
Vue 3 ⚡️ Vite a Single File Components
Vue 3 | 5 INŠTALÁCIA, a predstavím appku
Vue 3 | 6 SINGLE FILE KOMPONENTY, sass a prettier
Vue 3 | 7 VUE ZÁKLADY, zopakujme si
Vue 3 | 8 VLASTNÝ KOMPONENT, pravidlá pre ne
Vue 3 | 9 KOMUNIKÁCIA, smer rodič dieťa
Vue 3 | 10 VUE EVENTY, event object
Vue 3 | 11 KOMUNIKÁCIA, smer dieťa rodič
Vue 3 | 12 VUEX vs Emit vs EventBus
Vue 3 | 13 KOMUNIKÁCIA, EventBus cez mitt
Ladíme (a Bulma app)
18 Virtual DOM (Toretto?)
19 BULMA, pretože prečo nie
20 v-if, v-show, :class, [disabled]
21 Computed Properties
★ Zadanie 03
22 Poo
23 Vue animácie cez <transition> komponent
★ Zadanie 04
24 Čo má byť komponent? Tvoja mamka (prečo som to povedal, prepáč, som zlý človek)
25 v-cloak, prestaň blikať, čo robíš
26 Vue CLI / GUI / UI / Hui / Dui / Lui / Chui rýchlokurz
★ Zadanie 05
Vue CLI a nastavovačky
27 CLI 01 Babel, Typescript, PWA (Progressive Web Apps), Router
28 CLI 02 Vuex, Preprocessing, Unit testing, End-to-End testing
29 CLI 03 ESLint, Prettier, Linter / Formatter, Vue CLI config
Ukážka: toto bude nasledovať (predtým ESLint atď.)
30 VS Code 01 ESLint
31 VS Code 02 ESLint + Prettier
32 VS Code 03 Prettier + Vetur vs. js-beautify-html (pre HTML/Vue šablóny)
33 Vue Snippety + moje VS Code extensions
34 Užitočné Vue tools, Evan You a Dragonball a prečo Vue??
35 Vue NPM verzie "[Vue warn]: You are using the runtime-only build of Vue"
SPA (Single Page Apps)
36 Vue Router (iTunes Single Page App začína)
37 BUILD script, konzolové servery, všetok kód sa stiahne naraz:(
38 Lazy Loading, Code Splitting (na neskôr, pre bigass stránky)
39 Vue filters, iTunes app
40 Axios, práca s API (konkrétne iTunes)
41 extractData( object destructuring )
42 Free APIs a rvem si srcco
43 Vue Style Guide, pravidlá pre Vue kód, Refactoring 01
44 Refactoring 02
45 props / $emit, komunikácia komponentov
46 Event Bus, komunikácia komponentov, Lifecycle Hooks
47 Komponent má byť samotár (veľmi romantické)
48 Externé (S)CSS, google a lokálne fonty
49 "THE" komponenty
50 Redizajn (toto video si pusti na pozadí, keď si varíš párky)
51 Sila samostatnosti komponentov (a čo som ukradol?)
52 Automatický Sass import + animácia objavenia (sa)
53 Vlastný helper functions PLUGIN, webpack eslint --fix, SPA autofocus
54 lodash VS. lodash-es, debounce na hľadanie počas písania
55 Kedy NIE arrow functions, odsekni písmená (auč) a upratovačky
★ Zadanie 06
Vue 3 📻 SPA iTunes
Vue 3 | 14 Opravíme iTunes appku vo Vue 2, node-gyp node-sass problém
Vue 3 | 15 Prepíšem iTunes app do Vue 3
Vue 3 | 16 EventBus, Filters, Inline template (iTunes 3, časť 2)
Vue 3 ✨ Composition API
Vue 3 | 17 INTRO, composition api
Vue 3 | 18 COMPOSITION API, verzus OPTIONS API
Vue 3 | 19 REF, a computed
Vue 3 | 20 REACTIVE, a lifecycle hooks
Vue 3 | 21 TRUĽO, origins
Vue 3 | 22 DATA.JS, moja fake databáza
Vue 3 | 23 PREPÍNATKO, prvá dávka reaktivity
Vue 3 | 24 LIST FORM, budeme pridávať
Vue 3 | 25 ULOŽÍME NOVÝ, list
Vue 3 | 26 EVENT BUS, cez mitt
Vue 3 | 27 ULOŽÍME NOVÝ, card
Vue 3 | 28 SILA COMPOSITION API, je v upratovaní
Vue 3 | 29 LABELS, farebné sú
Vue 3 | 30 TAGS a IMAGES, vue trik pre obrázky v src
Vue 3 | 31 REFACTORING, komponenty nové
Vue 3 | 32 ANIMÁCIE, pre luxusný produkt
Vue 3 | 33 CONTENT EDITABLE, upravíme list title
Vue 3 | 34 REF, na DOM element
Vue 3 | 35 EDITUJEME, list title
Vue 3 | 36 POPUP, origins
Vue 3 | 37 POPUP OVERLAY, a animácia
Vue 3 | 38 POPUP, finišings
Vue 3 | 39 DELETE, card
Vue 3 | 40 EDIT CARD, text
Vue 3 | 41 EDIT DONE, composition api done
Vuex (a history mode)
56 Vuex 01
57 Vuex 02 state, mutations
58 Vuex 03 actions, getters
59 Vuex 04 čistý kód, väčšie Vuex príklady, rozbehni môj kód
60 History Mode (a čo pre pána znamená 'single page app'?)
Laravel + Vue
61 Laravel? Huh??
62 1 stránka sú 2 appky, poviem ti čo budeme robiť
63 Laravel 01 inštalácia, routes, artisan, VS Code pluginy
64 Laravel 02 controllers, views
65 Laravel 03 login, register, auth, databáza, migrations
Laravel 6 / 01 nové UI a HELPERS package (zmeny v AUTH)
66 Client-side vs. server-side rendering
Ako rozbeháš stiahnutý kód (+ Laravelu bude o kúsok viac)
67 Laravel/Composer update a čo bude ďalej (v kurze, nie živote)
68 Master layout a Config súbory
Laravel 6 / 02 frontend v Laravel 5 vs 6 + ako inštalovať inú verziu
69 nice (Vue a frontend v Laraveli)
70 Databáza, migrácie
71 Modely, kolekcie, z databázy na stránku, juj!
72 Vzťahy medzi modelmi, auto dopĺňanie 'use'
73 FAKER (laravel sám naplní databázu, DB SEED)
74 Usporiadanie dát z databázy, @include šablóny
75 Escaping, JS frameworky v Laraveli, pluralizácia textu
76 CRUD, REST, Resource controllers
77 Podstránka pre kontkrétny článok cez PostController
78 Fajné formátovanie dátumu cez Carbon... a komentáre!
79 Cibri™ si vkus
80 @guest @auth / login / logout / register
81 Form pre koment, hlavná navigácia, named routes a route()
82 Form problém 01 CSRF (Cross Site Request Forgery)
83 Form problém 02 Mass Assignment Exception, odoslanie formu
84 Uloženie do DB cez vzťah, usporiadanie vzťahov
85 Validácia formuláru, výpis chýb, lepšie zabezpečenie formu
86 SLUG v adrese pre lepšie SEO, unique index v DB cez migrate
87 Debug cez Laravel TELESCOPE, efektívne SQL cez EAGER LOADING vzťahov
Laravel 6 / 03 novinky, vylepšenia, Ignition errors
Laravel 6 / 04 update na Laravel 6.0 + ako vymazať Telescope
Vue komponenty pre Flash a Komentáre
88 Vue FlashMessage komponent
89 Session, Laravel flash message
NEMEŇ SÚBORY Z VENDOR ADRESÁRA (ako ja, človek, ktorý je hlúpy)
90 Prechod na ES6 import syntax, ESLint a Prettier sú späť
91 Vue inline-templates
92 Edit a delete linky, doubleclick, blur, contenteditable
93 Práva usera, Authorization Policy, @can, iba autor môže zmazať koment
94 Editácia a mazanie cez AXIOS ajax (aj bez neho)
95 Polish time! (Poľský čas!) Dokončím úpravy, vyladím mazanie
96 Vyladím edit komentu, autovyznačím text a blur vráti pôvodný
97 Flash notifikácia po (ťažko úspešnom) edite a delete
★ Zadanie 07
Vue SPA admin rozhranie
Takýto ADMIN PANEL budeme vyrábať! JUJ!
98 Smooth scroll k elementu a VERY SORRY
99 Vue a Laravel Admin Panely, Dashboardy a CMSká
100 Admin panel frontend kostra
101 ADMIN PANEL Vue Router
102 Admin Panel šťavnatý BULMA.CSS dizajn
103 Cez API ťahám Posty, API controllers, API routes
104 Dáta čo prišli z API nakreslím do tabuľky či troch
105 Lazy Loading a import() a zisti, či je žiadosť AJAXová
106 Auto reload, Hot Module Replacement
107 Vyhľadávanie v Posts, filtrovanie tabuľky
108 VUE WATCHERS a search component
109 VUE MIXINS a reusable kód pre komponenty
110 Transformuj dáta na polceste z DB do JSONu (a taktiež vzťahy)
111 Moment.js pre pekné dátumy v JS (a v našej tabuľke)
112 MATERIAL DESIGN ikonky v BULME pre EDIT LINKY do tabuľky
113 Podstránka pre konkrétny POST (a Resource všeobecne)
114 Pekné EDITAČNÉ LINKY pre Resource podstránky
115 Admin podstránka pre KOMENTÁR (a upratovacie práce)
116 REDIRECT cez router, 404 NOT FOUND a dôležitosť STATUS kódov
117 Mažeme cez API, API status kódy a mesidže
★ Zadanie 08
118 ROUTER-LINK namiesto šupáckych linkov pre šupákov
119 CREATE FORM formulár pre pridanie nového postu
120 SLUG sa AUTOMATICKY vytvára počas písania
121 AUTH vs API AUTH, len prihlásenec sa dostane do admin panelu
122 Uložíme nový post do DB a všetko bude krásne
123 VALIDÁCIA 01: na strane servera
124 VALIDÁCIA 02: na strane VUE, inputy sa budú červenať
125 Computed property ZRADA (vyfintím slug)
126 TRIX wysiwyg EDITOR
127 Zmena na ZNOVU-POUŽITEĽNÝ formulár - reusable, bitches!
128 EDIT FORM 01: predvyplníme hodnoty (aj trixu)
129 EDIT FORM 02: zajepíšeme zmeny do databázy
★ Zadanie 09
API auth (tokeny a tak)
130 API AUTH, TOKENY, prečo, DDOS, middleware, RATE LIMITING
131 API AUTH cez jednoduchý API TOKEN 01
132 BEARER TOKEN, api auth cez jednoduchý API TOKEN 02
133 JWT, JSON WEB TOKEN, OAUTH
134 HASHED tokeny (pre verejné API)
135 + a - SPA appiek a ZÁVER KURZU AHOJ ČAU SRANDA BOLA
★ Zadanie 10

Hodnotenia kurzu

Vue.js + single page aplikácie

Vďaka za super kurz.

Peter V.

Pozri aj tieto kurzy