Vue.js Todo App - Basics - Part 1

what's up guys Andre here and today I want to build a to-do app in view j/s now I understand that a to-do app in the most exciting app to build but I want to do it anyways for a few reasons it really gives insight on the basics of a framework because it's easy to understand and it's easy to see how crud actions work I'll also have follow-up videos where I extend the functionality and eventually hook it up to a laravel back-end for persistence this will give you insight on the beginning stages of building single page applications now typically when I work with view I'm within a laravel app because laravel ships with view but for these videos I'm gonna keep the front-end and back-end independent from one another the main reason is because I want experience with working with few on its own and also I have plans in the future to swap out the front-end with other languages sorry with other frameworks maybe react maybe angular and I also want to do that for the backend where I swap out the backend for other back-end languages now I'm gonna be assuming that you have some knowledge of you but even if you don't it should be somewhat easy to follow along because view is very nice to work with and easy to understand I'll leave some links below to some great resources if you want to learn view from scratch now here is the final app that we'll be building just again basic to-do lists you can add you can edit if you double click and there's other features like checking all clear completed and there's also some animations that you can see when you add new ones so we'll be taking a look at all of that and building this from scratch so this is some based off of the to-do app that you can find in the documentation we'll try not to look at their code and build out our own from scratch although I did take the functionality from here and this to-do app is part of a bigger project where the same app is built out in different libraries and frameworks so if you're interested in that definitely check that out alright so let's get started we're gonna be using the view CLI let me just stop this so I have the view CLI installed already and I'm still using the older version it's not older but as of this recording view is really pushing the new version which is still in beta but I'm using I think it's version two point nine point three it doesn't really matter the new version just makes the experience of building out an application slightly better than the current version okay so I'm gonna do view in it and I'm gonna use a web pack and the project name is going to be to do view and let me just go through this it's fine fine that's fine we're not gonna take a look at the router no you don't have to link my code no unit tests for now no end-to-end tests I'll stick with NPM alright so it says right here just CD into it and then run NPM run dev and then NPM run dev and now our app is running here and this is the boilerplate that comes with our application here let me just open it up in vs code and the get started so here is the entry HTML but there's nothing going on here the entry point for the JavaScript is in main j/s here's where view gets imported and here's where a new view instance is made and you can see that the route component is this app component which is right here and you can see that the template is an image and then this stuff is coming from this HelloWorld component which is in here and this is where the rest of that page is coming from so we'll keep the logo but we'll start building our to-do app from here so let me just go back into here let me just do some quick CSS resets I'm just gonna make sure that box-sizing is set to border box and then I'm gonna make my own container oops set the max width to 600 and then we'll Center it okay what else am i doing let me just get rid of this oops sorry let me just put a colon here and then I'm just gonna make the logo a bit smaller margin and we'll give it a a smaller height all right that looks oh I forgot to send set my container so I can put here so the view CLI automatically refreshes your page after you make changes so that's good okay so that is good I'm sorry I also want to set this to logo okay there you go cool okay let's make a new component we'll put it within components let's call it to-do list top view and from within here we can import it to do list from to-do list you can specify it here to-do list and then we can call it here actually let me let me copy this down here we don't need this let me just make to-do list goes here name is to-do list we can just leave the data and I'll make a global I don't wanna make it scoped because later on we're gonna be extracting to other components but we don't need any of this and to-do list and see if that works awesome I also want to use what I've only assess four styles just like in nest selectors just easier for me so to do that we're gonna have to install a few NPM packages so MPM install we need SAS loader and no SAS just do that and now we can use SAS if we do this we just do lang equals scss then this will be interpreted as SAS okay now let's add our input so somewhere in here we can put an input text let's give it a class to do input and it gives a placeholder of what needs to be done and see how that looks why don't you refresh okay actually let me put this to the side put this to the side and we can work like this alright cool so want to make sure it it refreshes I'm just gonna paste in some code to style the input I want to make you watch me do that so I can save some time so there you go it looks better okay let's also put a V model on this input let's call it new to do and let's start building out our data here okay so let's put that new to do in here you know to do let's make it empty at first and at first I just want to put a list of two dues and have a few in there initially so let's go ahead and make a - duze array it's going to be an array of objects and these objects are our to-do lists to-do item sorry so it's a good idea to have an ID later on this is gonna come from our database but for now we'll hard code it in finish view sorry finish view screencast and then we need a boolean value to see if it's completed or not false and that's good for now let's make another one so to take over world and that's not done yet okay cool so let's see if we can get these two dudes rendering in the browser so I'm going to delete this and I'm gonna do a div and we're gonna do a v4 which is a for loop in view and we're gonna do to do in - dues so we're going to loop over that to use array we just made and then we have to make sure that we give it a key so the key is to do that ID that's why I made that ID in there and we'll give it a class so we can style it to do item and let's just output that in another div actually we just do like this to do dot title and that should there you go I'll put it here okay now focus on adding to dues so what we want to have happen is the user type something in here presses enter and then it adds to this array and shows up here so for event listeners we can do this at key up enter I really like that feature so you don't have to look up the key codes and let me do that we just want to call and add to do method which will add right now so right here after data we can specify a new property called methods and we can add that add to do method and just move this up to do and let's just make sure that works okay let's test it up high and it alerts it cool so we want to add to this - Doozer array right here so let's go ahead and do that so we can do this start - duze so anytime you're referencing a data property make sure you have this specified so they start to do is push and we want to push in an object so the ID is going to be this that ID for to do we don't have that so let's add that here and I just want this to be a reference to the next idea we're going to use again later on when we use a database that's where it's gonna come from but for now we don't want that so let's just add that when I name it ID for to do and it's just hard code 3 in there and then we'll increment it after we add to this array the title is this dot new to do which is the model on the input so we can grab that automatically since view has two-way data-binding completed by default is false and editing oh sorry not that okay and then after we do that we can just set the input to nothing and we also want to increment to that ID for to do plus plus okay so let's see if that works adding and it works cool let's also make sure that we can't add empty ones right now I'm pressing enter and it allows for adding empty strings we don't want that yeah not sure why it's not showing let me just double check let me check view dev tools which you should definitely use and there's nine items in here and there's only one two three four five six yeah so some of these are blank and we don't want that yes I think there's one black one in here see that's blank we don't want that to happen so before we push we can just do a check so if they start to do sorry new to do the trim zero and just do an early return cool now we shouldn't be able to add now there should only be four here cool awesome sorry that should be length not length okay now I want to work on removing items so a little bit of UI changes here I want a close button to the right of it so I'm going to use flexbox to justify content space between so let me just paste in again some code some styles so you'd have to watch me so the to-do item which is this is gonna be display flex and then I'm gonna have two items in there so I'm gonna have this title goes in there and then I'm gonna have another one call that remove item and that's just gonna have times there you go let me just dial this real quickly as well just so it has a cursor:pointer I copied the wrong thing there you go just so I was a cursor:pointer and some hover color change cool let me just make the font size of everything a bit bigger so back to our root component I think here on size 24 pixels there we go okay so removing where is it right here so when we click it we want to call a function called remove to do and we have to remove that to do instance in the array so we're going to need the index as well and here we have to specify that we want an index two so if we just put to do index then we get the index of the current item in the array so let's add this method right here remove to do index and all we want to do is this got to do is we're gonna use the splice method and we're gonna give it the index and we're gonna remove one item and we're not replacing it with anything and that should delete it so yeah see if this works adding it's okay now let's delete these coop and they delete to check if they remove from here you should see this one delete and it does cool so now let's work on editing to-do items and this can be a bit tricky so let's take a look at how they do it so the way they do it is if you just inspect this so yeah you have to double click the element so if you look at that to-do item there's a div that displays the to-do item but there's also an input that's hidden by default if I take this off you'll see that there's two of them and it's just toggled between whether or not the state is in in editing State so once I'm in editing state then the Dave that displays it is not displayed so that's something similar I hope that makes sense it's a bit tricky but we'll get through it okay so what am i doing let's initially just make another input that is the same as this but is a textbox let's start with that so I'm gonna make another div just so we have different differentiation different ation sorry can't talk okay so let's put another one text and we're gonna set the v-model on this to be to do that title so it's the same as above see if that works okay so now we have a text box which is the same as this so that's that's a start so I'm just gonna do a few styles here I'm gonna name this one to do loops classy to-do item left because they have to look exactly the same so when you double click it it looks like it's the same item so let's do that so for this let's give it a class of to-do item label because it's the label and then for this input let's give this one a class of to-do item edit and it's gonna copy styles from my other window here I'm gonna paste it in down here paste and see how okay and we're also gonna need some state to check if we're actually in an editing state like when we first double-click it we want this to be in an editing state and when we click off of it we want that state to be removed so what I did is I added that state within our array here so this is called editing for each item and initially it's false so I'm going to do that for these and now let's see if we can toggle between the two states and hide and show these two components so let's add a V F here and we only want this to show if we're not editing so to do that editing so not to do dieting which is going to be true initially because we want this to show and then here we can do V else like this but we also want to have an event listener to change this to editing once we double click it so call a edit to do method and we're going to pass in there to do like this what happened there double click equals okay and it to do to do so let's go ahead and make that edit to do method right here edit to do to do make sure we have a comma let's flip that bid that's coming in so to do that editing is true now and let's see if this works so there you go you saw it disappear let's see if the other one appears when we double-click this and it doesn't see if we name this right edit to do is this working let's just see if this works I'm going to alert something in here where to go I learnt a little quick ok so that's not working what'd I do wrong oh sorry this is a lowercase C so refresh ok so that worked you see that the input is showing after we double click cool let me just remove that alert but you can see that it still remains in the state even though after we click off of it so we have to flip that bit once we listen for the blur event and largest means after this loses focus so we want that to happen on two occasions once when we press Enter like we added it and every press Enter we want that to blur off and also if we click off of it so let's go ahead and do that so right here we're going to listen for the blur event and then we'll do will call a method called done edit and we'll pass in the to do and the same for the key up enter so let's go ahead and make that method so don't edit to do so it's just the same sure just copied it and it's flip the bit the other way and see if that works so double click enter some data press enter okay that's cool and let's see if it works if we click off of it and it does cool okay so they're still okay so there's sort of a focus issue here let's just do this again so right now after we double-click this text box is not focused so we are click it again so now it's focused so now the blur event will work so we got to make sure that once we double-click a certain item we want that to focus see it's not focused right now now it's focused same with this so the side effect of that is once we try to blur it's not going to work so we can have this case over here which we don't want so if you look in the view documentation for custom directives they actually have an example of one for focusing once a component becomes visible so this is exactly what we want so I'm just gonna grab this I'm gonna put it anywhere here I'll put it after the data and now we can use this doesn't look it doesn't look indented right let's reinvent that okay maybe this is not reinvented okay I'll fix that later now we can just use that custom directive so it's just V - focus so on our input which is right here we can just do V - focus and now once we double-click this it should have focus and we should see our cursor and we do cool now the blur should work and it does cool so another feature I want which comes from the example here is I want the ability to cancel out say say you don't want to do that you press escape and that should bring back the original to-do item so let's go ahead and do that so right here let's add another event listener for the Escape key so key up escape let's do cancel edit cancel edit down here let's put it here actually cancel edit to do and set the to do the editing to false but let's also set the title to a property we'll add in a second called before edit cache and this is just gonna grab the title before we edit it so right here when we first get into this editing state right here we can set that so this that before edit cache equals to do dot title and it's just set this into our data we'll just set it to empty at first let's put up here okay and that should work so if we double click it we change it well we press escape that should bring it back cool also we can use this to prevent adding empty strings right now if we do this we have an empty string and we don't want that so in our done edit we can just do a check like we did before like right here let's grab this and paste it in so it's if to do that title that trim that length then we can set the title to the cache and now we shouldn't be able to add empty strings cool sorry this should check for an empty string like that so it should still work cool okay now let's work on the checkbox that completes this to-do item so up here we can just add a new checkbox so input check box and we don't need any of this and we start to set the v-model on it to be the to do dot completed and i should do it so that actually sets it but there's no line through yet because we have to add some CSS for that it's just double check let's set it and right here okay so it says that you can see it set it to true and false so let me add some CSS so we can have this line through item here I'll show you how to add that to this over here let me just add this where is this okay so I'm just adding that line through on this completed class and I give it a color and we want to set it on this item over here so the to-do item label so how am I gonna do that so one of my favorite features is this one actually it's the ability to add as conditionally it's a small feature but I like the way view does it so we're gonna add a class and bind it we already have a class before but view is part enough to just add it on to this class so we can just do this so what we're gonna do I'm gonna have an object and we're gonna add this completed class if the to do is completed so you have two really nice clean since syntax instead of doing like a ternary to check so there you go once we click it it adds that line through it okay a few more features if we look at here we have the ability to check how many items are left we also have the ability to check all will do that later we have the ability to filter these items so for example this is everything right now we can filter it to only active ones only completed ones and we also have this clear completed which will clear everything that you've checked so let's start with the easiest first and let's this just shows the number of items remaining so it's going to do that so I'm just going to add some markup for that so right here I have an extra container and I'm gonna erase this for now because we can do that later and this is this check all yep this is gonna be for checking all and this is how many items we have left let me just again I'm gonna paste in some CSS so that appears left and right so right here I'm gonna paste this in so this extra container okay and just extra stuff in here like that rule and I'm gonna add some buttons in here so there's some styles for buttons so I don't have to keep pasting and CSS so for this remaining here or items left as you can see there is a property here that says remaining but that's not gonna be a data property per se it's gonna be a computed property so let's add a computed section here and one of the questions that people always ask when they first start on in view is what's the difference between computed properties and methods technically you can put all your computed properties as methods but a computed property is for composing new data derived from other data and a few rules that they follow they should not mutate any of your data they should not accept parameters and they should always return something so for this remaining thing this remaining property so what are we trying to do here we are like I said we have to return something we just want to grab our to do is filter them down to ones that are not completed and then count them so we can do that so we're gonna get our to do is we're gonna use the filter function and we're gonna just to filter them by ones that are not completed completed and then we're gonna describe their link and up here meaning yeah so computer properties you just refer to them and like their data property so even though they're defined as a method you just refer to them like there are many properties and that should work and this should be reactive once we check one of these and there it is cool okay now let's work on this check of checkbox so I have a checkbox for it already and we want this to be reactive as well and by that I mean if we click everything like when it's like this we want this to be checked automatically and when I uncheck this I want this to uncheck automatically as well so how are we gonna do that let's make use of computer properties again so we want to bind the checked to another computer property let's call it not any remaining because we want the checkbox to be checked when nothing is remaining so let's make another computer property called any remaining where is it right here any remaining again it doesn't take any parameters and it has to return something and all we're gonna do is just make use of this other computer property that we just made and just check if it's not zero so they start remaining is not zero and that should work so if you go over here and that shouldn't be checked but once I check this this should check automatically and it does cool if I uncheck it it should uncheck and it does cool and now we just have to work on once we click this manually ourselves let's go and do that and all we have to do is listen for an event so the event is changed and that's just when you click on it and it's called a method check all - dues so let's go ahead and make that check all - this method do it down here check all - dues and all we're gonna do is go through the - dues array for each - we just want to set it based on if we check the box or not so to do that completed equals just in the event target checked that's just if we manually checked it so that should work let's check it out no pun intended so this still works cool but this works as well if you just check it manually awesome see if we check it yep looks like it works now let's work on those filters so the all active and completed filters it's gonna paste some more code in here so I so I have another section that has those filters and don't mind this we'll add that in a second this is where the complete all button goes or what it was it it's called a check one clear completed let's just put a placeholder and okay so I pasted that in okay I'll just leave it and explain it so what's going on here we have three buttons we save this okay so we have reruns and we have this condition of class again and the condition is based on this filter data property which we don't have it's odd that and by default that's going to be all and based on what the user selects here this is going to change you see how that's active now because if the filter is all then it's active and then every time we click another button we're just gonna change that filter and I also have an active class that that's a color but now how do we set the filters to change the actual list of two dues so if you look up here we are iterating over our two dues array but now we want to iterate over whatever the user selects here so just you want to make a new one called two dues filtered so this is this going to be another computer property and this is just going to be based on what they select down here so let me show you what I mean so in our computer properties here that's just add another one called two dues filtered and we just have to check so if this top filter is all then we're going to return just what we had before so just a normal to dues and we're gonna have two more cases this stuff filter equals active and let's just grab one more and the last one is what's the last one completed and it's just I don't think about this but this is for the default case okay so we'll be doing for these two so what's active active is just the two twos that are not yet completed so we can just do they start to do stop filter to do not to do dot completed and for the other one it's just the other way around so complete it is just that and if you save that let's add a few more and let's check a few now if I click active it should only show these three and it does complete it should only show that two that I checked cool so that's working okay now let's work on this clear completed button so we already have a placeholder let's make it a button so button clear complete it and it's just conditionally show it let's make a new computer property again so show clear completed button and then once we click it sorry here we want to run a method clear completed method okay so show clear completed button scrap that let's make another one right here and all we're doing here is making sure that we've checked at least one so like we've been doing just filter it down to what we've checked and check if it's greater than zero so it won't show now but if you check one issue show there you go cool now let's work on the actual button so I named it clear completed let's grab that down here clear completed so we're just going to grab our - dues array and we're just going to set it to all of the items that are not completed filter to do is not completed that should do it late it okay so see if this works let me add a few and it's just to remove these two and two should remain awesome and it works now let's quickly go over animations so the easiest way to show animations are on things that only show up conditionally so like what we just did there so for that she'll completed show clear completed button so when this button only appears sometimes so go ahead and what we're doing we're gonna wrap it in this transition tag I'm gonna close it and let me just paste in some more CSS that actually does the transition just basic transitions so we have to specify the interactive and the leave active this is based on what we named it and that should fade see if a fades there you go see it fade in note and also we can also incorporate an animation library like animate CSS which is the most popular one this one here I'm sure you've seen this before so we want to animate our to do's and this is a within a for loop so it's slightly different so we want to wrap that into with a transition group tag and the name - doesn't matter here because we're gonna be using the interactive class and this is just the animate CSS class and the leap active class is also the CSS class for animate CSS and now I'll have to do is import that in our CSS so if I just import it here down in our CSS everything should work up here alright yeah I'm gonna import it using an import statement I'm scrubbing it from a CDN and now once we add a new to do this animations should kick in so it's the animated fade in up just refresh to make sure animation and there's our animation it's really slow right now I'll show you how to change that in a sec and if we remove it there you go it removes so to make it faster just go into your to-do items ESS so whatever you're iterating over let's give it a class and just do animation duration duration zero point three seconds is good for me and that we should be faster animation cool that's a good speed for me so there you have it guys we've managed to build out this to-do app in PJs and managed to make it very dynamic very robust with not too many lines of code in future videos we'll take a look at extracting components and how they can communicate between each other please like comment and subscribe if you haven't already done so thanks for watching guys see you next one kay thanks bye [Music]

Channel: Andre Madarang

Views: 150,355

Keywords: vue, vue.js, vue.js tutorial, vue app, vue js, learn to build a vue.js app, learn vue.js, vue todo app, vue todo app tutorial, vue.js tutorial video, vue js basics, vue app example, vue js introduction, vue.js intro, vue basics, andre madarang, drehimself, vue cli, vue components, vue todo basic, vue.js project, vue.js todo app - basics, vue cli install, vue webpack, vue todo mvc

Id: A5S23KS_-bU

Length: 53min 44sec (3224 seconds)

Published: Tue Apr 03 2018