The best way to learn Vue.js in 2024 - CRASH COURSE
HTML-код
- Опубликовано: 19 май 2024
- 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-... 
Наука
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.
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.
WOW! This is one of the best courses I have ever take, WEL DONE GUYS!
This is absolutely insanely amazing. Just brilliant, bite sized, fast, easy to understand!
Thanks @VueMastery!
Simple, clean and direct. Perfect!
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.
I spent a week to learn angular fundamentals from basics to directives and data binding etc but I really feel amazing learning this way ❤
You are the best teacher in the entire world. This is a Master piece!. There is no a similar course in RUclips like this one. Thank you very much.
Your teaching style and visual is awesome which i have not seen before 👏
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!!
This is THE BEST Vue tutorial out there. Thank You So VERY much!
I love how you show the arrows and highlight and .....uhhh so much to say its just pure quality! Subscribe!
Nice tutorial...everything is clear and easy to remember...please, make more such tutorials on different topics🙏😊
This really is a brilliant course!! Thank you
There is a "Premium" feel in this course.. This is awesome!! GOOD JOB!! 👏👏👏
thats the whole website/company lol.
As someone proficient in other languages, who was just starting out in web development, this was the perfect tutorial for me.
I think is the best ever Tutorial, the most easy to understand Tutorial I've ever done.
Such a wonderful crash course i came across , Please upload more videos on Vue 3
Best course with nice explanation, keep up the good work 👍
The explanation and the animation is outstanding! Thank you!
Thank you so much! Very good tutorial. Simple, efficient and fast.👏
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
By far this is the best course on Vue!!!
Is it better then Ninja's course? idk which tutorial to choose
Love this video style. It reminds me of a jQuery tutorial I took years ago (probs around 2012). Very entertaining style of learning.
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.
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!
Thanks for sharing this! It's helped me out with my new job and helped Vue make complete sense to me.
This video is amazing please do more!!!
Seriously could you make these weekly?? I know its alot of work but damn this is awesome!
Amaazing content! Thank you so much for sharing this. Will definitely watch all of your videos.
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. 👍
Best most well structure crash course I have ever taken in my entire life.
best tutorial i've ever seen so far. 10/10
Legitimacy fantastic course. Well done
code, explanation, visuals.... This seems like an effective way to learn! And it is fun as well!!!
it was super interesting Vuejs3 course with the creativity in presenting, thanks!
I can imagine the hardwork behind these tutorials. Really great stuff. ! Subscriber earned.
Do you have any other channel for JS?
High end presentation 👌. Awesome! Thanks.
As usually, you did a pretty good work! Excellent video.
Thank you very much!
Well detail tutorial for learning VueJs basic or even programming :)
🎉thank you for explaing all these code. Its makes for better developers.
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
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
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
@@VueMastery thank you i just did this will help me alot im a student and cant spend money
@@bombrman1994 is VUE.js good framework to learn first before learning other? thank you for your time
@@adamwhite425 probably one of the easiest out there imo
best course ever to begin with vue.js
THE BEST Vue tutorial
One of the best course 💕
Awesome tutorial 👌 thank you!
Amazing content. Well explained and easy to digest. Keep it up si
Good job! We appreciate your effort.
Thank you for tuning in!
Appreciated huge efforts for making cool and easy to learn
The best tutorial I have ever had
Thanks! This is a really good video to get acquainted with Vue.js
Gratitude and Appreciation.
What a great video, thank so much.
Thats awesome ilustrations code..thank you
awesome video, very clear, thx for your help
Best way of explaining
Thank you.
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. (:
🎉Really very nice and well explained tutorial for beginners. Thank from the core of heart from Bangladesh.
amazing and so much informative and practical | big thanks
Thanks, simple and easy to understand
Glad it helped!
Beautiful. Should be over 199 Million viewer for this course
Really Easy to understsand thnx
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
I like everything in the course
Thank you very much!
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!.
Uff omg editing another level😍😍😍
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.
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
}
```
nice beginner friendly intro to Vue
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?
Best vue crash course sir
Well done!
Just what I was looking for. Thank you 🙏🏽😊
You’re welcome 😊
@@VueMastery Quick question, which theme are you using in your vs code? I really like it
@@daniuboa6851 Flat UI Dark
@@VueMastery Thank you 🙏🏽☺️
Great tuto ! Thanks ! Please which software do you use to make the tutorial with the animation ? it's really amazing.
We use Apple's Keynote
Thanks for the course! However, why presenting the options API in 2022? would make more sense to directly start with compossition API.
woah its the best tuto
Does the Vue @mouseover event automatically becomes/behaves as @click when the view/screen isn't mouse-friendly?
Nice tutorial.
amazing! amazing!
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*
Is possible evan/vue contributors make its own native mobile framework? Or they wouldnt because ionic and nativescript "support" them
Thank you so much
Our pleasure! Glad you appreciated it 😀
Best Tutorial so far. Nice Vs Code theme, Which is it?
Thank you! Theme is Flat UI Dark.
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
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.
Good job
Anyone aware of how he is getting syntax highlighting in his template with the HTML in a .js file? Cant seem to figure it out on my end.
He mentioned about it in 1st lesson. Use ext. es6-string-html
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.
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
At 15:30, display: none actually removes the element from DOM right rather hiding!
How we can implement on seo meta title & description and schemas
lovely
I am just starting my adventure with a Vue as a junior and I have to admint that you this tutorial helped me a lot if it comes to the overall understanding of the Vue concept. I find it much easier and more approachable comparing to the structure of React, especially for me as the beginner. Your animated way of explanation is also great. It helps to really understand what is going on under the cover. Looking forward to watch more of your stuff. Thanks once more time and keep the great job! Greetings from Poland! 🦾
Thanks for the kind words, we're glad the tutorial has helped you in your adventure with Vue! You can check out more tutorials like this over at www.vuemastery.com/courses/
good course :) distracting banner ad keeps popping throughout the course :(
Can i use table pagination in this way!!!
Whats the difference between using the CDN link for vue and using the CLI to generate the vue files? Im new to vue! thx
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.
Need help fatal: could not create work tree dir 'Intro-to-Vue-3': Permission denied
Is Vue 3 just the latest version? and does that mean everyone should just learn that instead of vue 2?
cool video)
Is this Options API or Composition API?
برای دوستان ایرانی میگم:
تا حالا چندتا کورس ویو رو تا انتها پشت سر گذاشتم، این یکی مثل هیچکدوم نیست واقعا حرف نداره، سوادم 10 برابر اضافه شد.
نایس