Vue.js Crash Course
About
No channel description available.
Latest Posts
Video Description
3 Hour crash course of the Vue.js framework. You will learn all the fundamentals including components, directives, lifecycle, events and much more. Check Out Our Sponsor Daily.dev: https://daily.dev/traversy-media Full Project Code: https://github.com/bradtraversy/vue-crash-2024 Blog Post: https://www.traversymedia.com/blog/vue-crash-course Check Out My Courses: https://traversymedia.com Timestamps: 0:00 - Intro 2:19 - Daily.dev Sponsor 3:11 - What is Vue.js? 4:45 - Prerequisites 6:17 - Role of Frontend Frameworks 8:40 - Why Vue.js? 11:14 - Vue Components 13:39 - Getting Setup 15:40 - Using The Vue CDN 20:54 - Create-Vue Setup 22:30 - Vue Official Extension 22:58 - Exploring Folders & Files 26:10 - Boilerplate Clean Up 26:50 - Component Structure 27:25 - Options API data() & Interpolation 28:36 - v-if, v-else & v-else-if Directives 30:43 - v-for Directive & Looping 32:17 - v-bind Directive 33:36 - v-on Directive, Events & Methods 35:55 - Composition API - Long Form 39:08 - ref() & Reactive Values 40:35 - Composition API Short Form 42:41 - Forms & v-model 46:38 - Delete task 48:36 - Lifecycle Methods 49:50 - onMounted & Fetching Data 51:58 - Vue Jobs Project Start 52:26 - Tailwind CSS Setup 56:47 - Theme Files & Images 58:16 - Navbar Component 1:01:20 - Hero Component 1:02:30 - Props 1:04:57 - HomeCards & Card Container Component 1:10:20 - JobListings Component & JSON Data 1:16:47 - JobListing Component 1:20:53 - JobListings Limit & showButton Props 1:24:26 - computed() & Truncate Description 1:30:41 - PrimeIcons 1:32:35 - Vue Router & Home View 1:39:52 - Jobs View 1:41:55 - RouterLink 1:46:07 - Navbar Active Link 1:50:42 - Not Found Page 1:56:27 - JSON Server REST API 1:59:50 - Fetch Data For JobListings 2:03:42 - reactive() Function 2:05:15 - JobListings Refactor To reactive() 2:07:26 - Vue Spinner 2:09:50 - Fetch Single Job & Display Data 2:19:06 -BackButton Component 2:21:03 - Proxying 2:23:54 - Add Job Page 2:32:20 - Save Job POST 2:37:15 - Toast Notifications 2:40:08 - Delete Job 2:44:14 - Edit Page 2:47:06 - Fetch Job To Edit 2:50:58 - Update Job 2:52:50 - Netlify Deployment
Boost Your Web Dev Skills
AI-recommended products based on this video
Travel Essentials for Apple Watch Charger, 3 in 2 Multi Fast Charging Cable for iPhone Charger, USB C Cable Cord Compatible with iWatch Ultra(Gray, 4FT)
Rechargeable Flashlights High Lumens, KOOPER Super Bright Flash Light Pink, Small Zoomable LED Flashlight with 3 Lighting Modes, Portable Tactical Flashlight for Camping Essentials, Gift for Women
(2 Pack) Outlet Wall Mount Holder for Google Home Mini and Google Nest Mini, A Space-Saving Accessories with Cord Management for Google Mini Smart Speaker, No Messy Wires or Screws
GLP-1 Patches-Weight Management Patches for Men & Women, Balance Metabolism(P2)
Hey Curls toronto 5-in-1 Hot Air Styler & Blow Dryer Brush, Negative Ionic Feature for Efficient Drying, Frizz Management, Curling, Volumizing & Straightening (White)
Animal Handling Gloves - Heavy Duty Protective Gauntlets for Pet Grooming | Puncture Resistant Bite Sleeves | Scratch Proof Hand Guards for Safe Wildlife &Livestock Management
Desk, 55 inch Computer Desk with Non-Woven Storage Bag, Office Work Desk for Small Spaces, Writing Study, Industry Modern Table for Bedroom, Home, Office (Vintage Brown)
VASAGLE Vanity Desk with Mirror, Makeup Vanity Table with Lights, Adjustable Brightness, 31.5-Inch Wide Makeup Desk with 2 Drawers, 3 Storage Compartments, for Bedroom, Modern, White URDT184T14
COTUBLR 31 Inch Computer Desk, Home Office Desk, Simple Modern Small Desk for Bedroom, Writing Desk with Storage Bag, Study Table for Students, Grey Oak
