In this comprehensive course, Jeremy McPeak will teach you the fundamental concepts you need to start building applications with Vue 3.
► Download Vue.js scripts and plugins from CodeCanyon: https://codecanyon.net/search/vue.js?utm_campaign=yt_tutsplus_1GNsWa_EZdw&utm_medium=referral&utm_source=youtube.com&utm_content=description
UI frameworks have drastically changed the way we write web applications. There are many frameworks to choose from, and picking one can be hard. In this course, you'll learn why Vue.js is a great choice, and you'll discover how to use it in detail.
You'll start with building the simplest Vue components and learning to use core features like data binding, props, events, and computed properties. Then you'll build that knowledge step by step with practical projects learning how to use the Vue CLI, forms, watchers, and custom events. You'll also master key concepts like the Vue router and the Composition API.
By the end of this course, you'll be confident in using Vue.js for all your front-end development projects.
Here's what the course covers:
1. Introduction
00:00:00 1.1 Introduction
2. Vue.js With no Tool-Chain
00:02:31 2.1 Getting Started With Vue
00:10:51 2.2 Using Loops to Generate Content
00:17:00 2.3 Binding Data to Attributes
00:25:11 2.4 Setting Up Events
00:33:15 2.5 Binding CSS Classes I
00:41:48 2.6 Using Computed Properties
00:48:05 2.7 Binding CSS Classes II
00:55:00 2.8 Introducing Components
01:04:19 2.9 Understanding Data Flow
3. Using the Vue CLI
01:13:00 3.1 Getting Started With the Vue CLI
01:21:30 3.2 Starting a Project From Scratch
01:32:18 3.3 Applying CSS to Components
4. Working With Data
01:41:51 4.1 Using the created() Lifecycle Event to Load Data
01:48:19 4.2 Working With Unset Props
01:55:19 4.3 Deciding When to Load Data
02:01:14 4.4 Working With Forms
02:08:43 4.5 Validating Forms
02:14:39 4.6 Updating and Filtering Data
02:21:05 4.7 Using Watchers
5. Creating and Using Custom Events
02:25:19 5.1 Creating Custom Events
02:32:48 5.2 Writing a Global Event Bus
6. Using Vue Router
02:44:37 6.1 Introducing Vue Router
02:53:19 6.2 Using Route Params
02:59:18 6.3 Loading Data for Views
03:10:07 6.4 Watching Params to Reload Data
03:16:57 6.5 Using the Router's Active Class
03:23:36 6.6 Nesting Routes
7. Using the Composition API
03:30:52 7.1 Introducing the Composition API
03:40:26 7.2 Providing and Injecting Dependencies Into Components
03:48:18 7.3 Accessing Props and Router Functions
03:54:58 7.4 Binding Data and Working Wth Forms
04:06:00 7.5 Defining Computed and Watched Values
04:16:18 7.6 Implementing the Delete Functionality
8. Conclusion
04:20:42 8.1 Conclusion
NOTE: Current recommendations are to use create-vue with the Vite tooling for new Vue projects. vue-cli is in maintenance mode, but still works for creating Webpack-powered Vue apps like in this course.
► Download unlimited photos, fonts, and templates with Envato Elements: https://elements.envato.com/?utm_campaign=yt_tutsplus_1GNsWa_EZdw&utm_medium=referral&utm_source=youtube.com&utm_content=description
Read free Vue tutorials on Envato Tuts+: https://code.tutsplus.com/categories/vue?utm_campaign=yt_tutsplus_1GNsWa_EZdw&utm_medium=referral&utm_source=youtube.com&utm_content=description
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Envato Tuts+
Discover free how-to tutorials and online courses. Design a logo, create a website, build an app, or learn a new skill: https://tutsplus.com/?utm_campaign=yt_tutsplus_1GNsWa_EZdw&utm_medium=referral&utm_source=youtube.com&utm_content=description
Envato Elements
All the creative assets you need under one subscription. Customize your project by adding unique photos, fonts, graphics, and themes.
► Download Unlimited Stock Photos, Fonts & Templates with Envato Elements: https://elements.envato.com/?utm_campaign=yt_tutsplus_1GNsWa_EZdw&utm_medium=referral&utm_source=youtube.com&utm_content=description
► Subscribe to Envato Tuts+ on YouTube: https://www.youtube.com/tutsplus
► Follow Envato Tuts+ on Twitter: https://twitter.com/envato
► Follow Envato on Facebook: https://www.facebook.com/envato
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -