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

Рет қаралды 288,126

Күн бұрын

In this Vue 3 tutorial we'll carry on with the basics of Vue & talk about mouse events, using v-for to output lists, attribute binding & computed properties.
--- Timestamps ---
0:00 - Other mouse events
10:09 - Outputting lists (v-for)
14:26 - Attribute binding
19:57 - Dynamic classes
24:50 - Challenge: toggling favs
28:57 - Computed properties
🐱‍💻 🐱‍💻 BUY THE FULL 20-hr COURSE ON UDEMY:
www.thenetninja.co.uk/udemy/v...
🐱‍💻 🐱‍💻 Course Files:
+ github.com/iamshaunjp/Vue-3-F...
🐱‍👤🐱‍👤 JOIN THE GANG -
/ @netninja
🐱‍💻 🐱‍💻 My Udemy Courses:
+ Modern JavaScript - www.thenetninja.co.uk/udemy/m...
+ Vue JS & Firebase - www.thenetninja.co.uk/udemy/v...
+ D3.js & Firebase - www.thenetninja.co.uk/udemy/d...
🐱‍💻 🐱‍💻 Helpful Links:
+ HTML & CSS Course - • HTML & CSS Crash Cours...
+ Get VS Code - code.visualstudio.com/
🐱‍💻 🐱‍💻 Social Links:
Facebook - / thenetninjauk
Twitter - / thenetninjauk
Instagram - / thenetninja

Пікірлер: 205

@lebogangledwaba9754 2 жыл бұрын

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 2 жыл бұрын

Thanks for the kind words Lebogang :) much appreciated!

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

Agreed. He explains everything really well

@CouchBit 2 ай бұрын

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

@k3tna 3 жыл бұрын

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!

@bencroacademy 3 жыл бұрын

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

@mk9834 3 жыл бұрын

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!

@sbastion8446 3 жыл бұрын

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!

@maskman4821 3 жыл бұрын

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 3 жыл бұрын

Thanks Stephen :)

@KoussayFridhi 3 жыл бұрын

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

@AidanHomewood 11 ай бұрын

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 11 ай бұрын

Thanks, hope it was helpful!

@brownieblondestudios3764 3 жыл бұрын

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

@benman3509 3 жыл бұрын

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!

@C4ssstiel 3 жыл бұрын

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

@spicemasterii6775 2 жыл бұрын

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

@furkangonulal1355 3 жыл бұрын

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

@bjblk1 Жыл бұрын

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

@kabakiAntony 3 жыл бұрын

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

@toobamohammadianahrabi1701 Жыл бұрын

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

@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

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

@pr3287 3 жыл бұрын

The best Vue guide on KZfaq by far :) Thanks

@nikzadbehnam1027 Жыл бұрын

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

@rickyanthony 2 жыл бұрын

This video really gave me my first taste of Vue and how powerful it is. Thank you.

@ridl27 3 жыл бұрын

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

@murat6018 2 жыл бұрын

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

@MrJohnny2109 Жыл бұрын

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

@irocx8745 3 жыл бұрын

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

@justnumber5197 3 жыл бұрын

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

@tech_beauty 3 жыл бұрын

Your tutorials deserve thousands of love reactions.

@designcode5126 3 жыл бұрын

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

@andreaslam 3 жыл бұрын

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

@NetNinja 3 жыл бұрын

Good luck :)

@arslannoorofficial 3 жыл бұрын

how much far are you in 4 months?

@photorealm 3 жыл бұрын

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

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

@narasimhareddygolla2454 3 жыл бұрын

You are really doing a good job

@Ipdxcreative 2 жыл бұрын

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

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

@abdosarmini 2 жыл бұрын

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

@marsdwarf 11 ай бұрын

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

@deki90to 3 жыл бұрын

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

@Berk45632 3 жыл бұрын

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

@mr.k8660 2 ай бұрын

i thought django was a backend framework ???

@deki90to 2 ай бұрын

@@mr.k8660 ??

@joshmosley 2 ай бұрын

@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 13 күн бұрын

@@mr.k8660 Django fullstack framework

@shubhang2877 3 жыл бұрын

OMG Shaun youre on fire 🔥🔥🔥

@Chokluss 3 жыл бұрын

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

@push2me936 Жыл бұрын

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

@leannemillar7826 5 ай бұрын

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

@NetNinja 5 ай бұрын

Thanks Leanne, that means a lot :)

@dieudonnemukunzi2471 3 жыл бұрын

Our Super Ninja. Thx Shaun 🤺

@Sdirimohamedsalah 6 ай бұрын

Very smooth explanation!

@felixbecquart 3 жыл бұрын

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

@NetNinja 3 жыл бұрын

Thank you for the kind words :)

@maskman4821 3 жыл бұрын

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

@felixbecquart 3 жыл бұрын

@@maskman4821 ahahah I think the same!

