Vue JS Crash Course (2019)

[Music] this video is sponsored by net laughs I which is a fantastic service that I use all the time to deploy websites and apps in literally seconds they offer a ton of features even with the free plan including continuous deployment HTTPS and add-ons like contact form submission and serverless functions you can host regular web sites front-end apps using technologies like react gatsby v UJ s and more so if you're looking for a simple and modern way to deploy your website check out nullified comm or click the link in the description below hey what's going on guys welcome to my view Jay s crash course and this is actually going to be an updated version of the crash course I did about two years ago and if you watch my latest 2019 react crash course this is going to be very similar of course we'll be using view but we're gonna actually build the same application so what is view Jay s it's a progressive and performant JavaScript framework that's used for building user interfaces and front-end applications and it's right up there with react and angular in fact in 2018 view gained a ton of traction and a lot of respect within the JavaScript community and we'll talk a little bit about why so view makes creating user interfaces and front-end applications much easier of course you can build just about anything with vanilla JavaScript but the bigger the application is the more complex it is it gets a lot hotter and it gets really unorganized using something like view Jas keeps your application in order and gets you thinking of you know the different aspects of your user interface as individual components and it's just much more organized view Jas in my opinion is it has less of a learning curve than something like react or angular it seems to use the most common sense I'm not saying it's the best I'm not I don't say any framework is the best but it seems to be the easiest to learn and I think has the shortest list of prerequisites it's also extremely fast and lightweight like react it's a single page application framework meaning one page is loaded in the browser and then it's dumb done through a virtual DOM and only certain parts of the page will be updated when they need to be view actually has its own router we'll be looking at that as well so you can can seem to have multiple pages in your application again view is growing in the industry pretty rapidly so these are some some reasons that you might want to learn and use view j/s all right so what should you know before learning view as with any framework you need to know the fundamentals of JavaScript especially objects and functions that's really what view is made of the other stuff below all has to do with the newer es6 features like the module syntax high order array methods arrow functions fetch API promises this is stuff that you should probably learn before jumping into any framework but like I said I think view is the easiest one to learn so you might be okay just knowing the fundamentals and then learning view alright so if you took my react crash course on YouTube this image is gonna look really familiar because just like with react view also uses components or UI components traditionally you may have been taught about separation of concerns where you have your markup meaning your HTML your JavaScript and your CSS all completely separate and that's rapidly changing with the rise of frameworks so we're starting to front-end development is is changing as a whole where we're looking at encapsulated components that include all three of these things okay so they include the the template or the output these the styling and the functionality or the JavaScript and it may feel strange at first but you'll come to see how convenient it is and how much easier it is to structure and debug your applications so here we have a to-do application similar to what we'll be building and each of these are separate components okay so you have the the application as a whole and then you have for instance your to do's component which is this right here our to-do list then you have each to do which is also a separate component then down here you have your add to do component and you have your search component and you have them all interact with each other through props you could use a state management system like view X which will about but each component can hold its own data hold its own methods and you can also use directives what are called directives inside the template which we're going to look at as well all right so the anatomy of a component there's basically three parts and this is what I mean about view being very common-sense you can see that there is the output the functionality and the style so basically the HTML the JavaScript and the CSS and this is all encapsulated in the component okay so for the output we have our template tags and then we have our markup and you can see this right here this user name this is using interpolation so that we can output dynamic content in the script tag here you'll see we're just exporting a default object with a name so the component name which is user and then it has data a data method which returns basically the state for your component in this case we have a user with the name of Brad and we're actually outputting that in the in the template here and then we can have style that's associated with this component if we use the scoped keyword it means that this style is only going to pertain to this particular component so everything is encapsulated which make again makes it easier to manage and easier to debug all right so how do we get started you could include view in a simple script using a CDN but most professional view applications are going to use the view CLI the command line interface right now it's version 3 which is absolutely incredible it includes all the necessary tooling you need it includes babel which will compile newer javascript features to be browser compatible you can use typescript with view if you want yes lint for linting post CSS and some other features as well it includes a dev server with hot reload and what I think is really awesome is the the new view UI tool which instead of running commands to start your server and do that type of those types of tasks you have a graphical interface you can also use it to install plugins you can manage multiple applications and we're going to take a look at that in a little bit all right so the last thing I want to mention before we jump in is State and each component can hold its own data and state but there may be times when you're building a fairly large application and you need to share state across many components so view X is used for state management we're not going to be looking at view x in this crash course but I will be doing a crash course dedicated to view X pretty soon the app that we're building is small so we can simply pass around the data rather than implementing a central store or state management system all right so that's it for the slides let's go ahead and jump in and learn view j/s all right so we're gonna need to install the view CLI to get started and we'll use we're gonna use NPM for that so in order to use NPM which is the node package manager you need to have no js' installed so if you don't have that already just go to node.js org and download either the long-term support or the latest version all right another thing I would suggest is the view Jas dev tools for chrome which allow you to basically view the structure of your components the data that your components have stuff like that so I would suggest installing that as well and then this is the view Jas basically they're their documentation their home page so if you go to get started you can see all the different the lingo over here the template syntax class and style bindings everything you need to know as far as the fundamentals is in this documentation and then CLI dot view J's org is the documentation for the CLI itself alright so if we go to get started and we click on installation it shows us how to install it with either NPM or yarn so we need to install it globally and it's gonna be at view slash CLI I'm gonna want to open your terminal or your Windows command prompt and just run NPM or yarn you can use yarn as well and install - global and it's gonna be at view slash CLI that will install the version 3 CLI which I already have installed and then you can run view - - version and that will show you what version is installed now once you have the view CLI there's two ways to create an application and I want to show you both ways yeah the command-line way by using view create and then you can also use view UI which is the graphical user interface and it's up to you on what you want to use the command-line way is is easier but using the graphical user interface you get a whole bunch of analytics you can basically start and stop your server from from the interface and stuff like that so let's first use view create so I'm going to save you create I'm just going to call this application test and it's going to ask me to pick a preset I'm going to choose default Babel es lint and it's just going to go through the motions and create all the the boilerplate files for a view application and then it's going to tell us we can run npm run serve to start our server and that's pretty much it we can then go on to development but again i want to show you how to use the UI as well should be done in a second okay so we created a directory called test so if we see the in to test this is our view app as you can see all the files here and we can just run npm run serve okay so that's gonna start the development server on port 8080 so if we go to our browser here go to localhost port 8080 and there's our view app okay and we can get started on development now like i said i want to show you the other way to do it which is using the user interface so let's close this up and let's stop the server with ctrl C I'm gonna CD dot dot back into my main directory here and we're gonna run view UI and what this is gonna do is it's going to start the graphical user interface on port 8000 and it this is basically a project manager so we have no existing projects but if I go to create we can choose a location so I'll just go into I'll just go into documents and actually I already had one there let's go back and I'll just go to my desktop I guess so we'll say create new project and I'm gonna call this view underscore crash underscore to-do list and you can choose your package manager which default I believe is going to be NPM and then we'll click Next and then same question as we had in the terminal default preset Babel and yes lint create project and now it's doing the same thing that it was doing in the terminal alright so once that's done getting set up you're going to see your project dashboard and we'll just click understood here get that out of the way and over here on the sidebar you'll see some different options like plugins so we have the view CLI service the the the babble plug in the eslint plugin under dependencies it shows us basically what's in our package JSON file so view is our main dependency we have babel yes lint all this stuff configuration so you can configure your view CLI your output directory stuff like that so it's you can just do stuff excuse me within the browser as opposed to you know within files and and within the command line and then under tasks we have serve and build so we can serve our application run our dev server we can also build out our static assets so let's click serve and then run tasks and it's basically going to do the same exact thing as when we did NPM run serve in the other application but you also get all of these analytics which is pretty damn cool I think now if you want to view your app you can just go to open app and again it opens on 8080 okay so it's the same thing there there's a couple more steps but again you get this this whole nice little interface which I'm the I have I'm not even completely familiar with I haven't used everything in it but I think it is pretty cool so we're going to keep this going and let's let's go ahead and open up vs code let's see open up PS code and we're gonna open up our project here so I put it in the desktop which is right here okay so open that up and now we have all of our files now whether we use the UI or the view create command it's going to create the same files okay same structure boilerplate so we're gonna go through these files and just kind of show you what it what it includes how things work so the package.json as you can see as as for regular dependencies we just have the view framework just like you saw on the in the UI and then all the dev dependencies like babel and he has lint and so on and then for the scripts we have the serve script so npm run serve which we ran from the UI but you can also run from the command line the build script you also have lint for linting and then if we look at public index.html this is basically the the page that served in the browser so view is a single page application framework it's used to create single page applications or s pas and basically it loads one file which is this index.html file and this div right here with the ID of app is basically a placeholder for our view application and it works similar to how react works and if you watch that crash course I went over this as well for react now the way that it's being output here is in our source folder there's a main dot J S which is basically the entry point to view we're importing view we're importing our main app component which is a file called app view and then down here we're creating a new view instance and we're rendering the app component inside of a div or doesn't have to be a div but an element with the ID of app which is what I just showed you in the index.html ok so it's loading the index.html page and then everything comes through this main j/s and through this main app dot view file so this app dot view file is a component it's it's structured like any other component you would build it has a template it has a script for your JavaScript and it has a style now this style is going to be global to your application so if you have global styling you can put that and here and then the template is your markup obviously your output and here you can see we're actually outputting an image I'm gonna you know what I'm gonna make this smaller now because I want if I can grab on to it I want to be able to see both the application and the code at the same time so let's make this smaller and we'll just let this run but let's go to our app we can close these other tabs up so the logo is what you're seeing here and then we have a hello world component okay so components are embedded just like an HTML tag and we're importing that hello world component right here which is coming from components hello world view all right now to use a an embedded component inside of your export right here which is just an object you have components which is another object and you have to define what components you're using so in this case hello world now you can also pass in props to your components and if you're familiar with react this should be a familiar concept so we're passing in a message prop that says welcome to your view j/s app and if we look at hello world dot view that message is being output right here which you can see right here and then the rest of this is just is just you know hard-coded HTML that you're seeing here ok so I could just delete all of this right here and let's see so you need to keep one element that is inside of your template and it has to be one I couldn't put another div right here like that it'll give me an error alright and it doesn't have to be a div it just has to be some kind of element and let's just put an h1 and we'll just say hello world and if I save it's gonna auto update okay or auto reload and notice that this HelloWorld component is structured just like the app component the template the script which is has an export default name of the component and also the props okay whenever you pass in a prop you want to define them here and then down here we have our style now notice the scoped right here is that what this means is that this styling is going to limited to this particular component which is really cool it just encapsulates everything the style the JavaScript and the output okay but I'm going to close this up and go back into app dot view and let's get rid of the logo they don't need that okay if I save it it just Auto reloads now I probably should have mentioned this before but you want to install some kind of view extension for your text editor whether it's vias code or atom or sublime text if you're seeing this view file if it's all white or it's all one color you're not seeing the syntax highlighting you definitely want to install something what I use is view der so this right here ve T you are by pine whoo and it's view tooling for vs code so it has syntax highlighting snippets Emmet Emmet integration debugging Auto completion it's it's really it's a really nice extension but there's there's a lot of them there's a lot of different view extensions but if you're not seeing the syntax highlighting definitely install one of them so anyways let's get back to our app dot view here and I'm going to completely remove the hello world I'll keep the file there but I'm gonna get rid of the import and I'm gonna get rid of the where we embedded it in the app component up here also the the main styling here I'm going to get rid of that and I'm just gonna paste in something very simple basically just a reset for the margin and padding and then just you know the Arial font family so we'll go ahead and save that now we have nothing displaying in in the browser so I want to I will also get rid of this this hello world here I want to start to talk about data okay so your component can have data now this is the main app component so this is going to be a to-do list right so we need to access the to dues from from multiple components from the - dues from the to-do item we're going to have for each item will be its own component also the form the add to do form we need to be able to add to that state add to those two dues through the form so this is where I'm actually going to store the two dudes data and the way that we do that is let's we'll keep this components here for now because we're going to need it but we're gonna say data excuse me I don't know what's wrong with my throat but we're gonna say data and then data is actually a function that's going to return an object and then in here is where we can put whatever we want really so if I say for instance MSG and I set that to a string of hello I can go up here and I can put in double curly braces and I could say msg and save we get hello okay so we can store our data right here I don't care about a message I just that was just an example what I am gonna put here are some - duze okay so this - duze is going to be an array of objects and again if you watched my react crash course you're gonna see a lot of similarities because it's the same exact application except using view instead of react and I wanted to do that so that you can make a a quality comparison of the two framework so you can see the same exact thing done in both frameworks I'll also be coming out with an angular one soon as well so I'm going to just paste in some - dues here one second let me grab them so we have an array with three to do objects that have an ID a title and a completed value so completed as a boolean value now what I need to do is create a separate component to display the two dues so let's go ahead and do that and components let's say new file capital T to do is dot view okay you want to use a dot view extension and just like with the app component we want to do template and go down here we'll do script and with the view to extension when you do script it'll automatically put the export default for you as well and then if we wanted any style we could do style and we could add scoped which will make it it'll it'll make it you know just for this component so in our template here for right now let's just put a div because we need just a root element and we'll put an h1 and we'll just say to dues okay and then for the export default we just need a name so this is the component name which I'll call to dues and that's pretty much it that's all we need in order to be able to import it into the app component and display it so we'll save this we'll go back to app and we'll go right here above the export and we'll import to dues from and we want to go in components / to dues and then we just want to add that to the components here and then if we go up here we can embed it just like that and we'll save okay and there it is there's our - dues component now this is probably a good time to open up the the dev tools so if we open up our chrome dev tools and if you installed the the view extension you'll have a view tab and from here you can see your route app the app components and then the - dues component so it shows you the structure of your air components and if I click on app down here it will show you any data that's associated with that with that component which we have our array here so the goal now is to get these two dues into the - dues component so the way that we do that is by basically passing it in with a directive called V bind gave view has a bunch of different template directives and we're going to look at quite a few of them but V bind we can say we want to bind the two dues so we're going to call this two dues and we're going to pass in two dues from the data okay so this pertains to this down here and then that's being passed in as a prop so let's save this and let's go to - dues view and we want to go down into our export let's put a comma here and let's say props and open some brackets and will say to do okay so we're accepting these as props and then we should have access to them in the template now this is an array right it's not like a single value we just want to output it's an array so we want to loop through them and the way that we do that is with another directive called v4 so I'm gonna go let's get rid of this h1 here and let's create a div and let's add the v4 directive and we're gonna say v4 to do in to dues okay so you can call this whatever you want but this to do is pertains to the props that are passed in and then in here for now I'm just going to put an h3 ultimately I want this to be a whole new component but for now I'll put an h3 and just show you we have access to to do dot and then whatever property so title and if I save that it works it loops through and it shows each to do I'm just gonna make this smaller for now so it loops through shows each one in an h3 but notice we have an es lint error here the reason for that is because when you have when you loop through like this you need a unique key attached to it much like with react if you have any experience with react lists so to do that we just need to use V bind we actually want to do V bind key and this should be a unique value and your IDs should be unique so we'll just simply use to do ID and now that error is gone all right so we're looping through our to do two dues props now we want to create a whole new component so I'm going to go to components new file and we'll say to-do item dot view alright we'll set this up with our templates and let's put a div for now just put let's put a paragraph actually you know what we don't need yeah we need a div and then a paragraph that's good and I'll just say a hard code and or hard right in whatever to-do item and then down here in our script we're going to put the name of the component which is to-do item and let's go down here and add in our style and we want to scope it to our scoped it should be and then I'm just gonna paste in a little bit of styling you guys can just copy this very simple styling just for the the to-do items here so let's just tab that over all right so that's the styling for this component now I'm going to save this and then we'll go back to - duze dot view and instead of this h3 we want to basically output the to-do item but to do that we have to first import it okay so we'll say import to-do item from and it's in the same folder so we'll just say dot slash to-do item dot view and then we need to add it as a component so right here will say components to-do item make sure we put a comma here and then up here I'm going to get rid of that age three and I'm gonna embed to-do item like that and if I save it we're just gonna see to-do item three times the reason for that is it's it's hard-coded in here obviously that's not what we want to show we want to show the the actual data so the way that we do that is again pass in a prop or bind a prop to the to-do item so we're gonna say V - bind to do equals to do okay which is the this right here okay so for each iteration we have access to the individual to do and we're passing it into the to-do item so we'll save that we're still not going to see a difference because we haven't changed anything in to-do item now we're accepting a prop so we're gonna go right here and we're gonna say props and let's say we're accepting a to-do and then in the paragraph let's get rid of that and let's put in to do dot title and save and now it's showing each to-do item okay so let's see I wanna I wanna the styling so we have a class of to-do item I'm just gonna put that right on the div here so class equals to-do item and save and there we go all right so next thing I want to do is I want to implement the the the is complete so you can see we have a class here called is complete and we have text decoration set to line through now I only want the line through if it's completed and if we look at our data we have the middle one here is completed so in to-do item I'm gonna go on to the this div right here where we added class to-do item and we're gonna basically we're gonna add kind of a conditional we're gonna bind the class on a condition of if it's completed then we want to add the is complete class so we're going to do V dash bind and we're going to do class okay so we're binding a class and we're gonna set this equal to and then we want to just open up some curly braces we want to put the class name so it's going to be is - complete and then put a colon and then the condition so the condition is going to be to do dot complete or completed sorry alright let me just close this up so if I go ahead and save that notice that the middle one is now crossed out so just to kind of reiterate what's going on here we're binding a class on the condition of this being true okay so if this is true this is complete is going to be added to the class to the the class and even though we already defined we defined a basically a static class here we can still do V bind class here and if I were to go to the data and let's take the first one and say that that's completed its true and save you'll see that gets the line through it okay now obviously we want a way to to you know make it uncomplete or whatever our toggle the complete so we're gonna add an event for this okay this is the first time we're gonna look at an event now I want a checkbox so right before ight before the title still within the paragraph I'm going to put an input with the type of checkbox checkbox and we don't need a name or ID what we do need to add is an event so I'm actually going to do a V dash on directive so I'm gonna say V dash on change I'm gonna set that to a method called mark complete alright so input type checkbox' V on so we're using the V on directive which is used to add events we want to change event because this is a checkbox we could do V on click V on submit and we'll do some of those later but we're looking at a change event and then calling mark complete alright so I'm going to save that now if I do that we're going to get an error in the console as you can see because we don't have a property or method mark complete is not defined now the way that we define methods is inside of our script our export right here we're gonna go under the props and say methods which is an object of methods so we're gonna add one called mark complete and just to make sure it works let's do a console.log we'll just do one two three so I'll save that and now if I check one you'll see down here one two three so that event that change event is firing off mark complete now when that's fired off I want to change whatever the current to do I want to change the completed value to whatever it's not if it's fall so I want it to change to true if it's true I want it to change to false so I'm going to go in here and say this dot to do because I can access it like just with the this keyword and I can say dot completed I want to access the completed property I want to set it equal to whatever the completed is not so not this dot to do dot completed all right so if we save that and we go over here and we check off this you'll see that it gets a line through it okay because we're toggling that value in fact if we look at our view tools and we look at the steed state right here the data let's look at the first one completed true if I check it you'll go see it goes to false so it keeps switching okay so now that we can mark these as complete I want to now be able to delete them so I'm going to add a button let's go right under the title still within the paragraph and let's add a button and for the the content it's just going to be an X and then I'm gonna add a class of del because they put a class down below to just kind of style this a little bit so it gives it a red you know round red button with an X in the middle so in order to do this we have to basically Traverse up to where the data is where the array is right because we're deleting so we need to basically just look at this and say you know which one do we want to delete which ID and then get rid of it so the way that we can go upwards because we're on the to-do item we need to go up to to dues and then up into app dot view so we can do that by emitting in events and we're gonna put a a click Handler on this so let's say at click okay we can we can use V by RV on we can use at click as well and then we want to set this to money sign omit okay so this is gonna be min in an event we need to give it a name I'm going to call it del - to do that's kind of the convention is to use a hyphen and then we can also send parameters so if I put a comma I can send the to do dot ID because we need to know which one we're actually deleting so let's save that now if I click it nothing's gonna happen in the app but look down here and the view tools you'll see that an event was fired off called del to do it's a type of it's an Amit and if we look at the payload it shows you the ID if I click this one here the payload is to here it's three so it's sending that ID as a payload now the way that we catch this is we can go into to dues where we embedded the to-do item and we want to just add here let's see we want to add a V dash on because we're basically catching this this event that's being fired off it's called del to do so we want to say on del - to do then we want to actually what we want to do is emit again because we need to go up to app dot view right now we're into dues so we're going to say emit and again I'm just gonna say del - to do and we want to send the to do dot ID okay so now if I click this he's actually hold on to me reload this okay so you'll see that the Delta dues are getting emitted from two dues and to-do item now we want to catch this in app dot view so up here we're gonna do the same thing V dash on Dell - to do then we're gonna call a function or I should say a method called delete to do all right now remember the way that we handle methods is down here in the export so I'm going to go under the data which ends right here so we'll put a comma and we'll say methods which is an object and then we'll say delete to do and that's gonna take in the ID because we passed that in as a as a parameter or as a payload so to delete it I mean this there's quite a few ways that we could do this I'm gonna use filter which is a high order array method so I'm gonna say this dot to do is because remember we can just set this dot to dues to whatever I'm gonna take the current to dues and I'm gonna filter and what filter does is it loops through like a for each does but you can have a condition and it'll return an array based on that condition and our condition is we we don't want basically we want everything except the one with that ID because we want to delete that one so to do that's basically just every iteration we're gonna call it to do we're going to use an arrow function and then add our condition which is where to do dot ID is not equal to the ID that's passed in here so we're just filtering it out okay whatever when we click if it's ID - that's gonna get filtered out and it's gonna get removed so let's save this and let's try it out let's go up here we'll delete - and it goes away alright if we delete three it goes away and obviously it's going to come back if I reload because we're not persisting to a database or anything view is a front-end application I'm sorry a front-end framework however I am going to show you how we can make requests to api's we're actually going to use JSON placeholder which is like a fake REST API that we can make request to but we're gonna get to that a little later so what I want to do now is just add the header which is kind of just uh just a markup there's no functionality really to it so we're gonna add in components I'm actually gonna create a new folder called layout and inside here I'll create a file called header dot view and we'll put it in our template and for the template let's actually use a header html5 header tag here and we'll give it a class header and let's put an h1 and we'll just say to-do list okay later on I'm going to show you how to implement the view router and we'll put some routes in here we're gonna have just the home page and then an about page but we're gonna get to that later so for the script let's just say name header and I'm gonna add a little bit of styling so we want this style to be scoped and I'm gonna paste this in it's really simple so it basically just gives it a dark background gives it some padding and stuff alright so we'll save that now we'll go back to app dot view and let's import the header port header from its dot slash components slash layout slash header and then we're just going to add it as a component so we'll put in header right here and then we'll just embed it right here okay so we'll save that and there we go there's our header now next thing we're going to do is work on the the form the add to do form so let's create that in components we'll create a file called add to do dot view and again we'll put our template and inside here let's put a div and we're going to have a form don't need an action inside the form we'll have an input the type of text we don't need let's see actually yeah for the name we'll do this is going to be the title of the to do we don't need an ID I will put a placeholder and for the placeholder we'll just say add to do okay then we want an input with the type of submit and the value just say submit and I'm going to give this a class of BTN okay and then let's see script who want the name had to do and then for style I'm just gonna grab this real quick basically I'm just using flexbox here to kind of align everything okay so we'll save that now we're gonna we're gonna do some more stuff here but let's just bring it in so we'll go to app view let's import it so we'll just copy this down and say add to do and then we need to add it down here as well and up here we're gonna embed it right between the header and the - duze alright so we'll save that and there we go now the the button here doesn't look very good it has a class of BTN and I'm actually going to make that global so I'm gonna put that right in the app dot view styling down here with the rest of our global styling so let me just grab that real quick here just fix that so save and there we go so that looks pretty good so now we want to add functionality to our ad to do I'm just going to close this up and to do that any field that we have we only have one input which is title but if we had more we would have to add them to our data our component data so I'm gonna put a comma here and say data which is a method that's going to return an object and I'm gonna put in title now if we had name email City stuff like that we would put all of that in here and then for the input itself we need to add on a v-model directive and set that to title okay so it works like angular actually it's what this reminds me of is an angular you have your ng model in in V we have V models so to me view is is a little bit like react angular mixed I know a lot of people agree with that but that's that's kind of what it seems like to me but let's go ahead and save that and we're not gonna sleep not going to see any difference yet because we have no event right when we submit this if we type something in here and we submit nothing is going to happen so on the form I'm actually going to just say add at submit and I'm going to set this to a method called add to do now just like with the delete we have to basically traverse upwards to where the array is which is an app dot view the reason I didn't do the you know the omit right here is because I want to first construct the to do and then send it and then omit that in the event so we're actually going to create a method down here under the data we'll put a comma and we'll say methods and let's say add to do so basically we want to construct an object so I'm going to say Const new to do equals an object and let's do an ID now the ID needs to be unique so what I'm gonna do is open up my terminal real quick and I'm going to install something called UUID and I did this in the react crash course as well it's just a small package that allows us to generate IDs on the fly so let's do npm install UUID and once we deal with Jason placeholder we won't really need this because when you make a request to Jason placeholder you don't need to send an idea creates one for you just like you know MongoDB would or you know most databases so let's bring in UUID so import UUID and the way that we can generate an ID is by saying you you ID dot and then there's different versions we're going to use version 4 so we just want to say version 4 and then some parentheses alright and then the title is going to be this dot title we can access it because we have title here it we it's we bound it to this input here so we have access to it with this the stock tayo and then completed is always going to be false when we first add it to do ok so now that we've constructed our object we need to send up to parents by emitting an event so this dot money sign emit dots are not dot parentheses and then I'm gonna call this add dash to do and I'm gonna pass in as a parameter the entire new to do okay so if I save this and if I go here and I just put something in and submit you'll see that it gets emitted in our view tools down here so we need to go back up to app dot view where we have our add component which is right here and we basically need to catch that emit so we do that with V dash on and we'll say V dash on add to do we want to call add to do so we'll go back down here to where our methods are and we'll put a comma right here and we'll say add to do that's going to take in a new to do object and this is going to be pretty easy we'll just take to dues and we'll set it to we're going to use brackets here basically we're going to use a spread operator to copy what's already in to dues and then we're just gonna add on new to do okay and that should do it and there's different ways you can you can do this this probably looks really familiar if you watch the react one as well same thing with the filtering we're basically adding and removing them the same way all right so let's test this out I'm just gonna say test and submit okay so one thing I forgot is back in the form and the add to do in the method right here we want to pass in an event parameter and then we want to call a dot preventdefault because we don't want the form to actually try to submit to a file so that should stop the default behavior and then create the new to do and then emit the event and call the function so let's try it submit and there it is alright all one thing I forgot is see how it's still here I want that to clear so we can simply say this dot title equals nothing so that way once we submit something the form clears okay so there's two things left to two major things left that I want to show you one is making HTTP requests to a back-end to an API handling response and stuff like that and then also the view router so I think we're gonna deal with the HTTP requests firsts now we're going to use something called Jason placeholder just go back here to the home page and I've used this in in many videos and courses it's it provides us with a fake REST API for a testing and prototyping so it works as a real back-end that we can make get requests to post requests put patch delete and there's multiple resources we can use like post comments albums we're using to do's so as you can see here there's we don't need the your ID we can ignore that but we have an ID title and completed so this is what we want to do is load the two dews from here also when we make our add and delete require functions we want to make request to this API and get a response and then handle it in the UI so let's head back to vs code I'm just gonna minimize that actually you know what let's grab go back there for a second let's grab the URL so if I go to to do is you're gonna want this URL right here so I'm going to copy that now to make our initial request we're going to use a special method we're gonna go to app dot view and we're gonna use a special method called created which works similar to how component did mount works in react it basically fires off when the component loads all right but first I want to just clear out these two dews we're just going to have an empty array to begin with okay so we have an empty array now if I save this there all these will all go away and then underneath methods which ends right here I'm gonna put a comma and I'm gonna say created okay so this will run right away and this is where we want to make our request so you could use the fetch API if you want I prefer Axios so I'm going to go ahead and run npm install Axios which is just an HTTP library so we can make get request post requests and so on and again you can use the fetch API if you want so let's bring it in we have to bring it in if we want to use it so import Axios from Axios and then in created we're gonna make our request so Axios dot get since we're making a get request and i'm gonna paste in that URL that I copied I'm gonna close this up again so paste that in now this is going to return a promise so the way that we handle promises is with dot then okay we can also do dot catch and if we get an error I'll just console.log the error all right now this is going to give us a response back and this response is going to have its going to have a value called data so res dot data is going to give us our actual to Do's and what we want to do here is set we're gonna put an arrow function and we're going to say this dot - duze we want to set that to res dot data okay so this dot to do is pertains to this right here we're basically filling this with the - dues we get back from this request when the page loads so let's save and there we go now initially it gives us I think 100 or 200 of these things and that's that's too many so Jason placeholder allows us to limit that with a parameter so I can say question mark put in a query parameter of limit equals let's do 10 and save and now we only get 10 actually you know what let's do 5 ok so we get 5 to do is from that API alright and and normally this would probably be something you built maybe an Odin Express server or I don't know Python flask or Django or PHP whatever it may be some kind of back-end API that you build all right now with the add and delete we also want to make requests so let's go in the add to do and let's say Axios actually there's there's a couple things we need to address here one is that Axio not Axios jason placeholder gives you an ID okay when you make a post request and you create a resource it gives you the ID so inside of our add to do we know long need this right here so we can actually get rid of that and we no longer need to bring in UUID I'll actually just I'll just comment that out so now our new to-do consists of a title and completed no ID so let's save that let's go back to our app app dot view and this remember this now has just the title and the completed so what I'm going to do is use some destructuring to pull out title and completed from the new to do object and then we need to make a post request so let's say Axios dot post and the URL is going to be this right here not the limit but just the slash to do's and then it's going to be yeah that's right and then we need to add another parameter with the data that we're sending which is going to be the title so basically title but since this is the same we can use es6 and just to title and then also completed okay which we pulled from this new to do so we're sending that data along and then that's going to give us a promise back so we want to say dot then dot catch if there's an error okay and then again this will give us a response we want to put an arrow function here and the way that we're going to handle it is the same way that we did before we're just gonna copy this we don't need the semicolon so let's just cut that get rid of that and put this right in here okay now instead of new to do we're gonna take the data that it gives us back so res dot data because when you make a post request to this with a new to do it gives you back that to do along with the ID that it creates for you so let's save that and now we should still be able to add and what will happen if I just put tests in here and submit what happens is it makes a request to Jason placeholder it adds it it then it gives us a response and then it gets added to the UI okay so that way it gets added to the server and the UI now Jason placeholder doesn't give us a database that persists obviously they they're not going to do that because people would just flood it but it does mimic a real back-end API the only difference is it doesn't stick if I reload it goes it still goes away all right so hopefully that makes sense now for the the delete to do we're going to do something similar we're going to use Axio so we're going to make a delete request and it's going to be to this URL but when you make a delete request you actually need to add the ID on the end so I'm going to use backticks here so that I can put a variable in here by doing slash money sign curly braces and we want the ID which is coming in right here okay so we're going to delete and then that gives us a promise and say rez and then we just want to do what we exactly what we did right here except we want to do it after we make the request so just stick that right there alright so we'll save it and we should still be able to delete okay it makes a delete request to the server we get a response back and then we delete it from the UI all right guys so that's how we can handle HTTP requests next thing I want to go over I want to show you is the view router now we can actually install the router I mean you could install it with NPM or yarn but we can install it with our UI here our graphical interface our control panel whatever you want to call it so if we go to let's see where is it shows you how much I use oh right here plugins so we have add we can add view X and we can add view router now there's a little hiccup here when we add view router it's gonna actually overwrite the app dot view file so I mean usually what I would do if I if I planned on using view router I would install it first and then work from there but I didn't want to do that because I didn't want to start off with the router so like I said it's gonna it's gonna overwrite this app dot view so I'm gonna copy everything that's in here I'm gonna select all and copy I'm just gonna open up a new file and paste that in and just just keep it there for now okay and then we're gonna go and we're gonna add view router ok so official library table and click continue and it's just going to install it as a dependency ok so the router is now installed if we go and we look at our application it's it's ruined basically it replaced the entire app dot view so if we go to app dot view now it looks like this it creates it also creates an about page for us and we can flip back and forth and if we look at the file structure what happened is it created a folder called views ok and there's a file called home dot view which is our our home component that's showing here and it's showing the hello world from before all right and then there's an about dot view file which is just a template and it also gave us this router j/s and this is where we create our routes ok so in our routes we create an object that has a path a name and then a component and in this case it's displaying the home component here and then we also have a path with slash a bo that displays the about component now what I want to do is the home component with what we had in the app dot view so let's go to let's see the file that we pasted the code in here that we had before and copy it and go to home dot view in the views fault and the views and paste that in and let's save all right so we get failed to compile because right here name we still have apps so we want to change that to home and save and that's not the only reason can't resolve had to do okay so the paths are a little different because now we're in the views folder so we need to go out of the views folder so we need to do dot dot slash for these and save and now we have it back ok and everything should still work just the same now up here we have a little menu because in our app dot view right here it's embedding the router or whatever whatever the current view is it embeds here and then we also have this little navigation what I want to do though is have the header here because I want the header on every page if we go to the about page there's our header isn't there because it sits in the home component so what I'll do is go into home dot view and let's remove all the signs of the header here so that this and this so now if I save that our header is gone and now we want to bring it into app dot view so we'll go right here put in our script I'll say name app components header and we have to bring that in header and we're gonna bring that in from let's see dot slash component slash layout slash header and then I'm gonna put that in let's actually get rid of this because I want the routes inside of the header so I'm going to just get rid of that completely and put in our header up here okay so we'll save that and now we have our header back now I still want to have a link to the about page so I want I want to put that in the header so let's we can get rid of this file now let's go to header dot view and let's add in the navigation so right under the h1 here actually I should have just copied it from app dot view let me see if I can undo yeah I'm just gonna copy this this div with the idea of nav and the routes put back header and then put that inside header dot view right under the h1 okay and the way that we link to pages is not with an a with an href we use router link and the two attributes similar to react router Dom we have the link to with view we have router link to so I think that's it let's go ahead and save that and there we go I don't like the underlines and stuff so let's actually add text-decoration:none there we go and if I click about brings us to the about page I'm just gonna change that up a little bit the content so I'm going to go to views about dot view and let's let's just say about put a paragraph this is the to-do list app version 1.0.0 it is part of the view crash course on YouTube and save alright so that's pretty much it that's how we can implement the router and I know it's a little confusing you'd probably want to install the router first and then deal with your views basically our our home view it's just our ad to do and our to do is component okay instead of just having a view equal one component we have two components but of course we could add more if we wanted to so let's uh let's close this stuff up and when it's time to actually build out your static assets so that you can deploy your application you can do that from the command line you can do NPM run build or you can do it from your your UI so if we go to the dashboard here and we go to tasks let's go down to build and by the way if you want to change your configuration so if you go to the view CLI right here you can change the output directory by default that's going to be called dist but you can change that if you want I'm just gonna leave it and then if we go to build and we say run tasks what's gonna happen is it's gonna build out that dist folder and that's that those are the files that we would actually deploy to to our production server so let's go back to vs code and now notice we have a dist folder as the index.html the static JavaScript so this are the static assets so this is basically our application that we would deploy now I'm not gonna do the deployment in this video because I just want to focus on View itself but a fantastic service to deploy to is net liffe I I actually I'll actually put a link in the description to a video that shows you how to deploy something to notify it's extremely easy all you have to do is create a git repository sign up for net left and just push it to natla fie and it'll be live very very simple but that's gonna be it guys thank you so much for watching especially if you made it to the end if you like this course please leave a like and I'll see you next time

Channel: Traversy Media

Views: 1,123,279

Rating: 4.9393353 out of 5

Keywords: vue, vuejs, vue js, vue tutorial, vue framework, javascript framework

Id: Wy9q22isx3U

Length: 68min 52sec (4132 seconds)

Published: Thu Jan 10 2019