Vue JS 3 Tutorial for Beginners #3 - Vue.js Basics (part 2)

[@lebogangledwaba9754]

Where have you been all my life(well, 3 years ago)? This is my second tutorial of your tutorials and you explain things even a child would understand. THANK YOU VERY MUCH!! Keep up the good work.

[@NetNinja]

Thanks for the kind words Lebogang :) much appreciated!

[@ДанилМ-р8ы]

Agreed. He explains everything really well

[@CouchBit]

That's quite a well articulated sentence for a 3 year old haha

[@k3tna]

Magical, thanks. Shaun: "I don't want you to watch me type the CSS out, it's not a CSS course." Ends up throwing a couple of words on every property. What a boss!

[@mk9834]

Even though I am a seasoned Vue2 developer, going through this whole series without skipping actually refreshed my memory and consolidated my skills as well! Thanks Shaun!

[@maskman4821]

I really like this book list example, it applies the techniques we use in daily development in almost all projects, for example we can toggle favicon and change color, and the filter feature that render the bookswe want, etc. The demo example is really useful and practical, Shaun is trully a master of instructor on application development !!!

[@NetNinja]

Thanks Stephen :)

[@brownieblondestudios3764]

.box{ padding: 100px 0; width: 400px; text-align:center; background: #ddd; margin: 20px; display: inline-block; }

[@bencroacademy]

Everytime there's any new stack I need to learn. Shaun is the go to guy..

[@furkangonulal1355]

19:45 those who wanna use their own images , but getting size issues; just use css --- img { max-width:190px;} and there u go

[@AidanHomewood]

So awesome how thorough this is - I love that you've considered all these edge cases (like when passing in multiple parameters to handleEvent) and go into such depth.

[@NetNinja]

Thanks, hope it was helpful!

[@sekerek]

So far among other tutorials I have dived in, this gave me the full understanding of every single thing he uses while coding. THANK YOU VERY MUCH SIR!

[@NetNinja]

Glad it helped! :) thanks for your comment Angelo

[@bjblk1]

This is one of the best tutorials I have ever seen for any technology.

[@koossaayy]

I have looked forever to understand computed props, but your course, in only 6 mins, MAN YOU ARE AMAZING ♥

[@murat6018]

Whenever I want to learn something new about programming, the first thing I search for is "the net ninja {insert topic here}". Wonderful content!

[@rethern7966]

so far this course is beyond helpful, I have a Vue midterm Monday and this is going to be a lifesaver thank you

[@NetNinja]

Best of luck Rether!

[@sbastion8446]

Thank you so much for providing these tutorials, Shaun! I've learnt Laravel, a little bit of React, & now Vue (in-progress) through these videos & they've been a big help. I also like that your tutorials not only give us viewers the code explanation, but also implement them in a project; it helps me to better understand how the code works. I'm having problem when learning through reading; they drain me mentally. But it feels easier when learning through videos like these. I'm sure your efforts will be repaid in some way. Cheers!

[@felixbecquart]

Shaun you became my best instructor. Thanks for all that you bring to the community

[@NetNinja]

Thank you for the kind words :)

[@maskman4821]

Master Ninja Shaun Pelling is one of the best two instructors ever, the other one is Maximilian Swatsmuler !!!

[@felixbecquart]

@@maskman4821 ahahah I think the same!

[@Chokluss]

i don't know if i have fall in love with vue or you are just a very good cupid

[@makuinjapan9156]

The videos are great! but they got better when you mentioned "The name of the wind" - Now I know you are my people.

[@PrInCeMoHiT1]

If only Rothfuss can work as quickly as Shaun 😢

[@toobamohammadianahrabi1701]

I tried watching KZbin videos for the first time and this course was great. I'm very happy for this experience and start. thank a lot 🧡

[@quelzar]

The best Vue guide on KZbin by far :) Thanks

[@spicemasterii6775]

Seriously excellent content! Not just Vue but all your content. Subscribed. And thank you.

[@C4ssstiel]

Great piece of tutorial mate. Just started learning Vue at College and came here for an additional source of info. Great Job. Cheers

[@nikzadbehnam1027]

You can't imagine how much I feel lucky after visiting your channel ... thank you for sharing your knowledge in this beautiful way. 🥀

[@benman3509]

