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

Подписаться 70 тыс.

Просмотров 156 тыс.

50% 1

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-...

Наука

Опубликовано:

2 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 175

@mjsigg 2 года назад

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.

@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.

@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!

@prasad2716 8 месяцев назад

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

@ricardolandim790 Год назад

Simple, clean and direct. Perfect!

@kulea6208 2 года назад

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

@MUSICA1742 Год назад

You are the best teacher in the entire world. This is a Master piece!. There is no a similar course in RU-vid like this one. Thank you 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.

@olegparamonov7670 2 года назад

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

@Hespdow 4 месяца назад

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!!

@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

@ClaudiuSindile Год назад

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

@spencerlavalle7711 Год назад

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

@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

@ronjones1587 11 месяцев назад

The explanation and the animation is outstanding! Thank you!

@basavachetan9057 Год назад

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

@guscostarock 2 года назад

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

@rasifrana 9 месяцев назад

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

@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.

@BitCloud047 2 года назад

This video is amazing please do more!!!

@oldmovedchannel38478 Год назад

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

@ErickOnEverything 2 года назад

Legitimacy fantastic course. Well done

@XeroGamingYT 6 месяцев назад

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

@rehmanghani6726 9 месяцев назад

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

@tahsintushita6122 9 месяцев назад

This really is a brilliant course!! Thank you

@jonnjon1 Год назад

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

@Dipenparmar12 2 года назад

Appreciated huge efforts for making cool and easy to learn

@hamednajand8327 Год назад

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

@allprowebdesigns917 Месяц назад

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. 👍

@BitCloud047 2 года назад

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

@estuardohernandez4230 2 года назад

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

@VueMastery 2 года назад

Thank you very much!

@biogesicc0808 Год назад

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

@patrickklinger4215 3 месяца назад

High end presentation 👌. Awesome! Thanks.

@vico911 10 месяцев назад

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 10 месяцев назад

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!

@gw1284 Год назад

Awesome tutorial 👌 thank you!

@ojas.11 2 месяца назад

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

@jingli9232 2 года назад

awesome video, very clear, thx for your help

@mobamobs4893 2 года назад

What a great video, thank so much.

@internettime9309 Год назад

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

@user-gened Год назад

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

@rajathhs8842 2 года назад

THE BEST Vue tutorial

@lavglidesgh6266 5 месяцев назад

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

@marco_di 3 дня назад

👍👍👍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.

@coderguatemala7214 2 года назад

Good job! We appreciate your effort.

@VueMastery 2 года назад

Thank you for tuning in!

@PochisAdventures Месяц назад

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

@guscostarock Год назад

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.

@khizer3528 Год назад

One of the best course 💕

@dutchcapone 7 месяцев назад

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

@ahmadaldabouqi8194 2 года назад

best course ever to begin with vue.js

@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!.

@andidarusman8408 2 года назад

Thats awesome ilustrations code..thank you

@bombrman1994 Год назад

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 Год назад

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 Год назад

@@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

@alaingarcia7493 27 дней назад

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

@fredyip9122 2 года назад

Thanks, simple and easy to understand

@VueMastery 2 года назад

Glad it helped!

@user-xm7yc4hp7t 10 месяцев назад

The best tutorial I have ever had

@dfordemo981 Год назад

amazing and so much informative and practical | big thanks

@archlinux8390 2 года назад

Uff omg editing another level😍😍😍

@TheGentrithoti Год назад

Really Easy to understsand thnx

@user-ve2qx1kx7w 14 дней назад

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

@bibotah Год назад

Beautiful. Should be over 199 Million viewer for this course

@jaideepsingh8109 Год назад

Gratitude and Appreciation.

@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?

@apnkta112 11 месяцев назад

Thank you very much!

@devsploit Год назад

I like everything in the course

@amyr2497 Год назад

Well done!

@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.

@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

@ksas323 2 года назад

Nice tutorial.

@sulaimandev 2 года назад

Thank you so much

@VueMastery 2 года назад

Our pleasure! Glad you appreciated it 😀

@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*

@japtejsingh1596 3 месяца назад

nice beginner friendly intro to Vue

@k16e Год назад

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

@k303k Год назад

Best vue crash course sir

@JJ-ot3ps 2 года назад

amazing! amazing!

@dethrowegamer1715 Год назад

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 Год назад

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

@daniuboa6851 2 года назад

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

@VueMastery 2 года назад

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 🙏🏽☺️

@AnshulKumar-dt5jn 2 года назад

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

@VueMastery 2 года назад

Thank you! Theme is Flat UI Dark.

@faldikn 2 года назад

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

@amigo4342 9 месяцев назад

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

@cyliaalileche6445 Год назад

woah its the best tuto

@loicandre2284 2 года назад

Good job

@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.

@user-jr4ze8je7d 7 месяцев назад

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 7 месяцев назад

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.

@oreefy 2 года назад

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

@user-bw2lk1ti1e 3 месяца назад

cool video)

@nasimansari6041 2 года назад

Can i use table pagination in this way!!!

@aizazaziz5636 Год назад

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

@marcelolb1221 2 года назад

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

@sisi-here 2 года назад

Thank you. That's awesome. But I can't show the Socks word on the screen, it displays just {{ product }}. Why? 🤔 ```import { createApp } from 'vue'; const app = createApp({ data() { return { product: 'Socks', } } });```