Vue.js + single page aplikácie

Späť na kurzy

Všetky ONLINE kurzy

od 25,00 € / mesiac


alebo

4.8 z 5

Hodnotenie

5x
96%
4x
0%
3x
0%
2x
0%
1x
4%

Všetky online kurzy za 499 €

Viac info

Course duration 16h 34m 12s
Course chapters 150 kapitol
Course difficulty Mierne pokročilý

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.

Kupuj, kým je v akciovej cene 99 eur a uč sa hneď:) Ako býva zvykom, postupne pridávam ďalšie videá. Kým ich nebude 100.


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ý

Zoznam kapitol online kurzu


  • Reaktívne frameworky 
    •  01 Vue preview 01 (ukážem ti Vue.js)  
    •  02 Vue preview 02 (zbúcham rýchlo stránku)  
    •  03 Vue preview 03 (v kurze všetko vysvetlím)  
    •  04 Ako bude kurz prebiehať? Čo ťa naučím? To sú otázky  
    •   Zadanie 01  
    •  05 Výhoda Vue oproti React alebo Angular  
    •  06 Pointa reaktívnych frameworkov, UI == dáta, source of truth  
    •  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)  
    •  08 Čo potrebuješ pre tento kurz? Vedieť, napríklad  
    •   Zadanie 02  
  •  Komponenty
    •  09 Components 01 - programovanie cez komponenty  
    •  10 Vymysli si vlastný HTML element (Components 02)  
    •  11 <slot>, [props], :key (Components 03)  
    •  12 Single File Components, toto chceš! (Components 04)  
    •  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)  
  •  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  
  •  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  
    •  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  
    •  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  
  •  Vue komponenty pre Flash a Komentáre     
    •  88 Vue FlashMessage komponent  
    •  89 Session, Laravel flash message  
    •  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 
    •  Makám na tom;) Ďalšie videá postupne pribúdajú  
    •  NEKONČÍME


Kurz je možné vyskúšať aj zdarma!