Skip to content

Naučím ťa Composition API - nový spôsob, ktorým vo Vue môžeš písať komponenty. Podobá sa na React Hooks, má silný TypeScript support a dovoľuje ti upratať si kód kam chceš. Pomôže hlavne pri veľkých komponentoch. V úvode dám Composition API rýchlokurz, potom ním rozhýbem appku.

Notifications You must be signed in to change notification settings

yablko/vue3-composition-api

Repository files navigation

Vue 3 kurz ✨ Composition API

Naučím ťa Composition API - nový spôsob, ktorým vo Vue môžeš písať komponenty. Podobá sa na React Hooks, má silný TypeScript support a dovoľuje ti upratať si kód kam chceš. Pomôže hlavne pri veľkých komponentoch. V úvode dám Composition API rýchlokurz, potom ním rozhýbem appku, dizajn ktorej som vytvoril v Tailwind CSS kurze.

Ak ma chceš podporiť, môžeš cez ❤️ PATREON https://patreon.com/yablko.
Patróni majú všetky videá skôr, kurzy dostanú aj ako text a majú ďalšie výhody 👍


Vue 3 kurz ✨ Composition API (2h 20m 20s)

:: https://youtu.be/BB6El6LPWkE

youtube tutorial link


Odkazy

Vue 3 + Composition API
:: https://v3.vuejs.org
:: https://composition-api.vuejs.org/api.html
:: https://v3.vuejs.org/guide/composition-api-introduction.html

Composition API cheat sheet
:: https://www.vuemastery.com/pdf/Vue-3-Cheat-Sheet.pdf

Vue 3 rýchlokurz ✨ programovanie cez komponenty
:: https://github.com/yablko/vue3-vite

Kurz Vue.js + single page aplikácie
:: https://www.learn2code.sk/kurzy/vue-js-single-page-aplikacie/

VS Code stuff
:: https://marketplace.visualstudio.com/items?itemName=octref.vetur
:: https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets
:: https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets

4 Vue3 Composition API Tips You Should Know
:: https://learnvue.co/2020/01/4-vue3-composition-api-tips-you-should-know

How to use the emit using COMPOSITION API
:: u3u/vue-hooks#70

$refs and the Vue 3 Composition API
:: https://markus.oberlehner.net/blog/refs-and-the-vue-3-composition-api

Spomínané (krásne) Flight Simulator video
:: https://www.youtube.com/watch?v=0w7q1ZFfsxs


Úlohy (a.k.a. hraj sa s kódom, inak sa to nenaučíš)

- po zobrazení formuláru NECH SA FOCUSNE input/textarea
  nech hneď môžeš písať 

- aby sa INPUT pre pridanie nového záznamu PREČISTIL
  nech nemusíš ručne mazať text pred zadávaním

- zmeniť EDIT CARD na IKONKU
  ja zatiaľ edit proces štartujem cez right-click / double-click

- dorob VYMAZANIE listu 
  zatiaľ sa dá len UPRAVIŤ jeho názov 

- odoslanie formuláru cez CTRL + ENTER
  alebo CMD + ENTER na macu, alebo SHIFT + ENTER, je to na tebe

- pri EDITE názvu listu:
  - FOCUSNÚŤ sa dnu, automaticky vyznačiť text 
  - po BLUR alebo ESC nech sa vráti pôvodný text

- ESC nech zruší popup a zavrie overlay

- ARCHIVE namiesto DELETE
  - každý card bude evidovať archived: true/false
  - zobrazia sa len archived === false
  - TRASH namiesto vymazania zmení archived na true

toto sú prevažne drobné usability vylepšenia
najlepšie samozrejme bude, keď vezmeš kód a prerobíš ho na vlastný projekt
vymakanejší projekt

Rozbehaj kód

yarn install (npm run install)
yarn serve (npm run serve)

❤️ PATREON https://patreon.com/yablko
🎬 YOUTUBE 2 https://youtube.com/yablko
🍿 TWITCH https://twitch.com/yablko_
📸 INSTAGRAM https://instagram.com/yablko
👍 FACEBOOK https://www.facebook.com/yablko.smrdi
🐦 TWITTER https://twitter.com/yablko
📚 BLOGY https://medium.com/@yablko

📚 Všetky moje learn2code kurzy
:: https://www.learn2code.sk/instruktori/roman-hraska 1300+ videí

About

Naučím ťa Composition API - nový spôsob, ktorým vo Vue môžeš písať komponenty. Podobá sa na React Hooks, má silný TypeScript support a dovoľuje ti upratať si kód kam chceš. Pomôže hlavne pri veľkých komponentoch. V úvode dám Composition API rýchlokurz, potom ním rozhýbem appku.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published