The best way to learn Vue.js in 2024

The best way to learn Vue.js in 2024 - CRASH COURSE

Рет қаралды 163,206

Күн бұрын

Ready to master Vue.js? With weekly Vue js tutorials on the latest topics, and exclusive content with Evan You (the creator of Vue), Vue Mastery is the ultimate learning resource for Vue developers to level-up their skills. Watch more free Vuejs tutorials 👉 www.vuemastery.com/courses
This beginner crash course is your first step on your path to Vue Mastery.
Throughout the tutorial, you'll build an app to put concepts into practice.
Below you will find the starting and ending code for each lesson.
Lesson Markers:
0:00 Lesson 1 - Intro to Vue 3
2:17 Lesson 2 - Creating the Vue App
9:08 Lesson 3 - Attribute Binding
12:54 Lesson 4 - Conditional Rendering
17:59 Lesson 5 - List Rendering
21:23 Lesson 6 - Event Handling
25:48 Lesson 7 - Class & Style Binding
32:19 Lesson 8 - Computed Properties
38:35 Lesson 9 - Components & Props
45:08 Lesson 10 - Communicating Events
48:58 Lesson 11 - Forms & v-model
Github Repo: github.com/Code-Pop/Intro-to-...
Codepen: codepen.io/VueMastery/project...
Lesson 2 - Creating the Vue App
Codepen:
Starting code: codepen.io/VueMastery/project...
Ending code: codepen.io/VueMastery/project...
Github:
Starting code: github.com/Code-Pop/Intro-to-...
Ending code: github.com/Code-Pop/Intro-to-...
Lesson 3 - Attribute Binding
Codepen:
Starting code: codepen.io/VueMastery/project...
Ending code: codepen.io/VueMastery/project...
Github:
Starting code: github.com/Code-Pop/Intro-to-...
Ending code: github.com/Code-Pop/Intro-to-...
Lesson 4 - Conditional Rendering
Codepen:
Starting code: codepen.io/VueMastery/project...
Ending code: codepen.io/VueMastery/project...
Github:
Starting code: github.com/Code-Pop/Intro-to-...
Ending code: github.com/Code-Pop/Intro-to-...
Lesson 5 - List Rendering
Codepen:
Starting code: codepen.io/VueMastery/project...
Ending code: codepen.io/VueMastery/project...
Github:
Starting code: github.com/Code-Pop/Intro-to-...
Ending code: github.com/Code-Pop/Intro-to-...
Lesson 6 - Event Handling
Codepen:
Starting code: codepen.io/VueMastery/project...
Ending code: codepen.io/VueMastery/project...
Github:
Starting code: github.com/Code-Pop/Intro-to-...
Ending code: github.com/Code-Pop/Intro-to-...
Lesson 7 - Class & Style Binding
Codepen:
Starting code: codepen.io/VueMastery/project...
Ending code: codepen.io/VueMastery/project...
Github:
Starting code: github.com/Code-Pop/Intro-to-...
Ending code: github.com/Code-Pop/Intro-to-...
Lesson 8 - Computed Properties
Codepen:
Starting code: codepen.io/VueMastery/project...
Ending code: codepen.io/VueMastery/project...
Github:
Starting code: github.com/Code-Pop/Intro-to-...
Ending code: github.com/Code-Pop/Intro-to-...
Lesson 9 - Components & Props
Codepen:
Starting code: codepen.io/VueMastery/project...
Ending code: codepen.io/VueMastery/project...
Github:
Starting code: github.com/Code-Pop/Intro-to-...
Ending code: github.com/Code-Pop/Intro-to-...
Lesson 10 - Communicating Events
Codepen:
Starting code: codepen.io/VueMastery/project...
Ending code: codepen.io/VueMastery/project...
Github:
Starting code: github.com/Code-Pop/Intro-to-...
Ending code: github.com/Code-Pop/Intro-to-...
Lesson 11 - Forms & v-model
Codepen:
Starting code: codepen.io/VueMastery/project...
Ending code: codepen.io/VueMastery/project...
Github:
Starting code: github.com/Code-Pop/Intro-to-...
Ending code: github.com/Code-Pop/Intro-to-...
Final Code: github.com/Code-Pop/Intro-to-...

