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

Подписаться 1,5 млн

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

50% 1

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

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

19 июн 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

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

@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

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

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

@KoussayFridhi 3 года назад

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

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

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

I watched the first two videos of the playlist and it's really amazing how you explain things. After I'm finished with Vue.js videos, I'm going to watch node.js videos. Thank you for your work!

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

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

Thanks, hope it was helpful!

@toobamohammadianahrabi1701 Год назад

I tried watching RU-vid 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

@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

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

@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

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

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

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

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

@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

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

@ridl27 3 года назад

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

@pr3287 3 года назад

The best Vue guide on RU-vid by far :) Thanks

@MrJohnny2109 Год назад

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

@brownieblondestudios3764 3 года назад

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

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

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

@justnumber5197 3 года назад

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

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

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

@irocx8745 3 года назад

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

@photorealm 3 года назад

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

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

@juliadjh Год назад

so far the BEST tutorials !

@NetNinja Год назад

Thanks Julia :)

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

One of the best tutors on RU-vid. So glad I discovered this channel!

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

Thanks Leanne, that means a lot :)

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

Your tutorials deserve thousands of love reactions.

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

Very smooth explanation!

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

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

@designcode5126 3 года назад

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

@push2me936 Год назад

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

@narasimhareddygolla2454 3 года назад

You are really doing a good job

@WIZURAI-AGV Год назад

Really appreciate your teaching method. Clear explanation.

@NetNinja Год назад

Thanks Chris :)

@JuanGarcia-pu2qc 9 месяцев назад

Thank you sir, I learned a lot...

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

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

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

You are an amazing teacher!

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

You are so awesome Shaun, thanx a lot !

@dieudonnemukunzi2471 3 года назад

Our Super Ninja. Thx Shaun 🤺

@shubhang2877 3 года назад

OMG Shaun youre on fire 🔥🔥🔥

@FRONTRUS 3 года назад

That is awesome, thanks 👍💙

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

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

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

Netninja is awesome as always.

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

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

@psgbjj Год назад

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

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

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

@Foused87 3 года назад

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

@carldrogo9492 Год назад

He already has several React courses.

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

thank you so much!

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

@mostafamohamed6118 3 года назад

I really can't thank you enough!

@abbosbekuz 3 года назад

thank you sir for very good tutorial

@etiennechevrier3201 3 года назад

Amazing videos!

@deejayerick 3 года назад

Thanks shaun!... 👍🏾

@kunalpandey7189 3 года назад

This is good, like really really good

@ridl27 3 года назад

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

@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

@martincastagno8945 3 года назад

Thank you very much

@ivanvincent7534 3 года назад

Thank Vue Shaun.

@TheCodebookInc 3 года назад

Love you Shawn

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

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

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

Awesome! :)

@thilakmani1287 3 года назад

Well done 👍

@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

@nishantaanjaneyjalan8583 3 года назад

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 22 дня назад

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

@yourtrinty 3 года назад

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

@xrayian 3 года назад

He is a udemy teacher duh

@zakaria20062 Год назад

This series is better then some udemy courses

@carldrogo9492 Год назад

No doubt!

@prajyotbhujbal5563 3 года назад

Best in the world❤

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

@CSKAASIPRASANTHA Год назад

Excellent sir👍

@NetNinja Год назад

Thanks for watching!

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

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

@ricardohernandez7263 3 года назад

The books references are great! hahahaha

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

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.

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

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

@MrChosenLP Год назад

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

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

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

The only guy I would not skip ads for

@adityaathavale3662 3 года назад

well done ninga

@rangabharath4253 3 года назад

awesome

@TriinTamburiin 3 года назад

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

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

you are great

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

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

@chizuru1999 Год назад

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

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

@RATANAGARWALITINFORMER 3 года назад

v nice

@AlexTheGreatish 3 года назад

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

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

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.

@abdirisakmohamed5134 3 года назад

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

@NetNinja 3 года назад

Thanks :). And good luck!!

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

great tutorials! Maybe you have roots in India! thank you!

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