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.
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!
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 !!!
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.
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!
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).
coming from backend and this being the first dive into frontend frameworks ,this is a great tutorial for introduction really great tutorial , thank you
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!
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 :)
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.
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.
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!
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.
For the challenge at the end, I had your exact answer but it wouldnt work for the entire time, spent a few minutes on it, watched you solve it and suddenly it did work 😐
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 ??
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.
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.
need to check if the divs are inside the div id="app", mine was not working too before, then realized the divs for mouse events are outside, hope it helps
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
Why are all these front-end frameworks so weird? All this messing around in HTML Files and JS Files. Why not generate everything from JS and make everything more consistent? I need and Frontend dev, I can't handle all this madness, i want back to my cosy C space :(
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
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!
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 :)
Everytime there's any new stack I need to learn. Shaun is the go to guy..
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!
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
I have looked forever to understand computed props, but your course, in only 6 mins, MAN YOU ARE AMAZING ♥
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!
19:45 those who wanna use their own images , but getting size issues; just use css --- img { max-width:190px;} and there u go
This is one of the best tutorials I have ever seen for any technology.
.box{
padding: 100px 0;
width: 400px;
text-align:center;
background: #ddd;
margin: 20px;
display: inline-block;
}
I am taking Python and Shaun’s JS course on Udemy. Wish me luck! 💻 ⌨️📝
Good luck :)
how much far are you in 4 months?
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
You can have index of the element just like basic js for/forEach loops by using "(book, index) in books".
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!
Great piece of tutorial mate. Just started learning Vue at College and came here for an additional source of info. Great Job. Cheers
i don't know if i have fall in love with vue or you are just a very good cupid
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).
I loved the challenge. I wish there were 3 - 4 challenges at the end of each lesson!
You can't imagine how much I feel lucky after visiting your channel ... thank you for sharing your knowledge in this beautiful way.
🥀
One of the best tutors on RUclips. So glad I discovered this channel!
Thanks Leanne, that means a lot :)
recently I decided to learn one more front-end framework and this series gives me no choice :D ty.
coming from backend and this being the first dive into frontend frameworks ,this is a great tutorial for introduction really great tutorial , thank you
Thanks a lot Shaun! Let's give it a wow! This is teaching on Champions League level!
after react i will get back on vue 3!:) thank you net ninja for making many many tutorial none stop.
Net Ninja, You are very very good at teaching. Thank you for doing what you are doing.
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 :)
Dude your amazing! Thanks so much! Im new to Vue and very impressed with v-for like wow
You know, this person just teaches how the udemy teachers teaches. Greate !
He is a udemy teacher duh
This series is better then some udemy courses
No doubt!
Great tutorial for beginners, even i recommend to experienced developers, thank you
Glad you enjoyed it!
Very smooth explanation!
Amazing tutorial, I really appreciate it! Deffinitely the best Vue one I have ever seen for begginers! :)
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?
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!
You are really doing a good job
Really appreciate your teaching method. Clear explanation.
Thanks Chris :)
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 :)
OMG Shaun youre on fire 🔥🔥🔥
Our Super Ninja. Thx Shaun 🤺
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.
Thank you Shaun! Just wanted to let you know that I read all the books in the example. :)
Awesome! :)
haha I like how you used Name of the Wind as an example.
The only guy I would not skip ads for
Thank you sir, I learned a lot...
Hello, have a comment. Thank you for this tutorial 👍 very helpful
Excellent sir👍
Thanks for watching!
You are an amazing teacher!
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.
Thank Vue Shaun.
The books references are great! hahahaha
I have a doubt. How come passing book argument and changing its valued also changed the original books array??
I'm liking vue very much so far, more than react tbh
2:13 the way you said "Over Yeaah" made me think of Cartman from South Park haha
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?
my solution of the challenge is completely as yours lol, even the names of method & param :D
We can also use mouseenter rather than mouse over
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.
You should do svelte + typescript next
He's already done Svelte.
@@andrewclarke6916 yes but not with typescript
That is awesome, thanks 👍💙
thank you so much!
thank you sir for very good tutorial
I really can't thank you enough!
my bind attribute is not working? can you give me solve of this problem?
I would be thankful if come to know how to add or remove class using class binding in vue.js 2
well done ninga
This is good, like really really good
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!
great tutorials! Maybe you have roots in India! thank you!
did the syntax change?
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'???
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()"
For the challenge at the end, I had your exact answer but it wouldnt work for the entire time, spent a few minutes on it, watched you solve it and suddenly it did work 😐
I am taking your Vue 3 Course on udemy i wish me luck😍
Thanks :). And good luck!!
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 ??
Why event is not showing in my console plis help
you are great
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.
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.
please if you're watching this try doing that task, in a way u think it would work.
If anyone is having trouble with offsetX and offsetY... make sure you use a capital X and Y lol oopsies
For some reason events are not firing on my vue app.
need to check if the divs are inside the div id="app", mine was not working too before, then realized the divs for mouse events are outside, hope it helps
if doing ":src='product.img'" does not work, try this - :src='require(product.img)'
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
At 18:58 you left a stroke after last record in the arrray.
v nice
awesome
"liiikee so! like so!"
my solution is the same as yours my teacher
why don't run this code
toggleFav(isFav) {
isFav = !isFav;
}
Hey Shaun, Please make a video on server side rendering in Vue.
👍👍👍👍
In challenge I used index in looping , and in function update the value of this index -> ```this.books[index].isFav = !this.books[index].isFav```
master you are using default theme
Where are u from?
Manchester, England :)
10:43
yay, I'm the 3001 like :P
Why are all these front-end frameworks so weird? All this messing around in HTML Files and JS Files. Why not generate everything from JS and make everything more consistent? I need and Frontend dev, I can't handle all this madness, i want back to my cosy C space :(
10