Пікірлер: 176

@mjsigg 3 жыл бұрын

I really really really appreciate how measured and structured your format is for beginners. Many of the guides I've come across are very conversational in format. Subbed and bookmarked your website for future supplementary guides. Thank you so much for this content.

@jameswang6714 2 жыл бұрын

Unbeatable top tutorial I have ever seen. The combination of visual, code and voice impact improves the learning curve for beginners and extends the short memory to long. Love your video.

@eyeIO 2 жыл бұрын

WOW! This is one of the best courses I have ever take, WEL DONE GUYS!

@vedkorla300 Жыл бұрын

This is absolutely insanely amazing. Just brilliant, bite sized, fast, easy to understand! Thanks @VueMastery!

@robertantonellis6773 Жыл бұрын

This was a great tutorial. Thank you for your hard work and attention to every detail. It's a model we can all learn from.

@ricardolandim790 Жыл бұрын

Simple, clean and direct. Perfect!

@MUSICA1742 2 жыл бұрын

You are the best teacher in the entire world. This is a Master piece!. There is no a similar course in KZfaq like this one. Thank you very much.

@prasad2716 10 ай бұрын

I spent a week to learn angular fundamentals from basics to directives and data binding etc but I really feel amazing learning this way ❤

@kulea6208 2 жыл бұрын

This is THE BEST Vue tutorial out there. Thank You So VERY much!

@SkaiCloud562 2 жыл бұрын

I love how you show the arrows and highlight and .....uhhh so much to say its just pure quality! Subscribe!

@kblyr 2 жыл бұрын

There is a "Premium" feel in this course.. This is awesome!! GOOD JOB!! 👏👏👏

@p19shelt Жыл бұрын

thats the whole website/company lol.

@Hespdow 6 ай бұрын

I have more than 4 years of experience in web development but needed a refresher in Vue.js and this tutorial REALLY helped, thank you!!

@ClaudiuSindile Жыл бұрын

Thank you so much! Very good tutorial. Simple, efficient and fast.👏

@olegparamonov7670 2 жыл бұрын

Nice tutorial...everything is clear and easy to remember...please, make more such tutorials on different topics🙏😊

@Jam-ht2ky Жыл бұрын

Your video is awesome and it has great knowledge in it. Your explanation is awesome and is extremely detailed for the time format. Thank you! 10/10 recommended

@guscostarock 2 жыл бұрын

I think is the best ever Tutorial, the most easy to understand Tutorial I've ever done.

@ronjones1587 Жыл бұрын

The explanation and the animation is outstanding! Thank you!

@mattf.2142 Жыл бұрын

Love this video style. It reminds me of a jQuery tutorial I took years ago (probs around 2012). Very entertaining style of learning.

@spencerlavalle7711 Жыл бұрын

As someone proficient in other languages, who was just starting out in web development, this was the perfect tutorial for me.

@BitCloud047 3 жыл бұрын

This video is amazing please do more!!!

@basavachetan9057 Жыл бұрын

Such a wonderful crash course i came across , Please upload more videos on Vue 3

@rasifrana 11 ай бұрын

Your teaching style and visual is awesome which i have not seen before 👏

@oldmovedchannel38478 Жыл бұрын

Thanks for sharing this! It's helped me out with my new job and helped Vue make complete sense to me.

@jonnjon1 Жыл бұрын

Amaazing content! Thank you so much for sharing this. Will definitely watch all of your videos.

@alirazahalani1392 2 жыл бұрын

By far this is the best course on Vue!!!

@marcelolb1221 2 жыл бұрын