I freaking love the idea of the challanges!!! Please do it in every video. It is actually a quite easy idea but what an amazing one!

[@leannemillar7826]

One of the best tutors on KZbin. So glad I discovered this channel!

[@NetNinja]

Thanks Leanne, that means a lot :)

[@irocx8745]

You can have index of the element just like basic js for/forEach loops by using "(book, index) in books".

[@ridl27]

recently I decided to learn one more front-end framework and this series gives me no choice :D ty.

[@juliadjh]

so far the BEST tutorials !

[@NetNinja]

Thanks Julia :)

[@mebtuabebe8428]

I am eating Vue3 from its head! The author has a very nice methodology of teaching. A mega ton of thanks for him.

[@NetNinja]

Thanks Mebtu!

[@push2me936]

Thanks a lot Shaun! Let's give it a wow! This is teaching on Champions League level!

[@edwardorilley552]

I just want to say thank you for this course...I came from Angular to clear my mind and soul xDDD

[@abddulrahmanas]

If you got an error like this: "Elements in iteration expect to have 'v-bind:key' directives", you need to add this attribute: :key="book.id". But you must create the id in the every book in the books array. In vue every child that is in a dynamic list of items, must have an id (this is also in React).

[@kabakiAntony]

coming from backend and this being the first dive into frontend frameworks ,this is a great tutorial for introduction really great tutorial , thank you

[@marsdwarf]

I loved the challenge. I wish there were 3 - 4 challenges at the end of each lesson!

[@tech_beauty]

Your tutorials deserve thousands of love reactions.

[@andreaslam]

I am taking Python and Shaun’s JS course on Udemy. Wish me luck! 💻 ⌨️📝

[@NetNinja]

Good luck :)

[@arslannoorofficial]

how much far are you in 4 months?

[@photorealm]

Net Ninja, You are very very good at teaching. Thank you for doing what you are doing.

[@medui]

Once I realized we’re never going to get a continuation of The Name of the Wind, I forced myself to forget, since my heart was broken. Well this tutorial is fking awesome, but I feel empty inside now. I hope some smart AI will sometime finish this book series. Thank you for the tutorial, after Django this is refreshing to learn.

[@ownsupernoob2]

after react i will get back on vue 3!:) thank you net ninja for making many many tutorial none stop.

[@theindiedev.mstflotfy]

Thank you very much! Incredibly helpful. You explain every little detail in a very logical way. This is the best Vue Tutorial I've come across so far.

[@NetNinja]

You're very welcome! thanks for the kind words :)

[@Foused87]

Quality of these tutorials is amazing so please make react tutorials like this

[@carldrogo9492]

He already has several React courses.

[@oybekrasulov2271]

Great tutorial for beginners, even i recommend to experienced developers, thank you

[@NetNinja]

Glad you enjoyed it!

[@zakaria20062]

This series is better then some udemy courses

[@carldrogo9492]

No doubt!

[@MrJohnny2109]

Amazing tutorial, I really appreciate it! Deffinitely the best Vue one I have ever seen for begginers! :)

[@DirkFraanje]

So for me at 28:50 it only works (like you explained earlier) when I fist add the event as $event and the book as the second parameter, how can it be that it is working for you?

[@yourtrinty]

You know, this person just teaches how the udemy teachers teaches. Greate !

[@xrayian]

He is a udemy teacher duh

[@moacyrdacruzjr393]

In order to refer the last chapter on this course to check out about different array methods at 32:00, do you mean the video #11?

[@Ipdxcreative]

Dude your amazing! Thanks so much! Im new to Vue and very impressed with v-for like wow

[@wizurai_engineering]

Really appreciate your teaching method. Clear explanation.

[@NetNinja]

Thanks Chris :)

[@abigailwacukakamau1020]

The only guy I would not skip ads for

[@lammmpo]

Hi! Recently I began working as a software engineer but I've never used Vue. Your videos are amazing and really helpful. I have a questiong about computed data. which is the diference between methods and computed? you can define filteredBooks in methods and use v-for="book in filteredBooks()" instead of computed. I would really appreciate your answer. Thank you :)

[@deki90to]

Omg I can not describe the feel I felt after I saw {{ }}, I'm comming from Django, and...omg I love Vue...and HATE react

[@CybercoderNaj]

Bruhhh, same. I learnt React and I can't understand shit. Vue seems so much better.