@MosesNjenga 2 жыл бұрын

You are an amazing teacher!

@juliadjh 2 жыл бұрын

so far the BEST tutorials !

@NetNinja 2 жыл бұрын

Thanks Julia :)

@AzeemAsim 2 жыл бұрын

Netninja is awesome as always.

@FRONTRUS 3 жыл бұрын

That is awesome, thanks 👍💙

@maycodes 2 жыл бұрын

You are so awesome Shaun, thanx a lot !

@WIZURAI-AGV Жыл бұрын

Really appreciate your teaching method. Clear explanation.

@NetNinja Жыл бұрын

Thanks Chris :)

@JuanGarcia-pu2qc 10 ай бұрын

Thank you sir, I learned a lot...

@Foused87 3 жыл бұрын

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

@carldrogo9492 Жыл бұрын

He already has several React courses.

@sarmad54 2 жыл бұрын

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

@yourtrinty 3 жыл бұрын

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

@xrayian 3 жыл бұрын

He is a udemy teacher duh

@edwardorilley552 2 жыл бұрын

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

@jessieaguiao 3 жыл бұрын

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

@NetNinja 3 жыл бұрын

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

@jessieaguiao 3 жыл бұрын

@@NetNinja i am pretty sure i will.

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

@etiennechevrier3201 3 жыл бұрын

Amazing videos!

@ridl27 3 жыл бұрын

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

@kunalpandey7189 3 жыл бұрын

This is good, like really really good

@ahmadalharbi9097 3 жыл бұрын

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

@psgbjj Жыл бұрын

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

@mostafamohamed6118 3 жыл бұрын

I really can't thank you enough!

@TheCodebookInc 3 жыл бұрын

Love you Shawn

@deejayerick 3 жыл бұрын

Thanks shaun!... 👍🏾

@abbosbekuz 3 жыл бұрын

thank you sir for very good tutorial

@thilakmani1287 3 жыл бұрын

Well done 👍

@MrSMGun 3 жыл бұрын

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()"

@prajyotbhujbal5563 3 жыл бұрын

Best in the world❤

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

@zakaria20062 Жыл бұрын

This series is better then some udemy courses

@carldrogo9492 Жыл бұрын

No doubt!

@iqaznili Жыл бұрын

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

@NetNinja Жыл бұрын

Awesome! :)

@issaissifou4959 2 жыл бұрын

thank you so much!

@junimeme5626 3 жыл бұрын

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 3 жыл бұрын

What was yours?

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

@ivanvincent7534 3 жыл бұрын

Thank Vue Shaun.

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

@ricardohernandez7263 3 жыл бұрын

The books references are great! hahahaha

@martincastagno8945 3 жыл бұрын

Thank you very much

@adityaathavale3662 3 жыл бұрын

well done ninga

@ShajidHasan 3 жыл бұрын

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.

@CSKAASIPRASANTHA Жыл бұрын

Excellent sir👍

@NetNinja Жыл бұрын

Thanks for watching!

@DirkFraanje 2 жыл бұрын

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?

@vincej151 3 жыл бұрын

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

@soumikahammed9170 3 жыл бұрын

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

@chizuru1999 Жыл бұрын

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

@MrChosenLP Жыл бұрын

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

@abigailwacukakamau1020 2 жыл бұрын

The only guy I would not skip ads for

@TriinTamburiin 3 жыл бұрын

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

@abdirisakmohamed5134 3 жыл бұрын

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

@NetNinja 3 жыл бұрын

Thanks :). And good luck!!

@jeffgoes4116 2 жыл бұрын

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.

@sherdiliftikhar3703 2 жыл бұрын

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 9 ай бұрын

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.

@shivansh709 2 жыл бұрын

We can also use mouseenter rather than mouse over

@sathvikshenoy5550 3 жыл бұрын

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

@NetNinja 3 жыл бұрын

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 3 жыл бұрын

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

@earnmoneystrategy8130 2 жыл бұрын

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

@AlexTheGreatish 3 жыл бұрын

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

@JamesMorgan2 3 жыл бұрын

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 3 жыл бұрын

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

@CrashOrFly 2 жыл бұрын

@@JamesMorgan2 What 'device toolbar'???

@ruanoseba 3 жыл бұрын

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!

@azamitsolutionprovider9398 Жыл бұрын

in that challenge i actually almost got it but went wrong when i use @click="toggleFav(book.isFav)" so i passed the isFav value instead of passing the book using @click="toggleFav(book)" but the result is not the same..i can change the isFav in the first one but the value does not "save" and revert back to original and the class was not changed but the latter can change the original.. is there any explanation to this? is it related to funtion parameter passed as ref etc?

@nikhilvijayan1729 Жыл бұрын

Yes. When an object is passed we are passing reference, so the actual data is changed. When book.isFav value is passed value is copied so the actual data is not changed