Is it better then Ninja's course? idk which tutorial to choose

@ErickOnEverything 2 жыл бұрын

Legitimacy fantastic course. Well done

@tahsintushita6122 11 ай бұрын

This really is a brilliant course!! Thank you

@Dipenparmar12 2 жыл бұрын

Appreciated huge efforts for making cool and easy to learn

@gw1284 2 жыл бұрын

Awesome tutorial 👌 thank you!

@mobamobs4893 3 жыл бұрын

What a great video, thank so much.

@XeroGamingYT 7 ай бұрын

code, explanation, visuals.... This seems like an effective way to learn! And it is fun as well!!!

@rehmanghani6726 11 ай бұрын

Best course with nice explanation, keep up the good work 👍

@jingli9232 2 жыл бұрын

awesome video, very clear, thx for your help

@hamednajand8327 Жыл бұрын

it was super interesting Vuejs3 course with the creativity in presenting, thanks!

@biogesicc0808 Жыл бұрын

best tutorial i've ever seen so far. 10/10

@estuardohernandez4230 3 жыл бұрын

As usually, you did a pretty good work! Excellent video.

@VueMastery 3 жыл бұрын

Thank you very much!

@patrickklinger4215 5 ай бұрын

High end presentation 👌. Awesome! Thanks.

@andidarusman8408 2 жыл бұрын

Thats awesome ilustrations code..thank you

@vico911 Жыл бұрын

i've watching video tutorials in youtube a long long time ago, and i never make any comment, but this time i will make an exception, because i want to tell you that your videos, are by far the best explained videos ever, really, thanks so much for taking the time and effort to make such visuals as the arrows pointing what comes from where, and how are they linked, the machine placing the elements from the array was such a nice detail. Again thank you very much, all tutorials should have your standars since you are top , way top in making tutorials, thanks.

@VueMastery Жыл бұрын

Thank you for the kind words. We truly care about quality and ensuring new developers easily understand Vue.js. We're glad it resonated with you!

@user-gened Жыл бұрын

🎉thank you for explaing all these code. Its makes for better developers.

@internettime9309 2 жыл бұрын

Well detail tutorial for learning VueJs basic or even programming :)

@rajathhs8842 2 жыл бұрын

THE BEST Vue tutorial

@khizer3528 2 жыл бұрын

One of the best course 💕

@allprowebdesigns917 3 ай бұрын

Very well done tutorial on VueJS 3! I appreciate all the great work you put into these videos and you have a very well-done presentation. 👍

@PochisAdventures 2 ай бұрын

Best most well structure crash course I have ever taken in my entire life.

@BitCloud047 3 жыл бұрын

Seriously could you make these weekly?? I know its alot of work but damn this is awesome!

@ahmadaldabouqi8194 2 жыл бұрын

best course ever to begin with vue.js

@bombrman1994 2 жыл бұрын

this was an amazing series I am motivated to master vue as a goal for 2022 and hopefully before the end of year I can get my project running for my personal business

@VueMastery 2 жыл бұрын

Hi Mino, we love to hear that! You can access our whole course library for free July 22-24. You can get more info and reserve your spot for free here: www.vuemastery.com/free-weekend

@bombrman1994 2 жыл бұрын

@@VueMastery thank you i just did this will help me alot im a student and cant spend money

@adamwhite425 Жыл бұрын

@@bombrman1994 is VUE.js good framework to learn first before learning other? thank you for your time

@bombrman1994 Жыл бұрын

@@adamwhite425 probably one of the easiest out there imo

@coderguatemala7214 3 жыл бұрын

Good job! We appreciate your effort.

@VueMastery 3 жыл бұрын

Thank you for tuning in!

@lavglidesgh6266 7 ай бұрын

Great teacher, my kid at 7 can follow. How I wish he have videos on others programming language or courses like React, React native and Ruby on Rails or Node

@ojas.11 4 ай бұрын

