Vue JS 3 Tutorial for Beginners #3 - Vue.js Basics (part 2)
ฝัง
- เผยแพร่เมื่อ 21 ก.ค. 2024
- 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
.box{
padding: 100px 0;
width: 400px;
text-align:center;
background: #ddd;
margin: 20px;
display: inline-block;
}
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!
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!
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.
Thanks for the kind words Lebogang :) much appreciated!
Agreed. He explains everything really well
That's quite a well articulated sentence for a 3 year old haha
Everytime there's any new stack I need to learn. Shaun is the go to guy..
I have looked forever to understand computed props, but your course, in only 6 mins, MAN YOU ARE AMAZING ♥
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!
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.
Thanks, hope it was helpful!
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 !!!
Thanks Stephen :)
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!
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!
I tried watching TH-cam videos for the first time and this course was great. I'm very happy for this experience and start. thank a lot 🧡
19:45 those who wanna use their own images , but getting size issues; just use css --- img { max-width:190px;} and there u go
You can't imagine how much I feel lucky after visiting your channel ... thank you for sharing your knowledge in this beautiful way.
🥀
coming from backend and this being the first dive into frontend frameworks ,this is a great tutorial for introduction really great tutorial , thank you
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!
Glad it helped! :) thanks for your comment Angelo
Great piece of tutorial mate. Just started learning Vue at College and came here for an additional source of info. Great Job. Cheers
Whenever I want to learn something new about programming, the first thing I search for is "the net ninja {insert topic here}". Wonderful content!
so far this course is beyond helpful, I have a Vue midterm Monday and this is going to be a lifesaver thank you
Best of luck Rether!
This is one of the best tutorials I have ever seen for any technology.
Seriously excellent content! Not just Vue but all your content. Subscribed. And thank you.
The best Vue guide on TH-cam by far :) Thanks
This video really gave me my first taste of Vue and how powerful it is. Thank you.
recently I decided to learn one more front-end framework and this series gives me no choice :D ty.
The videos are great! but they got better when you mentioned "The name of the wind" - Now I know you are my people.
If only Rothfuss can work as quickly as Shaun 😢
You can have index of the element just like basic js for/forEach loops by using "(book, index) in books".
Amazing tutorial, I really appreciate it! Deffinitely the best Vue one I have ever seen for begginers! :)
One of the best tutors on TH-cam. So glad I discovered this channel!
Thanks Leanne, that means a lot :)
I loved the challenge. I wish there were 3 - 4 challenges at the end of each lesson!
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).
Net Ninja, You are very very good at teaching. Thank you for doing what you are doing.
after react i will get back on vue 3!:) thank you net ninja for making many many tutorial none stop.
I am taking Python and Shaun’s JS course on Udemy. Wish me luck! 💻 ⌨️📝
Good luck :)
how much far are you in 4 months?
i don't know if i have fall in love with vue or you are just a very good cupid
Your tutorials deserve thousands of love reactions.
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.
You're very welcome! thanks for the kind words :)
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
Bruhhh, same. I learnt React and I can't understand shit. Vue seems so much better.
i thought django was a backend framework ???
@@mr.k8660 ??
@mr.k8660 Django has a template engine that uses the same {{}} syntax, Flask also has a templating engine (Jinja2) that uses this syntax.
@@mr.k8660 Django fullstack framework
Thanks a lot Shaun! Let's give it a wow! This is teaching on Champions League level!
Shaun you became my best instructor. Thanks for all that you bring to the community
Thank you for the kind words :)
Master Ninja Shaun Pelling is one of the best two instructors ever, the other one is Maximilian Swatsmuler !!!
@@maskman4821 ahahah I think the same!
Dude your amazing! Thanks so much! Im new to Vue and very impressed with v-for like wow
Very smooth explanation!
I am eating Vue3 from its head! The author has a very nice methodology of teaching. A mega ton of thanks for him.
Thanks Mebtu!
I just want to say thank you for this course...I came from Angular to clear my mind and soul xDDD
Thank you Shaun! Just wanted to let you know that I read all the books in the example. :)
Awesome! :)
so far the BEST tutorials !
Thanks Julia :)
Really appreciate your teaching method. Clear explanation.
Thanks Chris :)
Ohhh man this is what i was waiting for ..... Thank you so much
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()"
Thank you sir, I learned a lot...
Hello, have a comment. Thank you for this tutorial 👍 very helpful
You are really doing a good job
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?
I have a doubt. How come passing book argument and changing its valued also changed the original books array??
Our Super Ninja. Thx Shaun 🤺
You are an amazing teacher!
Thank you Shaun for this wonderful and stimulating tutorials. Don't you have a course on Laravel and Vue 3 combined ?
Quality of these tutorials is amazing so please make react tutorials like this
He already has several React courses.
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
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
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!
Thank you very much for this The Net Ninja. Will buy your Vue 3 course from Udemy next week.
Thanks so much :). I hope you enjoy it!
@@NetNinja i am pretty sure i will.
my bind attribute is not working? can you give me solve of this problem?
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?
OMG Shaun youre on fire 🔥🔥🔥
Netninja is awesome as always.
my solution of the challenge is completely as yours lol, even the names of method & param :D
You know, this person just teaches how the udemy teachers teaches. Greate !
He is a udemy teacher duh
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 ??
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.
This series is better then some udemy courses
No doubt!
You are so awesome Shaun, thanx a lot !
I would be thankful if come to know how to add or remove class using class binding in vue.js 2
The books references are great! hahahaha
That is awesome, thanks 👍💙
Amazing videos!
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!
What was yours?
thank you so much!
Excellent sir👍
Thanks for watching!
haha I like how you used Name of the Wind as an example.
thank you sir for very good tutorial
Well done 👍
Thanks shaun!... 👍🏾
This is good, like really really good
Thank Vue Shaun.
Why event is not showing in my console plis help
I really can't thank you enough!
well done ninga
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.
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?
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.
did the syntax change?
Thank you very much
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?
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.
Love you Shawn
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...
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! :)
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?
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
Best in the world❤
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.
Figured it out. I had 'device toolbar' toggled.
@@JamesMorgan2 What 'device toolbar'???
I'm liking vue very much so far, more than react tbh
I was unable to get the mousemove to work. I could get the x an y to show 0 0 but when I used my trackpad (MacBookPro) the 0 0s disappeared. Any thoughts or help on this?
I had the same issue. My issue ended up being in the this.x = e.offsetX. The x and y at the end of the offset need to be capitalized. If they are lower case it will act just as you describe. Hope this helps.
@@wvbjj Thanks!! Now it’s working.
The only guy I would not skip ads for
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.
Same here. The code does not work as expected. Help, anyone?
Same for me, I am using chrome as browser
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.