[@mr.k8660]

i thought django was a backend framework ???

[@deki90to]

@@mr.k8660 ??

[@joshmosley]

​@mr.k8660 Django has a template engine that uses the same {{}} syntax, Flask also has a templating engine (Jinja2) that uses this syntax.

[@artem_egamediev]

​@@mr.k8660 Django fullstack framework

[@PraveenKumar-if6lw]

Hi Shaun i'm a beginner and using your video as a practice so i can learn Vue 3, at 3:22 on the double click event when i double clicked it is not working and the other such as mouseleave , i has to click once inside the box and outside the box so the console can be triggered to show the numbers, if you can you point what could be gone wrong, will be really appreciated.

[@CrashOrFly]

Same here. The code does not work as expected. Help, anyone?

[@fabioespositovlog]

Same for me, I am using chrome as browser

[@fabioespositovlog]

Actually, it looks like it is a problem with the inspector of chrome, because if you close it, hover your mouse on the different boxes a few times and then re-open it, the events are in the console. I think the "hover" is deactivated on the inspector.

[@narasimhareddygolla2454]

You are really doing a good job

[@agofpos]

I'm 32 and this particular video is taking me days to digest everything. I am on my second day. I feel like I am old

[@NetNinja]

Stick with it Chakiwag! :) everybody learns at different speeds and it's good to take extra time to digest sometimes. Plus 32 isn't old, aha, I'm 36!

[@junimeme5626]

When I saw his toggle method I facepalmed so hard I made a dent in my skull. It's so simple and intuitive compared to mine. Love it!

[@ilias5185]

What was yours?

[@iqaznili]

Thank you Shaun! Just wanted to let you know that I read all the books in the example. :)

[@NetNinja]

Awesome! :)

[@dieudonnemukunzi2471]

Our Super Ninja. Thx Shaun 🤺

[@shubhang2877]

OMG Shaun youre on fire 🔥🔥🔥

[@Sdirimohamedsalah]

Very smooth explanation!

[@AzeemAsim]

Netninja is awesome as always.

[@CSKAASIPRASANTHA]

Excellent sir👍

[@NetNinja]

Thanks for watching!

[@avigail_assistant]

You are an amazing teacher!

[@psgbjj]

Hello, have a comment. Thank you for this tutorial 👍 very helpful

[@jessieaguiao]

Thank you very much for this The Net Ninja. Will buy your Vue 3 course from Udemy next week.

[@NetNinja]

Thanks so much :). I hope you enjoy it!

[@jessieaguiao]

@@NetNinja i am pretty sure i will.

[@Olejoss1906]

Was going to try out the challenge, but when I checked the repo there are over 180 lessons, whereas the playlist contains 12 videos. I guess each video contains more lessons packed altogether. Would be good to enumerate them somehow to know which branch lesson should we pick in certain point in time.

[@designcode5126]

Ohhh man this is what i was waiting for ..... Thank you so much

[@JuanGarcia-pu2qc]

Thank you sir, I learned a lot...

[@MrChosenLP]

haha I like how you used Name of the Wind as an example.

[@maycodes]

You are so awesome Shaun, thanx a lot !

[@ahmadalharbi9097]

Thanks Shuan , I decided to learn either React or Vue . Any recommendation I am so confused! By the way you in your laravel course you have said your next serie will be either vue & laravel or react &laravel , have you decided yet?maybe your answer will guide me thank you again

[@AlexTheGreatish]

2:13 the way you said "Over Yeaah" made me think of Cartman from South Park haha

[@ShajidHasan]

This comment will probably go unnoticed, but I'm very curious. These three books are some of my most favorites. I absolutely love Brandon Sanderson. Are you a fantasy reader as well? I've always been fond of you as a tutor but this is just amazing.

[@Yazuroshi]

For some reason, when I did the same for the computed properties, all of my list items disappeared, although I had 2 of them as 'true'. Hmm...

[@divsyntax9720]

Dnt knw if you have the answer for this, seeing it's been a year. I was facing the same issue and found the answer!! Lol I didn't want to move on unless I did. So, turns out, ur prob putting computed: INSIDE of methods:. If you're doing it outside, and it's still doing that, then it's something else. But for me, that was the case. Happy coding! :)

[@TriinTamburiin]

