The Vue Tutorial for 2018 - Learn Vue 2 in 65 Minutes

you hey everyone Garry Simon of course etro here and today we have a good one for you I've been working on is quite a while and this is going to be a crash course for view js2 and you're going to learn pretty much all of the core concepts and so this is definitely very much a beginners course we're not going to get in depth into any one specific area but we're gonna cover all the pertinent topics and also do so in an example format because we're going to create an app in doing so alright so let me just show you that app real quickly and this is the app obviously very simple kind of just like a your typical kind of a to-do type of list app but it has a different unique it says enter a skill that you have whatever all right so first I without using it so far we can see that I you know we're gonna be handling basic templating and covering interpolation and stuff like that also iterating over arrays kind of like how we are we're also going to cover CSS and more specifically class and style binding here in view and then also we're gonna handle form input so if we put in something like des I for instance will see that this little form validation comes up so we're going to be covering form submission in validation as well if I just put Dez I put diz in design fully we'll see that goes away we can now hit enter and it will submit it we have animation occurring I we have enter and leave animation so if I get rid of this we can see we have a unique animation occurring we're going to show you how to tie that in with other animation libraries also we're going to cover routing so yeah we can go to different pages and I have a URL parameter here that we're showing in a template so I'm gonna show you how to do all this basic stuff and yes while it is very simple you're really going to gain a lot especially in a very short relatively speaking amount of time alright so in this tutorial right here in this lesson we're gonna talk about the obvious how to install view Jas and so we're going to cover three different ways so the first way is going to be using a CDN which is very quick and easy to get up up and running with the second way will be to use NPM to install it with an existing project that you might have and then the third and final way that we're going to use for our project is using the view CLI or command-line interface so let's go ahead and get started oh but real quick before we begin make sure you check out my site course cetera comm where you're gonna find a bunch of courses on modern design and development a lot are free and others you can access for the cost of buying me like a six pack each month that's it now also it probably wouldn't hurt to subscribe here on YouTube and be sure to make sure the notifications are turned on all right let's get back to it so the first thing oh by the way that's wanted to mention every video lesson here also has a full written version so you can find that here into the description and then you can just you know if you need to grab code or whatever you can do that there as well alright so the first method that we're going to use here I is just basically using a CDN version so open up your command line or console and I'm going to create a new folder for this so make der view CDN and then we're also going to put double ampersand to CD view and then CDN so I'm just gonna create it and then hop into it alright so now I'm just going to type in code in a period and that will open up visual studio code that's the code editor I use you can download then install it for free if you wish it's from Microsoft and then you have access to that console command so now we're just going to create an index.html file by the way you don't have to follow this if you're not going to use this method if you're just interested in jumping into with the method we're gonna use you can fast forward to this video where I start to cover the the view CLI all right but for now this boilerplate code that I have that I'm about to use you could just hit exclamation point and enter and also in the written version I do have a link here for the script that we're going to use so if you want to use the CD version always to do is just paste this right here take control B to get rid of that sidebar I and we can see we have script source and this is how we're including view J s right here and that's from a CDN or a content delivery network it's basically one of the fastest ways of getting up and running with a project with view J s so I if we save this now and I hit control B to get the sidebar right click and reveal an Explorer real quickly and I double click on this let me get this out over here and I hit ctrl shift I here on Chrome will see in the console it says download view dev tools extension for a better develop experience you are running view in development mode so yes we have view up and running and ready to go already alright so I just to demonstrate how I even to the fact that this actually is a view app I we can go back to the console alright control B here and what we can do is just underneath our script right here we can have another script and inside of this we can actually construct our view app and one quick way of doing this let me just died because we're not going to be using this method I just want I'm just going to copy and paste from the written version all right and so you'll understand what this stuff means in a little bit but I'm just gonna paste this here and then also at the top we're gonna add a div and right here is interpolation and by the way if you don't know what this means don't worry I'm going to be covering that but we're using interpolation to show a property called message the message is defined down here say is hello view so if we save this and we go back and we go - oops I have the wrong area up there we go we refresh this says hello view right there that way we know this is an actual view js2 app alright so that's how you get up and running with an actual CDN we're not going to do that though it's not as dynamic and flexible of a way to to actually use view so the next method to use view Jas I'm not even going to cover it instead what I'm going to do is just show the written version of this tutorial and this is under the section of installing view through NPM alright so basically you know you can use it to install view within either a new or existing project all right so one of the first steps you need you have to make sure you have no js' installed along with the NPM and then we could make a directory just like we did before and then we would run NPM in it why to create a package.json file if you don't already have one and then we would use NPM install view and then save it as a dev dependency by the way you can also use the yarn package manager if you're used to using that alright so then at this point you would create an index.html file with the same exact contents as a CDN example above except you would change the script source to node modules view dist and then view Jas because NPM installs it locally so you wouldn't be using a CDN alright so I we're not doing that method the way we're gonna get our project up and running up it with is the view CLI alright so that's what we're gonna do now so the first thing we need to make sure we actually have the view CLI up and running let me close this out here so to do that I want to go back to my console I'm gonna get out of there and what you would run is NPM install and by the way if you have you want to check to make sure you have your NPM by put running NPM - V if not make sure you install node.js from nodejs org alright so NPM install global that's the hype and G we're gonna say at view forward slash CLI hit enter and that will install I'm not gonna install it because I already have it installed it'll take maybe about a minute or 30 seconds alright once you have it installed and it's ready to go if you encounter any of errors of course make sure I you obviously go in google it to fix it and once it's ready view create and then name of the project we'll just call this view skills all right so hit enter and now it's gonna take well usually in I'm used to other CL eyes and installing quickly now first it's going to give you a prompt please pick a preset and you can use your arrow keys to choose whichever this is just a default version where it will include just some minimal options or you can choose manually select features we're not going to manually select the features that include stuff like you know the sass pre-processing the view router and there's several other ones but for now we're just gonna choose default alright so at this point then it's gonna take a little bit of time to get up and running it's usually about thirty seconds or so and I will come back when that's done alright great so now it's done we can see here at the very bottom it tells you go ahead and CD the project name and then yarn serve okay because it's gonna use yarn so CD view skills yarn serve alright alright so now we can go ahead to this localhost I already have one running so that's why it's at 8:08 one instead of eight zero eight zero yours will probably be eight zero eight zero so just go ahead and copy that and then you can open up a new browser window here did I really just copy eight localhost:8080 and it's all ready and set up alright so we're gonna continue on by learning about view components in the next section view components are the basic building blocks of your view app it's where you have three different things you have your templating you have your logic and you also have your styling so to show you more specifically what I'm talkin about let's go back to our code editor make sure you have our new project opened up and in the view skills folder and this is what you're going to see alright so all so most of our time will definitely be spent in this source folder right here and so the view command-line interface or CLI it generates all these files for us and we want to look at app dot view okay so there's three things happening here and really just to demonstrate what's happening I'm going to get rid you don't have to do this just of the stuff that was inside of these three elements here first we have the template this is where all of our HTML will reside and there's also other stuff that goes there like view directives and also view component wrappers and we'll get into that we also have this script section and this is where the logic of our app resides and then also this style section this is where the CSS is placed down here all right so it's obviously structured in a very simple and understandable way for you to use all right so let me back up real quickly here all right so let's talk about importing other components because if we go back and we look at the actual starter project we'll see we just have you know one block of HTML for this UI here well if we look real quickly in this side section right here we have this custom HTML element that doesn't exist in normal HTML but it's called hello world and we're also seeing this msg equals and then some value here what that actually is is that's importing another component which resides in this components folder called hello world I the way that works is first we reference the name of the component here as a custom element in the template section and then in a script section we see we can import hello world from and then the path to it alright and then we can also see I under components we have hello world that's referenced now let's look at hello world of dot view itself and by the way we notice that this is a pew and this is hello world dot view so the dot view extension denotes the fact that we are working with a I it's called a single file component alright so looking at this hello world dot view file here we could see it looks very similar to the structure of the app dot view because we can see we have a template section albeit there's a lot of it here and then we also have a script section with some logic and then also a style set the section so for our purposes we're going to be creating this this app that allows you to specify your skills so let's go ahead and rename this file first to better accommodate our needs so rename we're just going to call this skills all right so let's also here and the script section of the logic set your section rename this to skills right and the props we don't need anything in there that's short for properties we'll cover that in a little bit and then also let's adjust the entire template section we're gonna get rid of actually everything with exception to do the first div and the template and we're just gonna for now just say skills we're gonna save that and then we're gonna go back to our app dot view and we have to rename this from hello world to skills as well as the name of the file and then right here will say skills and then finally up here remember we have to reference the actual name so it is skills and we're not going to be passing along any data all right so just like that so also we don't need this logo so let's save and now it's gonna look quite different we simply have skills right there so that is the basic I you know a demonstration of what a component is and so again at the most basic level a component is consists of three different things like I mentioned our template our script or a logic of our component and the styles alright so in the next lesson we're gonna go ahead and take a look at template encase oh we're going to take a look at view templating and in the templates section again you're able to specify HTML view interpolation as well as view directives so let's go ahead give that a more specific look so let's open up source our components and our skills dot view file all right so the first thing we're going to cover is interpolation so the main the most basic form of view interpolation is called text interpolation and it's simply the process of displaying a string that's defined in your component logic somewhere right here all right so let's go ahead and define a property and we're gonna call it name so let's go ahead and get rid of this right here we're going to put in data and then we're going to open it up in squiggly braces we're going to return and this is where we can put our properties and you can think of them like variables so we're gonna say name and we put a colon and then the value course set row all right you can put whatever name of course that you want here all right so now to display this in the templates section up here we have to use what are called interpolation squiggly braces as I call them so or a lot of people call them mustaches you put two of them and we're going to put in the name of the property so this is simply name very dead simple stuff we save this then we'll see it says course set row hooray okay so let's also talk about then interpolation in HTML attributes for example if you have like an image source equals that would be an attribute this is an attribute here so one important thing to note is that you can't use these interpolation braces within view within attributes all right so to demonstrate how this actually works let's create a boolean property and set the disabled attribute of a button based on this property so let's go ahead and I'm going to put in just underneath here a button and we're going to say V on and then we'll say click now V on and we're going to get in more in-depth into what exactly V - all this stuff is is it's basically a directive right here and saying on click so when somebody clicks this button then we're going to call a custom method called change name all right we'll define that shortly and then we're also going to have another view directive called V bind and we'll say disabled so this is an attribute that's in normal button HTML we'll say BTN States so we don't do this that won't work we're just going to put in the actual property button state all right so then just give it some text here and then close out that button so then in the logic what we want to do is create that boolean value BTN state so we simply put right there a comma BTN state and we'll said it's true in other words disabled will equal true based on this value right here of true so it's going to be disabled so let's go ahead and save this and we'll open this up now we can't click it because it is disabled all right so that's how interpolation in attributes work so let's also talk about expressions in interpolation so right now we're just displaying a single name up here let's add one where we're going to demonstrate the fact that you can put in JavaScript expressions within these interpolation braces so for instance we can use a ternary operator which is like a conditional statement within our BTN state boolean so let's go ahead and add this so interpolation braces BTN state alright we're going to put in a question mark and this is basic JavaScript ternary operator it's basically an if-else so it's saying if button state is true then we'll say the button is disabled and then else when we use that with a comp or colon rather the button is active so let's go ahead and save that and now we'll see this message that's telling us the button is disabled because it currently is disabled so you can also utilize other AI JavaScript functions such as math I within this interpolation here so it handles a lot of just basic JavaScript and some things that you can't do but we're not gonna get all into that so now let's also talk about view directives so in view templating you will find yourself utilizing the various directives that exist just as we did right here all right so a view directive is a very is a view specific attribute that's prefixed by a V - as shown right here alright so each serve a different purpose and I just want to bring over the written version this tutorial just to show you how many exist we have you know it looks like there's roughly a 12 or so right here so we have V text HTML show if else else if they'll handle pretty much everything you're going to need in other words I'm not going to go into depth into all these but let's try giving for instance some you know one that you're probably going to use a lot which is v4 and this attribute allows you to iterate through a list like an array or an array of objects so first let's create an array of objects in the component logic so right here we're going to get rid of this name and button state stuff right here we're gonna go in to create an array of objects called skills alright so we open up the array brackets and we'll have an object here with a name or a skill property rather and we'll set it to view Jas that might be a person's skill set hopefully it'll be yours after this I'm gonna hit shift alt in the down arrow key to replicate that line and have an another one maybe front-end developer okay so now we have our array of objects property called skills alright so next in the template section let's go ahead and gut all this stuff right here all right we're going to put in a div class we're gonna call it holder and I'll be referencing that stuff in CSS shortly and so now we're gonna have an unordered list and by the way we're going to be keeping this HTML throughout the course so this is stuff that you need to do if you're going to follow along so we're gonna have a list item and this is where we're going to use the v4 directive so V - 4 equals and we're going to put in first the some parentheses that will say first the data and then we're going to need to put comma and in index to gain access to the actual index and then we're going to say in and then this is going to be the skills array of objects so also to get access to the key we put in colon key equals and when we're going to give it the key and a name of index that we can reference if we wish so now just to show that we're going to have access to the index we can put through interpolation index we'll put a period and then we'll put data dot and notice this is this data this name right here is coming from the fact that we gave this first parameter and a value of data and then what do we want to show we want to show skill we want to show the actual name so we're going to put skill right here alright so let's go ahead and close that list item alright so now let's go ahead and save this and if you did it correctly it's now going to show us right here view J s and that's I've the Ray index of zero and then one of front-end developer alright very simple stuff let's try one more though let's put a V if directive along with a V else for an if-else statement in the template so just underneath our unordered list and by the way we're not going to keep this I just wanted to demonstrate just for a little bit more of muscle memory with directives so we're gonna say I we're gonna have a paragraph a VF equals we'll say if the skills dot length and that's gonna copy how many skills right here they have obviously we know it's two if it's greater than or equal to one will say you have more than one skills I hope you do and then we'll say P V else we'll say you have less than or equal to one skill alright so we know what this is going to be if we save it we'll see you have more than one skills because there's two all right so if you wanted to try to remove that one of these you you get this obviously all right so and that's basically how view directives and templating as a whole work obviously on a very fundamental and basic level now we're gonna focus on CSS within view J s now view makes it very easy to handle your CSS and you can choose to write your CSS directly within the style portion of your component or you can write it within an external CSS file I'm especially if it's there's a lot of CSS and you want to try to keep organization there's also class in style binding that you can use within your template alright so we're gonna cover all this right now and the first thing I want to talk about is understanding what scoped means in view alright so basically this means that any CSS defined here if we have scoped added then it's only going to apply to the template HTML that's defined in this component here so to demonstrate you know how this works let's open up our app dot view and we can see that this right here this style does not have scope so let's go ahead and remove this rule set here let's put in body background color and we're going to say 6yz and that's a light gray color alright so if I save this and we open up our while we could say now that we have a light background like that if we add scoped to this however remember this dat hTML is defined in a different file and we save it we'll see it is now completely white all right so that's an important very simple concept to understand but when you're you know dealing with a larger app then it's important to understand you know when and where to use scoped so generally speaking when it comes to global CSS that you want to apply to everything you want to remove scoped all right okay so now let's talk about linking to an external style sheet or CSS file I within view so at the moment our CSS rule sets for our two components are confined within the actual component itself so we have our CSS here in this component same thing with our app dot view well i if you have a lot of CSS you may may make more sense to separate them into separate CSS files so to do that in the skills view file that we have here we're gonna make the following adjustment first ring it's going to get rid of everything in here and we're going to say source equals and then the location of the CSS file so we'll say in the same directory we'll have a skills CSS file so now let's save that let's create that skills CSS file and we're just going to put just some basic CSS right here and then we'll go ahead and save this so if we look at our project now we can see that if we go back here make sure this is saved there we go yeah I had to refresh that in order for it to work we can see now that this CSS is applying so that we know that the external stylesheet is working all right so we're not going to be using this method so I'm going to remove that source we're going to back up here just get rid of that and then also get rid of this right here okay so let's also talk about view class binding so both class and style binding and view use the V bind directive and we know what a directive is already from the previous section so this directive allows you to dynamically control when and if CSS classes and styles are applied along with the CSS properties and values so let's go ahead and adjust our template in our skills view file by the way I'm going to right click and delete that CSS all right so let's go ahead and adjust the template section up here so first I'm going to go ahead and get rid of this demonstration down here with a two paragraph tags and what I want to do is we're going to add a div and we're going to say V bind that's the V bind view attribute and what do we want to bind well the attribute will be class so we're covering class binding so V bine class equals just like it normally would in HTML just think you know if we did this that would look perfectly fine but because we want class binding we're gonna put V bind with a colon all right so V buying class equals now inside of here we put in just in single squiggly braces we're gonna put in alert show alert all right so what exactly is happening here okay well by the way before I get to that let me just close that div out okay so we're using the V bind our directive on the class attribute and then we're saying to insert the alert class right here as a value only if the boolean show alert property is true so let's go ahead and define that real quick so just after the skills property we're gonna put in show alert and we're gonna say true all right so then just to demonstrate how this works we need to add the actual alert class right down here in the Style section so I'm going to put in alert and then we give it our properties so we'll say a background color of yellow a width of a hundred percent and then also a high of 30 pixels just so we can see it so let's say this and now we can notice this I yellow you know rectangle essentially that recreated now if you want to show alert only if show alert is false then we could use the explanation point up here and save it and there we go we see it gets removed because this expression didn't evaluate all right to true so that's how you can do very simple class binding in view so you can use V bind class equals and we can attach this this class only if this certain expression values the true or not okay so we can also handle multiple class binding in view because there's maybe me there might be times when you want to add multiple classes so how would you do that all right well we can update this part just by putting in a comma after our show alert right there and then we'll say another class we're going to wrap this one in semicolon so we're gonna say another class that will be name of the CFS CSS class that we create and then we'll put in show class so of course we would simply define another I show class well actually I'll just do it I wasn't going to show you because it's so simple but I'll just do it anyway we'll put true and we'll say show class and we'll say border five pixels solid black alright so now if we save this it should have yep let's go ahead and back up right there there we go another class sorry I gave it the wrong name I gave it the name of the the boolean there we go and it works as expected all right so let's also talk about using V bind class right here this too directive of V bind with an object instead of all of this stuff I mean because you can imagine this will get pretty I you know pretty cluttered if you have a bunch of classes so there's a better approach to handling that scenario and so what we'll do is instead we're gonna take this and then we're just going to reference a property here called alert object all right so now we can create alert of object right here so we'll say alert object and then we created an object with the squiggly braces and we'll say alert is true and then you can add more eye properties down here or a boolean values if you wish and then we could just say we'll save it and we can see it still works now let's go ahead and talk about style binding all right so you still use the V bind directive except instead of specifying class equals it'll be style equals so let's go ahead and adjust the template for that so view style equals let's go ahead and get rid of that open it up in squiggly braces and we're going to need to say background color and it doesn't usually use the same type of property values of CSS in terms of naming its using camelcase here and we'll say bind this to a property called BG color we can also specify a width here BG with a height of BG height okay so now in the component logic what we can do is adjust this so that we have BG color we'll give it a property a CSS property value of yellow a BG width will say 100% and BG height will be 30 pixels all right so now if we go ahead and save we'll see that we have the same result essentially that we had before okay so now what we'll do is let's continue on by styling our actual project that we're going to be developing and working on so now obviously if you've been following along we've been working on this simple project it's called skills where people can add their skills and at this point it doesn't really have much of a user interface at all so let's change that by adding some roll sets to make it look better and keep on learning so we want to adjust the template section up here let's go ahead and get rid of this I do the following so for now I'm going to put in a paragraph down here we're going to say these are the skills that you possess all right and then also we don't need the index we don't need to show that so we'll just go to put data dust skill and that's that then in our Style section and this is where it'd be handy to see the written version of this tutorial you can just go ahead and just copy all this because I'm not going to sit there typing this out it's just standard CSS very basic stuff I'm just going to paste it right there so also let's also let me get this out let's also add some CSS based on the our app view file so I'm just going to take this copy it we'll go to our app view file and paste that so we're just importing a custom font here or a font called montserrat we have our body tag HTML again all simple stuff so if we go back to our project we will now see and actually looks a little bit better all right great ok so let's talk about handling user submitted data within view and that means dealing with forums and also form validation all right so let's go ahead real quickly and the first thing we'll talk about is the view v-model directive so when you need to capture user input you can use the v-model directive on form input in text areas which enables what's called two-way data-binding and that basically means you can communicate from the template to the logic and also from the logic to the template all right so to demonstrate this let's go ahead and our skills view j/s file that we've been working on and we're going to add real quickly a text input so input type equals text placeholder enter a skill you have and then we're going to use that v-model directive and we'll say equals skill all right so this right here is a property that we need to define a boolean more specifically right down here so what we'll do first is get rid of these three properties we don't need them anymore well I'd skill and oh by the way I thought it was gonna be a boolean it's not it's just an empty string and then also why we're in this file let's real quickly put in a rule set just to style up that input that we just added all right you can get this from the written version right here it's just basic CSS and also just underneath this I forgot let's put through interpolation skill so we can show the process of capturing user input so we're gonna display what the user is typing essentially so enter a skill you have here's the input so I'll just put in coding and there you go so this is demonstrating the fact that you know we're sending the user input to the actual the component logic section section and then also displaying it here in the template alright very simple so let's also talk about form submission and view so let's I go ahead and right now we obviously don't have an actual form so let's wrap this in a form so form and then we're going to say in order to capture that user input we're going to say sat submit and then we're going to put a period prevent to prevent the page from reloading and we're going to call once it's submitted a method called add skill all right so we're gonna create that just in a second all right so now this is the first time you've been experienced how to define actual methods in the component logic was simply put in here methods all right so what's the method and skill and then you just write out normal JavaScript like any of the time so we'll say once add skill is called we'll say this stuff skills dot push and we're going to add a new skill with the name of skill to this dot skill and that's all that it takes so it's also to clear out the text area and remember the value of the text area is bound to skill so we'll set this dot skill equals nothing very simple so now if we go ahead and save this and look at it let's say coder yeah so it works very easily as you can see so obviously let's talk about handling multiple user inputs because like I mentioned obviously unless you're building a chat app or something really simple like this you're probably gonna have multiple form fields so let's go ahead and just temporarily we're not going to leave this here but I just want to demonstrate it let's add a check box so a type of equals check box ID it goes checkbox and v-model is checked all right so we're using v-model and we have to now define something called checked this will be a boolean value so we'll go ahead and put in at the top checked and we'll say false all right then let's modify our add skill to demonstrate just real quickly through a console log that we have access to that check box of value so this check box value is and we'll put in distict all right so now if we save this refresh here we'll go ahead and say control shift I to get out that console will say coding and let's not check it so it'll say false all right coding again let's check at this time and it's true very very simple so we're not going to use that though so let's go ahead and just back up just a few times here's let's get rid of this let's get rid of this and then finally also let's get rid of this section right here so now let's talk about view form validation so there's several view form validation packages that you can install via NPM or yarn and a popular one is called V validate and you could find information about this plug-in here I'm not going to cover everything about it probably having it on a very large tutorial just on on what it offers but I'm gonna cover just the you know how to use it in a very basic sense especially in the context of our app alright so first in order to have access to it we're going to install it I so you can either go to the console here or you can go to view integrated terminal which is right there and we can say yarn add and then V - validate so let's do that real quickly and then next in order for it to work and I'm just going to you know get this out yeah we can close that right now it's done already we can hit control B we have to in order to be able to use it we have to go to our main J's file and then we're going to import at the top and it's going to be V validate from V validate and then also in order to use it we say right here view use V validate very simple okay so let's go ahead and save that and now we can actually use this validation plugin so to validate our input field right here we're going to add to it right here at the end we'll say V one second we're gonna say V validate equals and then we're gonna put a double quote and then single quote will say minimum or min will say five characters so the skill that they enter has to have at least five characters all right and then also will say name equals skill it needs to have a name in order for this to work properly all right so let's also show an error message if the validation is not acceptable so we'll go ahead and put a P class of alert and we'll say V if which is another view directive we'll show it only if the errors and this is a object that's produced from V validate itself we don't have to create it ourselves if the errors has one for skill then we're gonna show this interpolation errors dot first and then skill that's the name of the error that's going to show for this particular input all right so now we save this and we go ahead and put in just some initial type look the skill field must be at least five characters but if we get to five it goes away let's style that real quickly to make it a little bit better looking so I'm again I'm gonna copy this off-screen paste this down here again the class is alert just some basic CSS save it try that again there we go so the skill field must be at least five characters and then we get beyond it there we go now one of the problems here is the fact that even if we put in two characters hit enter it still submits it so you obviously don't want that so to fix that let's go back to our add skill section here in our methods and we're gonna wrap everything right after add skill is opened here and this dot validator validate all then we'll say result ok so inside of here will say if there's a result that means that all the validation is successful again you can find this information by the way at that V validate github URL and the documentation and then we'll say else console.log or you could show something in the template if you wish we're just gonna say not valid alright so we take this copy it and put that in the area where it is successful in terms of the validation all right so now if we try this we'll get up our console here and we start typing and try to hit enter it won't let it so well now and won't allow it and it says not valid so now we can do it alright awesome stuff you two offers you the ability to add animations within your user interface and this includes common elements such as enter and leave animations and also state transition so we're gonna take a look at this and also apply some animations to the project that we've been working on alright so the first thing we're going to do is talk about probably you know what the biggest use case for animations ours which is enter and leave animations alright so if these animations you know if done correctly they do add a nice touch to the UI instead of simply just instantly showing elements so to demonstrate this in our skills view file we're gonna modify the template and the part that we're going to focus on is the ID the error portion right here for a form validation that we worked on in the previous section so we're going to wrap this around or wrap a custom component wrapper as it's called in view called transition all right so transition and we're going to give it a name and we'll say alert now let's go ahead and close transition here alright so basically the important thing to note here I is we give it a name and this is alert in alright and this is going to serve as the prefix for some CSS animation classes that we Devine you know very shortly and so this transition wrapper here that we have it's going to apply animations in the following cases based on what's being wrapped within it and so that could be a something with a V if directive conditional rendering V show that's something we haven't covered but it's also a directive dynamic components and also component root nodes as they're called so in our case this p class right here this is using a V if directive and therefore it will work so in order to make this error message animate we have to create a CSS class for it in the Style section so remember alert in is the name we gave it so it's come down here to the bottom and we're going to say a class so a period alert in and then after we're going to say enter - active and so we'll give it a CSS animation property with a value of bounce - in 0.5 seconds and then also let's copy this and simply modify alert in this is going to be leave active so when it leaves we'll say the same thing except we're just gonna reverse it right here and then we're going to put in some keyframe animations I'm not going to cop type this all out instead I'm just going to copy and paste it from the written version and so we're referencing the bounce in animation name we reference to here and here and this is just a keyframe animation of zero percent we're gonna transform it we're gonna make it 0 in terms of scale so it's going to be nothing at 50 percent of this 5 second duration it's going to be one point five the original times the original size and then back down to one at 100 cent alright so we're going to go ahead and save this and we'll go ahead and look real quickly so now if we start typing just watch the animation taking place and there you go it may not appear very smooth in a video because of the framerate but it does appear real smooth if you actually use it and by the way notice when we get rid of the value and when it leaves it also animates - awesome awesome awesome now the transition classes that you have at your disposal outside of just interactive and leave active are also enter enter to leave and leave to outside of Interactive and leave active you can always you know do your research if you need to learn more about those for your use cases but this is a crash course so I'm just covering the basic stuff alright so let's also talk about using an anime animation library instead of having to define your own animations which you may find tiresome or bad at so in this case we can use a third-party animation library such as animate dot CSS and this is a popular one right here you can just experiment with what these are and it will adjust the logo here based on what you want so in order to access that let's go ahead real quickly we're going to modify our template up here and RIT where says our transition name equals alert let's add enter - active - class equals and then the class is associated with our third-party animation library so animated flip in X that's one of the options from that animate animation library and then also leave active class and we'll say that is equal to animated again and flip out X there all right so now in order for this work we have to actually import or have access to that animation library and in this case we can just very simply in the Style section add it as an import right here alright so we'll save this and now type it and there goes it kind of does this little flipping and it overrides anything that you have that's custom awesome okay let's also talk about animating lists so in our project we have this list this unordered list right here that iterates through this array with the help of the v4 directive now we can animate this list with the help of transition group and it's very simple so all we have to do is in our unordered list section we're gonna wrap this custom component wrapper called transition group and we're gonna give it a name of list and we're going to add in the same thing that we had here to apply animations to it so I'm going to copy this I'm gonna paste it right here except I don't want to use the same type of animation we're gonna use one called bounce in up and then the second one will be called bounce out down so right here bounced out down alright and then let's close that and we'll close this transition group oops this would be like this all right right so now let's go ahead and save it and we'll watch the magic happen so we'll just say coder enter there you go fun stuff now in a little bit we will add a little delete things and that way we can see the opposite effect take place maybe you can do try doing it yourself if you wish right now alright so for the final section of this crash course we're gonna talk about a very important topic which is routing so view 2 offers a view router which is their own own very simple routing library that we're going to use to demonstrate how to I switch between two different components in the view and also access I queries and URL parameters all right so let's go ahead and back in our project the very thing first thing we have to do is go to our console or the integrated terminal I'll just die yeah go to the integrated terminal right here and we're going to real quickly let me drag this up I wish I could increase this size but we'll go ahead and add a yarn add in a view router now you wouldn't have to do this normally if when you started the project with the view CLI you chose the manual option and then just check the ticked off or checked off the the view router option but because we didn't do that we're gonna set it up manually and don't worry it's not that hard alright so once that's installed we're going to create a source router file so inside a source will create router ojs alright and we're going to paste this and this is all in the written version of this part so we're importing view router skills and about so this skills dot view we already have it about W does not work but the rest of this is basically what the CLI generates for the router right here for the rest of this file so we can see that we have we're exporting our new router called in here is just an array of objects we have a path name and in component associated so this will be the path in the URL in order to access the view or the component the view that's associated with the component right here okay so now let's go ahead and create that about component view file right here so let's do that about that view and this will just have a template section for now so just as this is an about page and then it has a paragraph of lorem ipsum text not a big deal let's also go back here and save this and also let's visit our main j/s file because we're not done with this setup yet and we have to import the actual router and then we also have to specify router and then a comma right there and we're good to go alright so now let's go ahead and visit our app dot view file and we're going to make an adjustment to the template section alright so right now we're just showing skills but we don't want to do that instead we're going to create a navigation so a nav inside of here we'll have a router - link Emeril say - and think of this as href this is just to the the route or the home and then we'll also copy this real quick and then this one would be for slash about and about all right next in this next part is very important wherever you want the router components to display the templates or the templates you put in router - view just like that very simple all right so I while we're here in app view we're going to style our nav a little bit and also change up a property so I'm sick of a copy just to role sets all right and then also there's a couple I didn't want to center it vertically anymore so all I'm doing is removing aligned items and this is CSS grid stuff by the way just relatively new and then I'm gonna put just padding - top 50 pixels alright so let's go ahead and save this and we will now see that we have our home and about if we click about we'll see about in the URL board our board in the URL section and then also click home there we go alright so that's how you set up very basic routing so you may in the future obviously want to pass and read router parameters up here so to do that let's say for instance you know the about we're passing for some reason some type of URL parameter that denotes a person's name it doesn't make sense in the context of the app but let me just show you how it's done so let's go back to our router JS file and right here for path of about we're gonna put a forward slash a colon and name so this name could be anything like XYZ that's the name that you're going to use to grab the value in that URL perimeter so we'll say name save that and then we're going to need to visit our about view file and we're going to say hello and through interpolation we'll say their name that property doesn't yet exist we're going to do find it momentarily alright and then we're gonna add a script section to our component and we have all the same stuff that's usual in fact I'm just gonna copy some of this stuff right here in fact I'll copy the whole thing just to make my life a little bit easier all right so we don't need any method so I'm getting rid of this we'll keep data we're going to return just one property and so that's going to be right here we'll say there a name and it's simply going to be this dot route params for parameters and then the name that we gave it in router J s all right so let's go ahead and save and now we go back if I put in Gary hello Gary Joe there we go very very simple all right great so that's it for you know the the bulk of this course basically in especially for just handling basic router stuff I did has a final bonus and to finish off this crash course I wanted to add a little delete option here just so it can be a little bit more dynamic all right so what we'll do is in our source component skills file we're going to add in I just in our list item section right here just after our data dot skill we're gonna add in an eye class of fa4 font awesome we're gonna include fun awesome and this is going to be - circle my voice is about to go out I actually have bronchitis and I recorded all this in one take so V on is a directive on what click so when somebody clicks this we're gonna call a method we're going to pass in the index and tell it which one to remove and /i oh and then under methods we're gonna add one called remove and we're going to pass an eID and we'll say this does skills dot splice and then the ID and then one and that will remove it for us so next let's add in font awesome so we're going to import just as we did with the animate so this is the URL to the animation or the font awesome library rather then we'll go ahead and we save this oh and by the way I believe we're gonna have to add some styling to that but yeah right click that let me style that real quickly this isn't actually contained in the written version but I think I can you know get over get get away with doing it myself just I as a selector float:right should be all we have to do there we go alright so now let's add something real quick alright let's get rid of them great you could also change I real quickly cursor:pointer just so it gives us that signifier BAM and there we go all right guys hopefully you learned a lot throughout this crash course I know you know I didn't want to cover too much all at once otherwise you would get bogged down with way too much information but hopefully this gave you a really strong starting point from which you can begin to further develop more intermediate to advanced topics within view j/s so make sure you check out course tetra comm I know at this point I don't have any up yet but you may be watching this a week or two or a couple months down the road when I have a lot more content based on view which is what my plan is so check out the courses the very cheap paid courses where I show you how to build full actual apps people might want to use and you will probably find some new content there for view j/s alright so i'm gary simon make sure you check how my voice is going corsets are calm make sure to subscribe here i on youtube if you're watching on youtube and i'll talk to you later goodbye

Channel: DesignCourse

Views: 311,182

Rating: 4.9228897 out of 5

Keywords: vue tutorial, vuejs tutorial, vue 2 tutorial, vuejs 2 tutorial, vue tutorial 2018, vue 2018, vuejs 2018, vue course, tutorial, course, vue.js tutorial, vue.js tutorial 2018, vuejs 2018 tutorial, vuejs tutorial 2018, learn vue, learn vue js, learn vuejs, learn vue 2, learn vue js 2

Id: 78tNYZUS-ps

Length: 65min 12sec (3912 seconds)

Published: Tue Feb 13 2018