Vue.js Tutorial: Beginner to Front-End Developer

Показать описание

In this comprehensive course, Jeremy McPeak will teach you the fundamental concepts you need to start building applications with Vue 3.

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.

Here's what the course covers:
1. Introduction
00:00:00 1.1 Introduction

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.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Envato Tuts+

Envato Elements
All the creative assets you need under one subscription. Customize your project by adding unique photos, fonts, graphics, and themes.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Рекомендации по теме

Комментарии

One of the best I've seen so far. Instructor teaches at a very good pace, such that we can follow. Content and delivery are great!

jihecff

This tutorial is an absolute gem! Not only is the instructor a pro at teaching Vue 3, but his soothing voice and clear explanations make it easy to follow along. I could listen to him all day. Thank you for sharing your knowledge and making the learning experience enjoyable!

alnahian

Coming up to halfway on this tutorial and just wanted to express my sincere thanks. I've never been able to get stuck into Vue before but I'm finally starting to understand its merits and how to work with it. Exceptionally well structured course. Very grateful for the time you put into this.

AlexWard

New achievement unlocked: 🎉 The first long YouTube tutorial that I actually completed and didn't leave halfway through.

noOne-feni

I just finished watching your Vue.js video, and I have to say, it was excellently paced! You explained the solid concepts with great rhetoric, and I really enjoyed every bit of it. Thanks for sharing this valuable content!

Luca-tsdq

One of the best courses I've ever seen. Thank you for your work

emalsidog

It would seem I'm not the first to say, which should all the more go to credit your work here, but I am about half way into following along with your video and I would like to express my gratitude to you for it. I am brand new to coding, I have no work experience in the field nor have I been able to attend a college for computer sciences. I am trying my hardest to develop a new, more lucrative set of skills to change both mine and my partners lives for the better. I thoroughly appreciate the time you've taken to show multiple methods of reaching the same goal and explaining the differences in them, as well as your positive attitude throughout the video. Thank you for the help, is all I'm trying to say, thank you.

codycalvert

Fortunately, Envato Tutorials never disappointed me. It has the most simply explained courses without any doubt.

iamzareef

One of the few courses on youtube that I have actually followed completely till the end. Thanks a lot🙇

johnaziz

This tutorial is one of the best courses I've ever watched. Everything is explained in a very simple way, which makes it easy to follow and learn. Thank you very much!

ukaszjanczak

I love the way how you explain complex concepts easily, Thats a great Vue course so far and thank u so much♥

lombord

Just finished the first hour and came to thank you for such an amazing tutorial.... Thanks a lot for using your time to help us to be better devs and learn new frameworks.

boloow

2:24:00 So far so good. Been halfway through the video and I'm in love with it, clear and on point explanation .One suggestion, please add git repo for following through the code snippets. Thanks Jeremy😊!

amaansayyed