I'm liking vue very much so far, more than react tbh

[@chizuru1999]

I have a doubt. How come passing book argument and changing its valued also changed the original books array??

[@ridl27]

my solution of the challenge is completely as yours lol, even the names of method & param :D

[@jeffgoes4116]

It got me very confused when you changed isFav property just by using the param received by the function "toggleFav()". Because in theory we just receive a value and reassign it but we are never changing the actual array. In React, for example, we would have to create a new array of objects and change that specific book for this change to take effect (using Map, filter or whatever). What does Vue do under the hood to understand that we are changing that specific property of the array?

[@WungaBungaMC]

The parameter 'book' that is passed into toggleFav(book) is passed in from the 'v-for:book in books' loop. That parameter 'book' is a reference to the current book being displayed in the for loop. In other words, the book.isFav property of each individual book is now accessible to be modified. Without passing that parameter in, there would be no way to modify each books isFav property individually.

[@prajyotbhujbal5563]

Best in the world❤

[@MrSMGun]

can you use a method for the books array loop instead of data option in the component. something like v-for="book in this.books()"

[@abbosbekuz]

thank you sir for very good tutorial

[@harshadsonaje]

The mouse events are not working on latest Chrome browser but they work on Edge are you familiar with this problem? Any fix for this?

[@JamesMorgan2]

I'm looking at lesson-11 on github and finding when I run it that the mouseover events aren't working. For some reason it's only firing when you click in the first box. At first I thought it was a mistake in my code I was typing up as I was following on. Has something changed since the creation of this vid? Just to add testing on the latest version of Chrome, and Brave. Edit - appears it's when inspect is active. The position mouseover works fine when inspect is not active.

[@JamesMorgan2]

Figured it out. I had 'device toolbar' toggled.

[@CrashOrFly]

@@JamesMorgan2 What 'device toolbar'???

[@kunalpandey7189]

This is good, like really really good

[@sarmad54]

Thank you Shaun for this wonderful and stimulating tutorials. Don't you have a course on Laravel and Vue 3 combined ?

[@etiennechevrier3201]

Amazing videos!

[@adityaathavale3662]

well done ninga

[@soumikahammed9170]

my bind attribute is not working? can you give me solve of this problem?

[@ricardohernandez7263]

The books references are great! hahahaha

[@FRONTRUS]

That is awesome, thanks 👍💙

[@mostafamohamed6118]

I really can't thank you enough!

[@ivanvincent7534]

Thank Vue Shaun.

[@earnmoneystrategy8130]

I would be thankful if come to know how to add or remove class using class binding in vue.js 2

[@vincej151]

I have been using JS and JQuery for years. I am currently building an order processing application on Laravel. It already have hundreds of lines of JS /JQuery. Can you use Vue js for medium sized business applications? I have read that it is overkill unless you are building something really big. Wrong ?? Right ??

[@TheCodebookInc]

Love you Shawn

[@abdirisakhalac]

I am taking your Vue 3 Course on udemy i wish me luck😍

[@NetNinja]

Thanks :). And good luck!!

[@ericksonsv]

Thanks shaun!... 👍🏾

[@sherdiliftikhar3703]

Hi there! I have a question. When you are using f-for( in outputting lists), where you have an array of objects. Conventionally we do not put a comma after the last element of the array (an array in your case). You did put a comma and still, it runs. how?

[@salmankhan547]

Javascript allows trailing commas. It will simply just ignore it. If you do have two commas at the end it will increase the length of an array thou myArray=[1,2,3,,,] this will actually make the length of the array as 5. NOTE: JSON doesnt allow trailing commas.

[@sathvikshenoy5550]

Legit been waiting for this. Can you also explain ways vue 3 has changed over vue 2? Thanks a lot

[@NetNinja]

Main difference is the new Composition API & composable functions (a bit like React hooks). So now we can group logic together easier & make code much more reusable. Also other features like Teleport, Suspense & multi-root elements for components are new to Vue 3.

[@brothercaleb]

@@NetNinja are you gonna refresh react tutorials too... is there anything new to react?

[@ruanoseba]

Awesome, beats reading the new changes on the Vue page. I was listening to your entire playlist before I purchased the class for 14.99, but the class just spiked to 99.99. YIKES!

[@thilakmani1287]

Well done 👍