Vue.js Crash Course

Traversy Media July 1, 2024
Video Thumbnail

About

No channel description available.

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

Loading...
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)

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)

(45)
$9.19
FREE delivery Sat, Apr 4 on your first order
Loading...
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

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

(322)
$21.59
FREE delivery Sun, Aug 10 on your first order
Loading...
(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

(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

(3,057)
$15.99
Prime
200+ bought in past month
Loading...
GLP-1 Patches-Weight Management Patches for Men & Women, Balance Metabolism(P2)

GLP-1 Patches-Weight Management Patches for Men & Women, Balance Metabolism(P2)

(3)
$35.99
FREE delivery Mon, Sep 1
Loading...
Hey Curls toronto 5-in-1 Hot Air Styler & Blow Dryer Brush, Negative Ionic Feature for Efficient Drying, Frizz Management, Curling, Volumizing & Straightening (White)

Hey Curls toronto 5-in-1 Hot Air Styler & Blow Dryer Brush, Negative Ionic Feature for Efficient Drying, Frizz Management, Curling, Volumizing & Straightening (White)

(9)
$32.11$30.22
FREE delivery Dec 3 - 23
1K+ bought in past month
Loading...
Animal Handling Gloves - Heavy Duty Protective Gauntlets for Pet Grooming | Puncture Resistant Bite Sleeves | Scratch Proof Hand Guards for Safe Wildlife &Livestock Management

Animal Handling Gloves - Heavy Duty Protective Gauntlets for Pet Grooming | Puncture Resistant Bite Sleeves | Scratch Proof Hand Guards for Safe Wildlife &Livestock Management

(0)
$14.76
$5.99 delivery Jul 2 - 22
Loading...
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)

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)

(2,447)
$109.99$96.08
FREE delivery Sun, Jun 29Only 3 left in stock.
Loading...
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
Best Seller

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

(196)
$159.99
FREE delivery Mon, Jun 16
100+ bought in past month
Loading...
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

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

(180)
$64.99
FREE delivery Thu, Jun 26
Loading...
IBF Black Desk, Modern Computer Desk for Home Office, Industrial Simple Pc Gaming Writing Study Desk in Bedroom, Wood Metal Laptop Workstation Executive Work Computer Table, Black Oak, 55 Inch

IBF Black Desk, Modern Computer Desk for Home Office, Industrial Simple Pc Gaming Writing Study Desk in Bedroom, Wood Metal Laptop Workstation Executive Work Computer Table, Black Oak, 55 Inch

(131)
$199.96
FREE delivery Jul 2 - 10