VueJS, TailwindCSS & FrappeUI Training - Day 2 | VueJS with API & TailwindCSS Basics

preview_player
Показать описание


Notes & Links
----------------------

This is Day 2 (out of 5 days!) of VueJS, TailwindCSS & FrappeUI Training for Frappe School! If you want to get started or learn more about Frappe's new frontend stack, this is your chance.

More Resources:

--------------
Chapters
--------------

00:00:00 - Introduction
00:01:32 - Day 1 Recap
00:02:00 - Building simple API-backed VueJS app
00:05:48 - Fetching data from API
00:07:40 - Question: Composition API / script setup w/o build setup
00:10:50 - Storing the data
00:13:17 - Question: Difference b/w ref and reactive
00:15:42 - Rendering list using v-for
00:17:50 - `v-bind` for dynamic image source
00:20:54 - `onMounted` Lifecycle Hooks
00:23:19 - Basic Styling
00:24:43 - Components in VueJS / Single File Components
00:26:35 - Creating our first component
00:27:21 - Import and using a component
00:28:28 - Components in the wild / Overview of Gameplan source code
00:30:13 - Building the Item component
00:30:29 - Passing data to a component
00:31:47 - Props / Catching data in a component
00:33:52 - Why components? / Benefits of components
00:36:39 - Extracting out one more component
00:40:50 - Conclusion of Vue Basics
00:41:51 - Question: v-model / Form binding re-explained
00:44:22 - `watch` / Reacting with side effects on changes
00:48:36 - Question: Example of `watch` in production apps
00:52:40 - TailwindCSS Basics ✨
00:53:44 - Utility-first approach / comparison with Bootstrap
00:58:17 - TailwindCSS docs
00:59:00 - Hands-on with TailwindCSS
01:00:20 - Reset styles / Normalize
01:03:00 - Styling a section with TailwindCSS
01:14:15 - Integrating TailwindCSS in a VueJS project
01:15:42 - The Tailwind Config file
01:16:51 - Configuring 'content' paths
01:20:57 - Building a 'Badge' component with VueJS & TailwindCSS
01:27:18 - `computed` in VueJS
01:36:02 - Gotcha of dynamic TailwindCSS classes
01:38:19 - Component `slots`
01:44:09 - Programmatically accessing component slots in script
Рекомендации по теме
Комментарии
Автор

44:01 where can i get this project's code?

minecraftserver-nx
Автор

Where is this training conducted? Don't see this listed in frappe school.

ntdude