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

all right then so we've already seen how we can handle click events like when a user clicks on a button by hooking that click event up to a method which we then define inside our view component now we can do a similar kind of thing with different types of mouse events things like double click or mouse over or mouse leave etc so let's take a look at a few of those so first what i'm going to do is come back to the template and i've already created at the bottom of the div with an idea of app a br tag and a comment and down here i'm going to create four different divs each one with a class of box because we're going to use that class to style each one a little bit as well and we're doing four because we're going to look at four different mouse events now i've already created styles for this in the head over here i've created a style tag and you can see now that each box has a padding 100 pixels top and bottom 0 left and right a width of 400 pixels we align the text to the center a background of a light gray color a bit of margin for each box and also we display each one as inline block so if i save this now we should see those four boxes over here okay so i want to now attach a different mouse event to each one so let me do some text in the middle of each one before i do that so the first one is going to be a mouse over and that means basically enter the mouse onto the element the second one is going to be a mouse leave event that means exit the mouse the third one is going to be a double click and the fourth one is going to be something slightly different which we'll come back to later so let's do this one first of all i'm going to attach an event to this and remember we can use either v on colon and then the event type which is mouse over or we can use instead of this bit the at symbol which is what i'm going to do so i'm going to set that equal now to a function which we will define over in the component so let me do this i'm going to call the function handle events and then i'm just gonna log to the console event like so so now i can reference that over here handle event like so if i save that and open up the console if we go to mouse over the first one we see event if i do it again we see events now while i move around inside the box nothing happens it's only when i first enter the element we get that event okay so that's the first one the second one i want to show you is the mouse leave so let's do that mouse leave and set that equal to the function again handle event and in fact we'll do this one as well and this is double click so let's say at db l click so that stands for double and then set that equal to the same function handle event let me save this and preview and if we come over here we can now see this one works when we go into this one nothing happens but when we exit that event fires and you saw the number two here and then down here nothing happens when we enter and exit but if we double click then we see another event and we've not done the fourth one we'll come back to that in a second but before we do that i want to talk about the event object as well so whenever we have events like this that happen in the browser whether that's double click mouse leave mouse over just a normal click or any other kind of event we automatically get access to an optional event object and that can be taken in as a parameter right here and it must be the first parameter so i could type e right here and you can call it what you want by the way you don't have to call it e right here you can call it ev or event doesn't matter but now we can log that to the console this is automatically passed in as a first argument when we fire an event when an event occurs so let me save it and try this again now if i mouse over you see this object right here it's a mouse event and if we expand there's loads of different information about the event this right here says whether the alt key was pressed while the event occurred in our case it was false we also have the client x and the client y we also have down here whether the control key was pressed the layer x the layer y offset there's loads of different things also we have the type down here that's the type of event that occurred so let's also log that out i'm going to say e and e dot type like so and if i save this let's try the different events so this one was mouse over this is mouse leave and this is double click all right so when an event occurs you might find it useful to get some of this information for example you might want to react to a user when they click something but only if they're holding alt as well or you might want to update a ui element based on the offset properties okay and we will probably use some of these later and in fact in a minute we're going to see an example of that but before we do that what if we also want to pass in a custom parameter as well like we did before so say for example over here i also want to pass in my own argument so i can say for example i want to pass in a number which is 5. now what's going to happen because when we did this before this argument should be therefore the first argument inside here now if i save this let's see what happens if i go to the top and mouse enter we see five and e suddenly becomes undefined so when we pass in our own argument like this this right here is the first argument and we don't get that event object however when we're passing our own custom arguments in we can explicitly say that we want the event object to be passed in as well and to do that we say dollar sign event and now this will be the first argument and this will be the second when we don't pass any arguments in the event object is automatically the first argument that we receive but when we do pass our own arguments in we have to explicitly say that we want the event object in as a parameter as well and then any of our own parameters or arguments after that so now if i save it we can say e that will be the event object that we get right here and we can take in a second optional argument if we want to for example we'll call this data but you can call it what you want and down here we'll say if data if that has a value then we'll log it to the console okay now i do this if check because we don't always have the data in these other events we're not passing through any data as a second argument we're just getting access to the event automatically as a first argument but in the first one that's where we pass in the additional argument the data okay so i hope that all makes sense now let's try this and if we mouse over we can see we get the event object then the type and then the data right here our own custom argument and these are still going to work the same way we automatically get that event object as a first argument okay so now we've learned a little bit about that let's have a look at this fourth one i wanted to do now this one is going to be a mouse move event and i'm going to set that equal to a different function this one is going to be called handle mouse move like so and i don't need to pass anything into that because we're going to get the event object automatically now inside that function let's define it first so handle mouse move like so and we're taking the event object automatically inside here what i want to do is update two properties and i'm going to create those two properties first first one is x and that's the x position within the square that we have the event on so within this square right here and then secondly the y property so they're both going to be zero to begin with but then what we're going to do is update those when this function is fired and we can use the properties from the event object to update them so i'm going to say this dot x is equal to e dot offset x so that will be the cursor position within this box the offset is the offset relative to the top left of the box so we're going to get that position for x and we'll do a similar thing for y so this dot y is equal to offset or rather e dot offset y so now we have those two properties but we're not doing anything with them so what i'll do is output them right here i'm going to say position and then i'm going to output first of all x and then secondly y so to begin with they're going to be zero but whenever the mouse moves around the box and by the way this is mouse move not mouse over so whenever we move at all within the box it's going to find the event and at that point we're taking the event object to this function and we update the values of x and y and they will be reflected right here in the template so we should see them on the screen so let's give this a whirl let's go to the bottom and you can see the minute position starts at zero zero but the minute i go in you can see those numbers update if i go to the top left it should be very close to zero zero like that if we go to the bottom right then that's going to be something like 400 and 200 and something there we go okay so there we go my friends that's how we work with other mouse events that we will be using a lot in the future of this course and also the event object so there's another directive i want to show you now and that one is called v4 and we use v4 to cycle through an array of data and output a bit of template for each item in that array so imagine we had an array of users for example and we wanted to list those on a screen then we could use v4 to cycle through that array and output each user in some kind of list so we're going to do that for books so we're showing one book right here but imagine instead of having these three different properties here if i delete those imagine instead we had a books property which was an array and inside we had a list of books and each book could be an object so each book could have a title property which i'll say for the first one is name of the wind and each book could have an author property which in this case would be patrick rothfuss okay so that would be one book inside this book array now i'm just going to paste in two more so we have the way of kings by brandon sanderson and the final empire by brandon sanderson so now we have three books right here and we might want to output a bit of template for each one of them so you might think well what we could do is we could come over here and we could say books and then zero to get the first book and then dot title and we could do the same thing for the author right here um we don't have an age anymore so let's get rid of that and then we could do the same for the second book so let me duplicate this and change this to one and this to one and so forth and we could do that for the third book and it would work but that's only when we have a small list of books if this is coming from a database you might have 50 books or 100 books or even more and you're not going to do that for each book and you might not know how many elements you have so you don't know what number to go up to so instead this is where we use something called v4 so what i'm going to do is instead create a ul and we want to create an li tag for each book object and output that separately so let me do that li and then i'm going to use v hyphen 4 on this and we set that equal to something now what we do is say item in and then whatever you want to cycle through so i could cycle through books so i'm going to say item in books now this right here you can call what you want you can call it book if you prefer which probably makes more sense because then we're saying for each book in the books array so this has to be there this in and this has to be last the array was cycling through but the first item can be called whatever you want so i am going to call it bulk and it's going to cycle through each item in the books array and it's going to output an li tag for each of these books and inside the li tag we have access to the individual book as we cycle through them so for each iteration this book is going to first be this item then this and then this so we can output the different properties of that book so i'm going to use an h3 to output the book title so book dot title like so and this is the same as this so whatever you call it here has to be the same here and then i'm going to do a paragraph tag for the author so book dots author like so save that and we should see an li tag for each one which we do and this still works this toggle that we had before because we're still embedding this inside a v if so this is how we cycle through data and output a bit of template for each item in that data array and we will be using that a lot as we start to make project because a lot of the time we're working with collections of data whether that be users or some other kind of resource like blog posts or chats or messages we want to cycle through them and that's when we'll be using v4 so now i'd like to talk about a concept known in view as attribute binding and attribute binding is when we bind dynamic values to html attributes so say for instance we had an anchor tag the href is an attribute what if i wanted the value of that to be dynamic normally when i create a link i'd put in a website address here so http forward slash code www.thenetninja.cod.uk and right here i'll just say best website ever and that would be how i create a normal link but this is hard coded this value if i want it to be dynamic i need to do something else now the first thing i would do is take this value and create a data property and i've already done that i've created this url data property which is the netninja.cod.uk so what if i wanted to output that url data property inside this href right here would i just say url well no that's not going to work that's just going to literally think that url is the href and if i inspect this we can see the href is url so that doesn't work well what about curly braces like we do in the template will that work well again no the literal href is going to be curly braces url so in order for this value to be dynamic we have to do something else we have to do what's known as data or attribute binding so the way we do this in view is by using a directive called v hyphen bind and then we use a colon and attach it to whatever attribute we want to bind data to so this means that whatever is inside here now is dynamic and inside here we can now access the different properties inside our view component including this url property right here so now i can type url and no longer is it just going to be literally url it's going to look for that value inside our component and output it right here because we've said it's dynamic by using the bind so let me save that and preview if we inspect this now we can see over here we get the url property value that's defined in our view component so this is how we use attribute binding now again we tend to use this quite a lot in view projects so instead of always having to write v bind we can get rid of that and whenever we see just a colon that means we're data binding to that attribute so this is the same thing it's just a shortcut for v bind much like we have this at symbol for events instead of v on we have colon for v bind and they're probably two of the main shortcuts that we use in vue.js that are really helpful and that we use a lot so let me just show you that this still does the same thing yep still works so we can do this with many different attributes not just href so let me comment this out and you'll notice i've already created this assets folder right here and inside this we have three images 1.jpg 2.jpg and 3.jpg and they're each a book cover so i want to use these for each book as we output them so i'm going to create an image tag for each book at the top so i'll say image and then each one needs a source and an alt now the alt we're going to bind to that and to do that remember we can just use a colon or we can say v hyphen bind i'm just going to use the column the shortcut and i want the value to be the book title so that is going to be the alt for the image so let me paste that in now the source as well i want this to be dynamic but we don't have any kind of data property that we want it to be yet so let's go over to these books and let's also create an image property for each one so each image property is going to be basically a path the source to grab one of these so they're inside the assets folder so let's say assets forward slash one dot jpeg for the first one now i'm just going to copy that so i don't have to type out each one individually because i'm super lazy so two and then the third one which is going to be three and by the way these images are all found on the course files github repo if you just look at the lesson 13 branch right here and you can see the assets folder you can download the zip folder or go to each one of these individually and save it to your computer entirely up to you but they're all there but anyway now we've created these image properties we can now bind to the source over here by using a colon and because they're on the book that we have right here the image properties we can say book dot image and therefore the source is going to be this for the first one this for the second one and this for the third one so now when we're outputting these we should see all of those three images as well which we do so that is data or attribute binding and again we are going to be using this a lot as we go through the different chapters and projects in this course okay then so now i'd like to show you how to use dynamic classes and by that i mean conditionally give elements certain classes based on a certain condition so for example for each book that we output we might want to conditionally give this a class based on the value of something in each book now to demonstrate this i'm going to add another property to each book called is fave and that stands for is favorite and it's going to be a boolean either true or false so we'll say true for the first one and i'm going to copy this and paste it a couple of times we'll say false for the second one and then for the third one we'll say true okay so now we have this is fave property on each one is it a favorite book so what i could do is evaluate that property each time we cycle through a book and conditionally apply a class to this li tag based on that value if that value is true i might want to style the li tag a little bit differently so what i'm going to do is now use some data binding so we use the colon or v hyphen bind remember and then a colon and we're binding to the class attribute now what i want to do is just use the shortcut instead of v bind and that's what i'll be using going forward by the way and then inside here we can pass in an object now this object is going to contain key value pairs and for each key value pair it will be evaluated the key will be the conditional class that we apply so i might want this to have a class called fave and then that will only apply based on the value of that key if the value evaluates to true then we'll have this class on the li tag if it evaluates to false then we won't have that class so i'm going to reference the book which we have right here and then use the is fave property from that book so that's going to be true for the first one it's going to be false for the second one and true for the third one so the first and the third should have this fave class so if i save that now and preview over here and inspect these we can see that the first one has a class of fave the second one doesn't because it's not a fave it was false but the third one does so now we could style these a little bit differently so what i'm going to do is add some styles to the whole page right here i'm going to come up to the top we don't need this box style anymore that was from a few lessons back and instead what i'm going to do is just paste in a few different styles at a time because i don't want you to watch me write these out it's not a css course so the body would just give a background of a light gray a max width of 960 pixels a margin a 20 pixel top and bottom also left and right meaning this 960 pixel column will sit in the middle the next thing i want to do is strip out the margin and padding from the paragraph h3 and ul so we reset those then i want to style the ali tags so let me paste this in and each ally tag is going to have a list style type of non meaning those little things right here disappear those little circles then we give each one a background of white margin 20 pixels top and bottom auto left and right a bit of padding a bit of border radius to soften the corners we display each one as flex and that means that automatically each of these will sit next to each other inside the li tag and then we align items to the center that means that all of the items vertically sit in the middle and then finally we say justify content space between and that means in the horizontal direction we have equal space between each item these things right here are used in conjunction with display flex now if you do want to learn more about display flex i've got a whole free course on my youtube channel about flexbox so i'll leave the link attached to this lesson but anyway now we've applied those styles let's take a look at what it looks like okay so this looks a bit better right and now i want to style the ones with the fave class a little bit differently so i could say down here li dot fave and then inside here i'm going to say we want the background this time to be a different hex color and that will be ff 9e and then d2 and that's kind of a pink color so i also want the color of the text to be white like so so now if we have that fave class it's colored differently and we can see at a glance which ones are favorites and which ones aren't now throughout this course i'm going to be giving you several different challenges so that you can test what you've learned so far now you don't have to do these challenges but i would highly recommend that you do because it's in these moments where you're trying to figure out a problem for yourself that you actually learn the most even if you don't figure that problem out because you're still thinking about the concepts and thinking about how you might be able to solve it and that is an important step in learning things rather than just always watching what someone else is doing so yeah i would definitely recommend that you do these challenges but anyway the first challenge is to figure out a way to toggle the is fave property of each book when you click on that book on the screen so right now the top one has an is fave property value of true and that's why it's pink because of that dynamic class now if i was to click this i want you to then toggle that value to false and then it would become white and if i click it again toggle it back to true and so forth for each book okay now to do this there's going to be two steps involved the first step is to attach a click event to each li tag and the second one is that when a user clicks that li to toggle the is fave property of that book so it's a relatively simple challenge to begin with but they will get more tax in as we go through the course and learn more but don't be disheartened if you don't figure this out because it's still very early in the course and we've not had that much time to cement the knowledge that we've learned so just spend a few minutes trying to think about it and if you don't figure it out check out my solution in the next video so then my friends hopefully you had a good attempt at this challenge if you didn't figure it out don't worry i'm going to show you my solution now and your solution might be a little bit different but generally they should be the same so the first thing i'm going to do is come to the template and i want to attach a click event to the li tag for each book remember we get an li tag output for each book if i just inspect over here we can see that l i l i l i so that is the thing we want to attach a click event to now to do that i'm going to come over here and say at click and set it equal to a function now that function is going to be called toggle fave now you could have done it in line here if you wanted to but i want it to be a bit more explicit so i've created this function and i'm going to go over here and create this method so toggle fave and this is going to take in a value and that value is going to be the book because right here we need to know which book we are going to update so i'm going to pass in the book as an argument right here and we can just say book because we get that book right here so we have access to it inside this click event and we pass it into the toggle fave function so i'm going to save that and then i'm going to come to the component again and take in that book now all i want to do is toggle what the value of is favors so there's a couple of different ways you can do this the way i would do it is by saying the book which we take in right here dot is fave is equal to exclamation mark book dot is fave so what that will do is say okay if the current value is true reverse that and then assign it to the value of is fave for that book so that's all it's ever gonna do if it's true it's gonna reverse it to false if it's false it's gonna reverse it to true so that would toggle it either way so if i save this and preview let's see if it works click it and it unfavorites it click it again and it favorites it okay and that works for each li tag so again you might not have done this exactly the same there are numerous ways to do it and this is just my solution now there's one more concept that i want to discuss before we finish this chapter and that is computed properties so at first when you start to use computed properties it might all seem a little bit complicated or necessary and strange but they are really useful and the more you use them the more you see that and we will be using them going forward so in a nutshell a computed property is a way to define a data property inside our components that depends on other data that we have inside that components that we might have up here so for example we might want to create an array which is called filtered books now that filtered books array would depend on the books array that we have here it's dependent on this data and if this data changes then our filtered array would change now that filtered array might be an array of books whereby we only include books that are currently favorites so how do we make this computed property then well the first thing we do is we create a computed property inside the component object itself much like we have methods we have computed as well then inside that we create a function so i'm going to call this filtered box and this function will return a value and then we can access that value by using this inside the template so whatever we return here we can access in the template so if i just return for example a string saying hello i know this makes no sense but if i try to use this computed property inside the template then it will give me that value now i'm just going to do this at the top over here paragraph tag and i'll output filtered books like so and save it and we can see we get this hello value all right so it works the same way as normal data properties in that respect but we don't want to do this we don't just want to return a value like this otherwise we could have just done that up here we could have created a property called filtered books inside the data object which was hello so this makes no sense like i said before a computed property is a property that depends on other data and then when that other data changes this will update view will look at that other data and update our value over here because it's dependent on it so what i want to do is return a filtered array based on this and to do that i'm going to say take this dot box and remember that's how we access the different properties inside our component we say this to reference the component and then whatever data property we want and i'm going to use the javascript method filter now if you don't know what this method does definitely check out the last chapter in this course where we go through different array methods it's covered there but essentially this file is a callback function for each item inside the books array and it's going to fire that function and if we return true each time we fire that function we keep that item in the array if we return false then we're going to filter that item out of the array so we fire a callback function for each item and then we need to return either true or false right here now each time we iterate through we get access to the book we're currently iterating so i can pass it in right here and i want to return true if it's a favorite so i can just say book dot is fave now that is either going to be true or false as we cycle through so as we fire a callback function for each item the first one is true so that remains in the new array if it's false it's taken out of the array it's filtered out that's what the filter method does and we're going to end up with an array whereby this one is filtered out and we should then only have this one and this one in it and that is the value that we're returning that filtered array so i'm going to save this and i'm going to go over to the template and instead of cycling through the books i'm going to cycle through filtered books now and now we should only see the books which are favorites which we do awesome now if we change one of those by clicking it it becomes not a favorite and therefore we shouldn't see it like so like so and then if we refresh we get those books back okay so that is computed properties for you in a nutshell it's a way to define data properties which depend on other data and again we will be using them more in different places as we go forward

Channel: The Net Ninja

Views: 138,941

Keywords: Vue, vue 3, vue tutorial, vue 3 tutorial, vue js, vue.js, vue js tutorial, vue.js tutorial, vue js tutorial for beginners, beginners, tutorial, vue.js 3, vue 3 new features, vue js 3 tutorial, vue.js 3 tutorial, vue 2 vs vue 3, v-for, computed, computed properties

Id: CYPZBK8zUik

Length: 34min 1sec (2041 seconds)

Published: Thu Dec 03 2020