Vue.js Tutorial for beginners (2021)

Learn Vue.js basics in less than 1 hour

4.45 (139 reviews)
Udemy
platform
English
language
Web Development
category
instructor
5,166
students
1.5 hours
content
Oct 2021
last update
FREE
regular price

What you will learn

Install Vue & Vite

Configure your project

Architecture

Views & components

Data-binding

Inputs binding

Props & events

List rendering

Components registration

Slots

Mixins

Use of setup (Vue 3)

Reactive properties (Vue 3)

Props declarations (Vue 3)

Computed properties (Vue 3)

Component registration (Vue 3)

Description

Welcome!

Hello dear student. If you clicked on this course, this is probably because you are looking for an efficient tutorial on Vue.js or maybe you are just interested to learn quickly all the basics.

If so, you are absolutely at the right place.

Is this course about VUE 2 or VUE 3?!

As you probably know, a new version of Vue just came out but is in BETA. This course is about Vue 2 basics with a part on introduction with Vue 3.

Guillaume, who are you?

My name is Guillaume Duhan, senior front-end developer since 10 years now.

I am focusing on Vue.js since 2015 now. My goal is to teach you as fast as possible and as clear as possible all the basics of this amazing JavaScript Framework made by Evan You.

What is Vue.js?

"Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries." Vue.js official documentation.

A tutorial for beginners

If you never code before don't be scared!

This tutorial is for absolute beginners who already learned some HTML, CSS & Javascript.

If you already know Angular, React or JQuery, you'll love to learn Vue.js!

Why you should learn Vue.js

Vue.js is one of the most popular frameworks at that time.

If you did some front-end dev by the past, you'll quickly feel at home. Vue is made to develop SPA really quickly because its learning curve is totally efficient. Moreover, Vue has been build to be easy to handle and to understand.

Right now, on job market, Vue is sexy. There are a lot of companies that are choosing Vue.js for many reasons: its huge community of developers, its tools and its large package playground.

What is the program?

As I said before, this course is for absolute beginners. So I made a slow but concrete program:

  • Install Vue (with Vite.js),

  • Configure your project,

  • Architecture,

  • Views & components,

  • Data-binding,

  • Inputs binding,

  • Props & events,

  • List rendering (to do list building),

  • Components registration,

  • Slots,

  • Mixins...

And for Vue 3:

  • Use of setup,

  • Reactive properties,

  • Props declarations,

  • Computed properties,

  • Component registration,

  • Data-binding...

A quick travel to Vue.js

At the end of this course, you'll have a bright idea if you like or not Vue.js. But you'll also have a basic and useful understanding of this amazing JS Framework.

Content

Introduction

Install Vue & Vite
Architecture, views & components
HTML, CSS & Javascript in Vue
Functions, data binding & directives
Loop & mapping objects
Todo list part 1 : create a dynamic list
Todo list part 2 : components & props
Todo list part 3: emit events
Computed & filters
Lifecycles & reactivity
Watch, good & bad practices
Mixins

Vue 3 Initiation

Install new template of Vue 3
New data binding approach (reactive)
How to declare Props
Setup, onMounted & ref
Computed & Watch
Composition API : more documentation on this article

Conclusion

Thank you very much !

Screenshots

Vue.js Tutorial for beginners (2021) - Screenshot_01Vue.js Tutorial for beginners (2021) - Screenshot_02Vue.js Tutorial for beginners (2021) - Screenshot_03Vue.js Tutorial for beginners (2021) - Screenshot_04

Reviews

Gustavo
August 12, 2023
It's a very nice introduction to Vue.js. Thank you so much mister Duhan for the free course. Hope to learn a lot more of frontend development from you.
Povilas
February 25, 2023
A little bit hard to clearly understand speech. Should mention when switching between IDE tabs - hard to follow when you code on the side and watch together. Mouse clicks should be highlighted.
SPD
April 17, 2022
This is a quick touch base upon lots of features of Vue.js. Easy to understand, informative heads up of Vue.js for high level understanding of Vue. Good Informative course.
Jeremy
April 11, 2022
Too fast and not enough details on subjects. Some examples didn't work. I had to reference Vue.js documentation quite often. Jumped around and quickly made changes to files. I had to rewind most of the videos several times to see what the changes were. Videos need to be longer and slowed down.
Alexandros
April 1, 2022
The course starts off well, explaining everything as it happens, but around the 5th part of section 1, some things are taken for granted by the lecturer. For instance, during the example with the components, I found the control flow confusing.
Ivan
February 24, 2022
Enseña lo básico bastante bien y rápido sin darle tantas vueltas al asunto, ya dependerá de cada uno indagar más acerca de vue

Charts

Price

Vue.js Tutorial for beginners (2021) - Price chart

Rating

Vue.js Tutorial for beginners (2021) - Ratings chart

Enrollment distribution

Vue.js Tutorial for beginners (2021) - Distribution chart

Related Topics

4216812
udemy ID
8/1/2021
course created date
10/23/2021
course indexed date
Angelcrc Seven
course submited by