I can imagine the hardwork behind these tutorials. Really great stuff. ! Subscriber earned. Do you have any other channel for JS?

@marco_di Ай бұрын

👍👍👍AWESOME 👍👍👍 A damn good tutorial, everything is explained very well and the highlighting of the options that are being explained are really great. What I think is particularly good is that you have completely removed the hectic pace and high typing speed while coding.

@dfordemo981 Жыл бұрын

amazing and so much informative and practical | big thanks

@TheGentrithoti Жыл бұрын

Really Easy to understsand thnx

@jaideepsingh8109 Жыл бұрын

Gratitude and Appreciation.

@dutchcapone 9 ай бұрын

Thanks! This is a really good video to get acquainted with Vue.js

@user-xm7yc4hp7t Жыл бұрын

The best tutorial I have ever had

@fredyip9122 3 жыл бұрын

Thanks, simple and easy to understand

@VueMastery 3 жыл бұрын

Glad it helped!

@alaingarcia7493 2 ай бұрын

Amazing content. Well explained and easy to digest. Keep it up si

@apnkta112 Жыл бұрын

Thank you very much!

@guscostarock 2 жыл бұрын

The "L8-start branch" is not reflecting what you are showing in the video, the "quantity" in the "variants" property is missing and also the "inStock: false" is still there which took me a while to figure out that was the reason why the "inStock / Out Of Stock" functionality wasn't working.

@archlinux8390 2 жыл бұрын

Uff omg editing another level😍😍😍

@devsploit 2 жыл бұрын

I like everything in the course

@amyr2497 2 жыл бұрын

Well done!

@bibotah Жыл бұрын

Beautiful. Should be over 199 Million viewer for this course

@user-ve2qx1kx7w 2 ай бұрын

🎉Really very nice and well explained tutorial for beginners. Thank from the core of heart from Bangladesh.

@sonerdev Жыл бұрын

There is a one problem in Lesson 8. inStock:true and inStock( from computed ) is overlapping. I was change name inStock ( from computed ) into the inStockComputed and it works!.

@oreefy 2 жыл бұрын

How we can implement on seo meta title & description and schemas

@NatureandSpirit111 2 жыл бұрын

Can you return a custom function, table or a table app with the data function in create app? Or are you going to create a table with js, place it within html code and then populate the table data and functionality with vue.js?

@ksas323 2 жыл бұрын

Nice tutorial.

@nguyennguyen-dd8kz Жыл бұрын

Thank you for your clear explanation ! I have a question regarding L8. If I update image and inStock directly using updateVariant. What is the difference comparing to using computed properties? ``` updateVariant(variant) { this.image = variant.image, this.inStock=variant.quantity > 0 } ```

@anupamajagadish6088 Жыл бұрын

Best way of explaining Thank you.

@niravgaglani7310 Жыл бұрын

I was just going through comments, thinking I will surely get an Indian person in first 100 comment. Don't know why, but enjoy doing so. (:

@j4nch Жыл бұрын

Thanks for the course! However, why presenting the options API in 2022? would make more sense to directly start with compossition API.

@Mr_Brian 2 жыл бұрын

Hello, I'm using Vue version 3.2.13 and I can't v-bind the image. To make the image render on the page I have to put the path in src as in src="../assets/images/socks_green" so that it displays. Without binding it to "image" in data. The method of you adding the image in data doesn't work. No errors displayed thought. Please assist, I want to bind the way you are showing. *Funny thing is I can bind the "alt" which is in the image tage from the data but binding the image itself has refused*

@k16e Жыл бұрын

Does the Vue @mouseover event automatically becomes/behaves as @click when the view/screen isn't mouse-friendly?

@sulaimandev 3 жыл бұрын

Thank you so much

@VueMastery 3 жыл бұрын

Our pleasure! Glad you appreciated it 😀

@JJ-ot3ps 2 жыл бұрын

amazing! amazing!

