Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Subscribe
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Vue.js Tutorial for beginners (2021)
Rating: 4.4 out of 5(195 ratings)
5,802 students

Vue.js Tutorial for beginners (2021)

Learn Vue.js basics in less than 1 hour
Created byGuillaume Duhan
Last updated 10/2021
English

What you'll 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)

Explore related topics

Course content

3 sections • 19 lectures • 1h 17m total length

  • Install Vue & Vite3:51

    Set up a Vue project with Vite using Visual Studio Code and npm init vite latest, install dependencies, and run the dev server to view the app on localhost.

  • Architecture, views & components3:27
  • HTML, CSS & Javascript in Vue7:12

    Create a single root template in Vue and expose reactive data with a data function. Bind data using mustache syntax and control rendering with directives like v-if.

  • Functions, data binding & directives5:12
  • Loop & mapping objects4:59

    Explore looping through a persons array in Vue.js with v-for, display each name and age, and update ages dynamically using map and item index.

  • Todo list part 1 : create a dynamic list5:59
  • Todo list part 2 : components & props10:04

    Learn to split a to-do list into components, import and register them, and pass a to-do array as a prop from parent to child, with typed props and default values.

  • Todo list part 3: emit events8:56

    Learn how to emit events to remove a to-do list in a Vue.js app, using $emit from a child to remove the list and handling the event in the parent.

  • Computed & filters5:27

    Explore how computed properties and filters in Vue.js perform reactive calculations and filter a to-do list, avoiding in-template logic.

  • Lifecycles & reactivity3:08

    Explore how reactivity and life cycles control when data initializes and how components mount, update, and destroy in Vue.js, including created and mounted hooks and their practical use.

  • Watch, good & bad practices3:10

    Master the Vue watch method and its differences from computed properties; trigger handlers on changes using value and new value, with deep and immediate options, while avoiding excess watchers.

  • Mixins4:22

    Learn how to use Vue.js mixins to reuse props, data, and methods across components, avoiding repetition by exporting and importing shared mixins in a dedicated mixins folder.

Requirements

  • None

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.

Who this course is for:

  • beginners

Report abuse