VueJS, TailwindCSS & FrappeUI Training - Day 1 | DOM Manipulation & VueJS Basics
Join in to BWH Community Discord Server: / discord !
Day 2: • VueJS, TailwindCSS & FrappeUI Training - D...
Day 3: • VueJS, TailwindCSS & FrappeUI Training - D...
This is Day 1 (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. We start with the basics of DOM Manipulation to understand what problem a framework like VueJS tries to solve, moving on to learn the basics of VueJS hands-on! 🚀
Buy me a Coffee: https://buymeacoffee.com/buildwithhus...
Day 1 Readings: https://github.com/BuildWithHussain/v...
Day 1 Assignment: https://github.com/BuildWithHussain/v...
For schedule, past episodes and more, check website: https://bwh.live
My Setup: https://buildwithhussain.dev/setup
Articles: https://bwh.live/articles
My Twitter: https://x.com/NagariaHussain
More Resources:
About Frappe: https://frappe.io
ERPNext: https://erpnext.com
Frappe Framework: https://frappeframework.com
--------------
Chapters
--------------
00:00:00 - Introduction
00:00:40 - Why learn this stack?
00:01:28 - Goals
00:02:30 - Structure of this course
00:03:03 - DOM Manipulation
00:03:11 - Question: Why Frappe choose VueJS?
00:06:11 - Building a counter with Vanilla JavaScript
00:18:25 - Question: `innerText` vs `innerHTML`
00:20:05 - Building a Todo App with Vanilla JavaScript
00:30:00 - Implementing ToDo Delete / Refactoring to use Array
00:38:36 - Why Vue / React / etc.?
00:40:45 - Brief on Virtual DOM
00:41:35 - What is VueJS?
00:43:51 - Getting started with VueJS
00:47:15 - Two APIs in Vue, Options vs Composition API
00:49:45 - Building a counter with VueJS
00:56:20 - Note on Virtual DOM
00:57:30 - Building a Todo App with VueJS
00:57:54 - Setting up a new Vue Single Page Application (with Vite)
01:02:00 - Structure of VueJS Single Page Application Project
01:03:38 - Vue Single File Components (SFCs) with Composition API
01:10:23 - Composition vs Options API Take 2
01:13:50 - Continuing with Todo App
01:19:00 - v-for / List Rendering
01:21:57 - v-model / Binding variables to inputs
01:26:37 - Understanding Reactivity (on the board!)
01:35:02 - Implementing Todo delete
01:37:09 - Implementing Todo mark as completed
01:39:25 - v-if/v-else / Conditional Rendering
01:43:26 - Using `ref`
01:44:36 - v-show (vs v-if)
01:47:33 - Question: Example of using ternary operator