@k303k Жыл бұрын

Best vue crash course sir

@code75581 2 жыл бұрын

Great tuto ! Thanks ! Please which software do you use to make the tutorial with the animation ? it's really amazing.

@VueMastery 2 жыл бұрын

We use Apple's Keynote

@nasimansari6041 2 жыл бұрын

Can i use table pagination in this way!!!

@japtejsingh1596 5 ай бұрын

nice beginner friendly intro to Vue

@loicandre2284 2 жыл бұрын

Good job

@amigo4342 11 ай бұрын

how to render the app in the browser..is there any commands to execute in the terminal. Because I opened it in the browser from the index file and it shows {{product}} instead of socks...its not giving the value but just what's written between the tags

@faldikn 3 жыл бұрын

Is possible evan/vue contributors make its own native mobile framework? Or they wouldnt because ionic and nativescript "support" them

@daniuboa6851 3 жыл бұрын

Just what I was looking for. Thank you 🙏🏽😊

@VueMastery 3 жыл бұрын

You’re welcome 😊

@daniuboa6851 2 жыл бұрын

@@VueMastery Quick question, which theme are you using in your vs code? I really like it

@VueMastery 2 жыл бұрын

@@daniuboa6851 Flat UI Dark

@daniuboa6851 2 жыл бұрын

@@VueMastery Thank you 🙏🏽☺️

@aizazaziz5636 Жыл бұрын

Need help fatal: could not create work tree dir 'Intro-to-Vue-3': Permission denied

@cyliaalileche6445 2 жыл бұрын

woah its the best tuto

@raselhossain8855 3 жыл бұрын

How to edit your video?

@AnshulKumar-dt5jn 2 жыл бұрын

Best Tutorial so far. Nice Vs Code theme, Which is it?

@VueMastery 2 жыл бұрын

Thank you! Theme is Flat UI Dark.

@user-bw2lk1ti1e 5 ай бұрын

cool video)

@dethrowegamer1715 2 жыл бұрын

Great course! I have a question about something I don't understand. If we are using the review-form in the product-display, why are we importing the review-form in the index.html and not the product-display? I am new to vue but have some experience in react so this did not make sense to me.

@VueMastery 2 жыл бұрын

In this Intro course, we show Vue being used in the simplest possible setup, via a CDN link. This allows us to focus on the fundamentals of Vue syntax in a more minimal project structure. In a production grade project, built with Vite or Vue CLI, you would indeed import the review-form into product-display. However, in this CDN setup, things are working a bit differently. This is the first and fundamental course in a full platform of Vue courses we have, and the concepts and complexity build over time. Here's a link in case you want to continue learning with us: www.vuemastery.com/courses

@marcelolb1221 2 жыл бұрын

Is Vue 3 just the latest version? and does that mean everyone should just learn that instead of vue 2?

@RasamHossain 3 ай бұрын

Is this Options API or Composition API?

@sinamohammadi970 Жыл бұрын

lovely

@user-wo8kz5br8h Жыл бұрын

you mentioned Vue 3 But i can't find any code related to vue 3

@user-jr4ze8je7d 9 ай бұрын

overall is very gud, The big problem i seen is u are using cdn, instead of downloading them by npm which more matter it's diffrent style that required knowledge to know for set up is by using npm , or using proxy like vite

@VueMastery 9 ай бұрын

This course starts off with the easiest possible way to use Vue.js, without any package managers such as npm. In all other courses on our platform at VueMastery.com, we show how to create Vue apps with npm and with Vite.js.

@JimmieZaccai 2 жыл бұрын

Whats the difference between using the CDN link for vue and using the CLI to generate the vue files? Im new to vue! thx

@VueMastery 2 жыл бұрын

The CDN link is the simplest possible way to import Vue. However it is not commonly how developers use Vue in production, especially in an app of any significant size. Using the Vue CLI or Vite is a more real-world way of creating a Vue.js app.