Programming & Web Development Crash Courses - Vue.js Crash Course

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