Vue.js 2.0 In 60 Minutes

hey what's going on guys welcome to another crash course today's course is going to be on view j/s now I've had a lot of requests to do a video on view especially in my react.js videos a lot of you guys mentioned it I also just completed an edge wanax course on view j/s so you may want to check that out as well so before I begin I just want to mention my website traversing mediacom it's actually not up yet it should be live within a week or so and it's going to include all the recent YouTube courses and videos and maybe some extras it's also going to include all of my in-depth premium courses by edge' wanax alright these free ones are a great start but I'd suggest going more in-depth with some of those courses some of them feature up to 12 different applications from scratch for something like 27 bucks so it's well worth it travesty media will also include all the course code for all the videos as well as some coupons deals and some other stuff so check that out if you get a chance one more thing before we start there's a number of ways that you guys can help out the channel and keep these free courses and videos coming as I mentioned premium courses are a great way to learn all types of technologies and also help us out at the same time you could donate a few bucks even $1.00 anything is appreciated and if you don't have any extra money to spend that's absolutely fine just subscribe to the channel leave some likes comments whatever you can do is fine alright so let's get started so what is view jas it's defined as a progressive JavaScript framework that focuses on building user interfaces and it's important to know that view works exclusively in the view layer of the application so anything to do with the user interface it doesn't care about the model or database or anything else at least on its own it was designed from the ground up to be incrementally adoptable and this makes it very easy to integrate into existing projects and libraries but at the same time it's powerful enough to create advanced single page applications or spas and these are application that dynamic the dynamically update the page as the user reacts to the app alright there's also a view router that can be used which we'll get into a little later so how does view match up to some of the other many many j/s technologies out there I know that the amount of them can be very overwhelming and I've actually had many comments on my channels that asked me how do I keep up with all of these different frameworks and libraries extensions and so on this by no means is an extensive comparison our pros and cons I just want to show you some of the technologies that view is often compared to so react j/s is very close to view they both work in the UI only on the view layer they're both they both use a virtual Dom which is basically a slimmed-down dynamic version of the document object model and it updates certain parts depending on different actions within the app all right so they're both very reactive they're both component based they both have external libraries for routing view is a little bit easier to use than react but I think react is a bit more powerful if I had to pick one I'd probably say react but that's just my opinion and probably because I have a lot more experience with react angular 2 is another framework that view gets compared to but angular 2 is is kind of a different animal altogether it's not a UI library or framework it's a complete framework and it offers a lot more it's made up of many different packages and modules and this makes angular a lot harder to learn but obviously more powerful view however does score higher in some benchmarks when it comes to performance but it's also because it's a lot more lightweight Ember is another more in-depth framework and it would make more sense to compare view to just the template in the object layers of ember view does provide more reactivity but ember is also older so that's kind of to be expected let's see knockout Jas is another library and it's based on the mvvm design pattern our model view viewmodel view j/s isn't classified as mvvm but it does work in a similar way NACO does have superior browser support than view and most frameworks it actually works well with ie6 which is kind of amazing knock-out does lack a full set of lifecycle hooks though and it is much older than view the last two which are polymer and riot i've never used these so i can't really say too much about it I do know that polymer was a source of inspiration for view Jas and riot has a similar component based model all right so what does view Jas do what does it offer it allows us to build reactive interfaces so if we click a button or type some text some other part of the application or the component can react to it declarative rendering which allows us to use dynamic variables we can bind data including two-way data-binding from input elements much like angular 2 if you have experience with that it also provides a large set of directives okay and angular 2 is famous for using custom directives which do a lot of different things which will go over template logic ok so we can have if statements we can have for loops right in our templates components and nesting components are obviously good for organizing your application event handling there's something called computed properties so if one thing changes we can have something else compute some other custom function CSS transitions and animations and I apologize that's spelled wrong and also custom filters so we can create filters that we can add to variables inside our templates alright so installing and using view J s there's a number of ways to do it you could just include it right in a script tag you can use the CDN and you can just go ahead and use it but that's not really recommended for production you can also install it using NPM no package manager' the way that i would suggest using view and what we're going to do is to use the view CLI tool which is a command-line interface that implements web pack and it pretty much does everything for us it comes with a dev server is a simple command to build out our app for production so we're going to look into that could also install it with Bower which is a client-side package manager but that's pretty similar to just including it in a script tag it's just included on the client alright so those are some of the different ways so the view CLI tool this is basically the commands to get going so first thing you want to install it globally so NPM obviously you need nodejs and NPM install - g4 global and then view CLI and then to create a project you just have to do view init web pack because you want to use the web pack more excuse me web pack template and then whatever the name of your app alright then we CD into that folder and run npm install which will install the rest of the dependencies and then we can simply run the dev server with npm run dev and then once you're ready to build for production you can just do npm run build and that will create a dist folder with your application alright so pretty easy workflow here's a very simple example rendering the data to the dom and using interpolation so we have a div with the ID of app and by the way we're going to jump into code and I'm going to show you all this I just want to give you some very very simple examples of what's to come alright so we have a div with the idea of app and in here we're using interpolation which is basically a dynamic variable so we're using this msg with the double curly brace all right over here is where we have our view instance we create a variable in this case app and we set it's a new view and then inside there we we can include an element that we want to attach it to in this case it's the ID of app and then we have this data where we can put different values so msg we set to the string of hello world so right here would output world alright and it's as simple as that so directives are special attributes with the V - prefix that does something to the Dom okay they're all different reactively apply side-effects to the Dom when the value of its expression changes and this is the format we have our element could be any kind of HTML element and then V - and whatever that directive ID alright that can take in arguments expressions and filters so here's some simple directive examples this is an example of this basic instant interpolation without a directive and we just saw that we're just including the msg variable we could do the same thing here by using the v-tex directive which basically would just output whatever's in that msg vh tml would parse HTML tags for us if we were just to use v text it would actually output the HTML tags themselves which you probably wouldn't want so you would use v HTML and then the V once directive is one time interpolation meaning that it's only going to output it once if it changes it's not going to change in this particular instance we can also have conditionals and loops so over here we have our data and we have this show value set to true and then we have users which is an array of user objects so over here we're saying in our paragraph tag we're using the V if directive we're saying if show so you can see it's true then this will be shown we can also have else so V else this is not so if I set this value to false then this would show because it's false alright right here we also have V Show which you can use similar to V if so this will be shown if true if show is true and then down here where we have a V for directive which basically is a for loop it's going to loop through these users and we want to help with the user name and we're going to get more in-depth into this stuff these are just very simple examples now we can also find dynamic values two attributes so in this case we're binding back to the class attribute and we're actually saying that if this right here is active true then we want to apply a class called active alright if we set this to false this class won't be applied in this case here we're binding to the style so we say active color red over here and that's going to bind it to the color style which will be red okay so when you have a bigger application you want to be breaking things up into components to create a component you can use view dot component name it and then you can apply different things to it such as a template this should actually be a lowercase T in this case the template is just a string that says this is my component and then to insert it we can just put it in this format here alright components provide organization and encapsulation they're reusable and they can be separated into their own separate view files if needed so some additional tools and plugins to use with view there's the view router which I'll give you an example of this is the official router deeply integrated with the view Jas core we also have view resource which is used for handling HTTP requests view async data which takes care of asynchronous data loading view validator which is a form validation plug-in view dev tools which is a extension for Chrome much like the react extension or the angular extension and then view touch which handles gestures using hammer j/s which i've never actually used but it is available alright so that's it for the slides let's go ahead and jump in and take a look at some code alright guys so we're going to go ahead and jump in and install the view CLI and generate an application so before we get started you need to have no js' installed if you don't just go to node.js org go ahead and download it install it really easy to get set up I already have it installed so I'm not going to go through that alright now if we go to view Jas org and we click on get started and let's see click on this installation right here it gives us the different ways we can install it we could just use the CDN and include the script but I want to do things a little more professional and I guess realistic so if you were creating an application you probably want to use the view CLI alright which is a really incredible tool for creating it for developing with the dev server as well as building it building it out with just a simple command alright so we're going to go ahead and install it okay right here NPM install global view CLI so I'm going to open up a command line ok or open your terminal whatever you're using on whatever system you're using and I'm going to go into let's see my projects folder and this is where we're going to generate the app but let's go ahead and install the view CLI tool so npm install and add the g flag or you could do - - global and then view - CLI alright and i already have it installed so mine may be a little quicker all right so now that that's all set we're going to generate an application by saying view and knit and then webpack and then the name of the app which I'm just going to call let's see just view app I guess all right so that'll generate an app it's going to ask us a couple questions okay so the project name view app that's fine description I will just say simple I'll just keep the default of UJS project author that's fine enter and then it's going to ask if we want to use es lint I'm not going to use that so I'm going to say no same thing with karma and Moka that's more advanced for testing and stuff end-to-end tests no all right so now it should be set up so we're going to CD into view app alright and we want to run npm install okay that'll install the dependencies that we need now as far as dependencies it's installing web pack some web pack plug-ins babel so that it can we can use es2015 and installs the presets a whole bunch of stuff alright so now let's go ahead and add that to our editor I'm using Adam which is completely free if you want to check that out or of course you can use whatever you want I'm going to add that project to the folder so let's see one of my n projects and then view app all right so if we look at package Jason you can see it installed web pack web pack dev middleware babel and a whole bunch of plugins alright just a bunch of stuff that's going to help us build out and and test and produce our application alright so now that that's done we can run our app so we can run the dev server by saying raha npm run dev and i think i'm going to get an error because it runs it starts it on port eighty eighty by default and yeah and that's being used on my machine you probably won't get this unless you are using that port so if you do get this issue and you want to change the port we can go to build and then dev server J s and this right here this port variable I'm just going to set this to port 8000 and save it alright so then we'll go ahead and try to run that again and that should open up on port 8000 all right so this is kind of the the boilerplate sample application that they give you not much just a logo with some text all right so let's go ahead and open up the source the SRC folder that's where all the stuff that we want is and basically we have a main dot j/s file this is where we import view and we import our main app component alright this is where the view instances we're saying new view and the element that we're attaching it to is an element with the ID of app the template is the app component that we're bringing in and we also want to list the app component here alright now if we look at the app component it actually has a dot view extension and it uses a template okay so we wrap this in template tags down here is where the Java Script goes basically we're importing another component called hello and we're exporting our default object with the name of the component which is app and then we want to include any sub components we're using such as this hello one that we're importing we want to put that in here as well and then we just have some styling down here alright so if we look at the template we have a div with the idea of app and we have this image that we're bringing in which is this view logo and then the Hello component okay so let's take a look at the Hello component okay so in the template we have all of this which is all this right here okay that's what we're seeing right and same thing we have to export it and we're giving it a name of hello and we also have some data okay now when we're working with components the data has to be a function that returns an object with our values in this case we have this msg which is welcome to your view app and then that's going up here okay we're using that interpolation and putting it in the h1 tag all right and then we have some styling down here since we add the scoped to the style that means that it's only for this component now I just want to do basically just some examples and some testing so I'm going to get rid of this Hello component and we're going to create our own all right so let's go ahead and just delete this okay and then inside app dot view we're going to just remove this hello where we bring in that hello and also this and then get rid of the Hello component tags up here all right so if we go ahead and save that it should auto reload and we want to open up our console down here make sure nothing's wrong all right we can also get rid of the logo all right so to create a new component let's go ahead and create a new file in the components folder and let's see we'll just call this let's call it test dot view okay now in here we want to have our template okay and let's create a div and give it a class of tests and for now let's just put an h1 in here and we'll say test all right then down here we want to open up our script and we want to say export the fault and let's give this a name of test and yeah we'll just do that for now and we'll have some style tags down here and let's add scoped okay and we'll go ahead and save that and now we need to bring that into our main app component so let's go right here and say import let's say we want to import test from and it's going to be dot slash components slash test okay so that will bring it in and then we have to add it down here in order to use it and then let's put it right in here okay so we'll go ahead and save that and now we get tests okay now we're going to be working in this test component so what we can do is let's replace this hard disk text here with let's say title okay and then down here we can say put a comma there say data and then we just want to return and in here it's a title and we'll say hello world so if we go ahead and save that we now get hello world and of course we can put whatever we want down here we could do in object so let's say if we want user and I'll set let's set first name to John and last name to Joe now I want to I want this my atom editor to look at this not as a plain text file but as an HTML file all right now because we're using script tags and on alright so we have this user with the first name and last name if we want to we could go ahead up here and we could say user dot first name which I like that camelcase better okay save that we get John now we can also use the v-tex directive if we want so what's for instance I'll take this P tag and let's add V dash text and set that to user dot first-name save that and we get John again okay so these are both outputting John now if we have some HTML let's for this hello world we'll put an h1 here and let's save that now we're using actually you know what I want to get rid of this so if I save that you'll see that the H ones are actually showing up okay if I wanted to parse this what I would have to do is you know we'll do is we'll say span and let's do V dash HTML equals title alright and you probably wouldn't want to do this you'd want to actually just include the value and then wrap it in tags up here but just to show you this is this does work okay if you want to actually parse HTML that's in these values all right I'm just going to actually undo that so how we had it all right so next thing I want to look at is conditionals okay so let's put comma right here and let's say active and we'll set that to true all right so if let's go up here actually know what we'll call it show name okay so we have this show name and set to true and what we'll do is let's get rid of that and wrap this not wrap it but inside the P here we're going to say V - if equals show name so we save that and we get John but if I were to go and set this to false and save it it doesn't show all right but at the same time we can do V else so V else show name and let's say I don't know we'll just say nobody save that and we get nobody and we could also remove this altogether and just do VLC and that should also work okay if I change this back to true save it we get John alright so now let's take a look at v4 and loops so let's create down here let's see we'll say items and let's set that to an array so have title stay item one this one will be item two and I apologize I have a bit of a cold so I apologize if I sound a little funny in item three okay so we have this array of item objects and if we want to loop through these up here let's put in a ul and in here we'll put an li and we want to add here directive v4 and we can say item in items and then here we'll say item dot title save that and now we have a list with our items now we can do input binding as well much like angular 2 does or and angular 1 so let's say we want to put an input up here at the top give it a type of text and then we can add a directive called v-model which works like ng-model and angular and let's say title okay so and put a line break we'll save that and you can see it says hello world and if I change this you can see that whatever is bound to this title is also going to change okay which is really cool and really easy so now let's look at events all right so I'm going to go down here and create a button now when you work with events there's a directive called Veon okay so we want to say V on and then whatever the event let's say click OK and let's set this to say greet let's say greeting all right so save that and now we have a button and it's saying property or method greet is not defined so we need to go down here we're going to go after where the data is and put a comma and then let's say methods and we called it greet actually will go like this greet function and let's do alert will say hello okay so we'll save that and click that and we get hello all right we can also pass along parameters so if we want we can say hello world and then down here we'll add greeting and we'll say alert greeting so now if we go say greeting we get hello world so let's create another our text input I want to add some events to a text input we'll give it a type text and let's say V dash on and let's say Key up and we'll set it to press key okay and then down here and our methods put a comma right here and let's say press key and let's do console dot log pressed alright so I go over here and I start to type and you see we get pressed I just want to put a line break right here okay now if we want to get what we're typing into here we can do that let's say we want to pass along an event right here and then we'll just console.log e dot target dot value all right and if you're familiar with angular 2 or react and you've seen some of those videos that I have this works pretty similar alright so if I start to type you can see that it captures whatever is in there alright now we can also test for certain keys so we in a lot of cases you want you know if someone if they click enter while they're in there you want it to behave differently so if we say V dash on can say key up let's see key up and set that to reset so that's our dot submit not dot something dot enter and then we'll set that to enter hit and then down here we'll create a function called int or hit a little console dot log and I'll say you hit enter all right so now let that reload and start to type and then when I hit enter you'll see you hit enter okay and you can do this with different keys there shift-tab all the main keys you can use as well alright now the next thing I want to look at is calm computed properties okay so we can use this to basically watch certain things and have them update accordingly so for instance we have this input for or is it for the username well we don't have it so let's create an input or the first name and the last name all right so I'm going to put just put an HR here I'm sorry if this is messy I'm just trying to cover just all the basics I know it's not really a functioning application but you know I just want to give you good examples so let's say we have an input actually we'll put a label and I'll say first name and then an input and we'll give that a type of text and let's set the v-model and we'll set that to user dot first name and then let's put a line break and then I'm just going to copy that line and then this is going to be for the last name okay so we'll save that and you can see we have John Doe now let's say that I want to have something for I want the full name I want a property for the full name that will actually take both of these and add them together but it will also update when I update one of these so to set computed methods we need to go down here let's go underneath this methods and we're going to say computed okay and let's say full name we're going to set that full name to function and what I want to do here is return this dot first name and then we'll concatenate a space and then we'll add on to that this dot last name okay and then up here let's put an h3 and inside here we'll say full name okay so if we save that let's see property or method full name is not is not defied on instance but referenced alright so oh you know what I know that the problem is two things one this n right here should be uppercase to match this and also since it's in the first name and last name are inside a user object we need to say this dot user dot phone first name and last name alright so let's go ahead and save that and now you can see we get this John Doe this is coming from full name but if I were to edit this first name and say Jane it also updates the full name okay so hopefully change first name or last name it edits the full name so that is computed properties all right so now what I want to do is talk about component properties okay now if we look in our app dot view we have this our test component now we can make it so that we can add properties for instance say title equals something all right now to prepare our component to be able to do that let's go ahead down here and let's see let's go under name and we're going to say props then make sure you put a comma here and let's have a property called actually still property called message all right now you can define a default for for the properties we say default and let's set that to we'll just set it to fubar and you also want to define a type okay so in this case this is going to be a string you can define it to a number string a function object whatever you'd like all right and then let's go ahead and put this up here in say an h2 say msg save it and we get fubar now since it's a property we should be able to add it right here we say msg equals just say hello save that and now it's hello okay so we can now pass in properties to this component all right so now that we've gone over most of the basics of UJS I want to do something a little more useful than this because right now we just have this testing component where we just have a bunch of just different functionality mushed together it doesn't really do anything so what I want to do is just create very simple input form we can add users ok we'll add users to a list and we'll be able to update the status of the user with a checkbox and also be able to delete the user so I'm going to create a new component for this so in components let's say new file and we'll call this users dot view ok and let's see let's just copy what we have in test paste that in and I'm just going to get rid of everything that's in the div inside the template ok we'll change this to users and then down here we'll change this name to users we're going to get rid of the props okay for the data we're going to clear everything out of this return and clear out all the methods and get rid of this whole computed thing ok and we'll save that now let's go to app dot view and we'll pass in here users which we need to import just like we did with tests ok and I'm going to get rid of this instance this test tag right here and let's put in users all right so save that and now let's go back to our users component and just say put an h1 save that and now we have our users component alright and our test component is still available we could go ahead and put that in right here if we want it's all encapsulated in there ok so I'm just going to not going to use that for now though so what we're going to do is in the data we're going to set users to an array okay and let's see we'll have a name I'm not going to do a first name and a last name just a name and let's see I just want a a true/false value here let's say registered I guess so registered and set that set these two unregistered no you know what let's do contacted okay so let's say it's a it's a list of users that we want to contact and we want to be able to mark them off if they're contacted or not let's give them an email okay I'm kind of just winging this as I go along so we'll have three whoops three users here say Steve Smith and let's do I don't know say um Tom white okay so we have these users let's print them out with v4 so we'll say ul do an Li with a v4 directive and that's going to be user in users and then let's put out the user dot name and user dot email alright and I'm just going to set this to an HTML file okay so we want to have an input as well type equals text and let's set set the model there's a few different ways we could do this but I'm just going to set V model to new user dot name all right and then C will give it a placeholder I'll just say enter name okay let's put a line break and copy that and then this will be the email oops that's not that's not right okay so this will be new user dot email and then let's put a submit button all right so save that adduser is not defined so let's go ahead down here we'll go after the data actually already have the methods right here so we'll say add user okay let's just do console log and okay now it's saying property a method new user is not defined on the instance it's talking about this here so what we'll do is set in the data let's just set new user to an empty object and save it okay so now we have our form and if we were to submit this we get add now see how it flashes like that that's because it's actually submitting the form which we don't want so we just want to pass along II write here and then we're going to say e dot prevent default okay so now if we submit now it just stays with ad all right so what we need to do is just push that new user to our users so we can do that pretty easily we're just going to say this dot users dot push and in here let's pass in an object with the name we'll set to this dot new username and then email which will be this dot new user dot email all right and that should do it oh yeah we need contacted as well which will always be set to false at first so contacted false all right so now if we were to say Kevin let's say Kevin Williams and submit there he is Kevin Williams all right now if we reload obviously that going to go away because we're not persisting we're just working in the user interface now let's say we want a checkbox to mark off if the users been contacted so what we can do is go back up here and where we have our list let's put right here and input I'm going to give it a type of checkbox and give it a class toggle and let's give it a V model of user dot contacted okay and then what we want to do is let's see we're going to wrap this in a span what I want to happen is if we mark it complete contacted I want to strike through to go through the text all right so let's do span and we're going to say : class we're going to bind to this contacted contacted and set that to user dot contacted so basically what we're saying here is that if it's the user is contacted then we want to give it a class of contacted okay so let's save that all right now in order for us to tell if it's actually being marked as contacted we're going to add a line through for that class so let's go down here and say dot contacted and set text decoration to line through okay and there we go so now it's when I mark them off they get a line through now if we were persisting to a database we would have to add some functionality for it to actually go to the database as well and mark that off is true but again this is just the user interface so last thing we'll do here is delete we want to be able to delete the user so let's go right here and put a button and Savion click and we'll set that to delete user and let's just put an X okay so that gives us a little button there now we have to create that delete user down here I'll go right here and say delete user okay and let's see we're going to need to just kind of to splice it out so we're going to say this dot users dot splice and let's pass in this dot users dot index of and that's going to actually take in a user parameter and then we just want to delete one so we have to actually pass that in as a parameter so up here delete user will pass in see passing user okay that should work let's save it and click X and you can see it deletes the user all right good so we can now read our users we can delete them we can update the status contacted and we can add them all right so there's two more things that I want to get to and that's the view router and the view resource okay now these are external to the core view j/s system so we're going to have to install those so we're going to start off with the view resource we're going to control-c to stop this and then we're going to do npm install view - resource - - save alright now let's just do our run dev again okay and what we're going to do is go into main J s and we're going to have to bring that in so right up here we'll say import view resource from you - resource alright now in order to use it we have to run it through the view use middleware so view dot use and then we just want to pass in here view resource okay that's all we have to do in this file let's save it and then we're going to go back to users and the api that i want to work with is i forget the exact domain name jason place holder this right here jason placeholder type eco calm and if you look at right here we can make a request to this URL and we can get these users alright so what i want to do is let's see we're going to go down here now UJS has a set of lifecycle hooks where you can kind of plug into certain points in the rendering of the component so we're going to use one called created so we want to go underneath the methods not inside of it but right underneath and we're going to stay created and this should run automatically so just to test it out let's say console.log created ran alright so if we save that and we go back and look in the console you'll see created ran so this is where we want to make our request so since we enabled you resource we should be able to say this dot money sign HD excuse me HTTP GET which works pretty much exactly like the angular 2 HTTP module alright so we're going to pass in the URL which is this and it's going to return a promise so we're going to say dot then okay and then we want to pass in here function that's going to give us a response and let's just do console dot log response all right so we'll go back and now you can see we're getting a response actually let's do response dot data and there we go so we're getting all those users now what we want to do is put that into this users array so we're going to clear all this out just make this an empty array to start to begin with and then down here we'll say this dot user is equals that response that's coming in so let's save it and there we go okay so we get all those users and we can delete them they're not going to delete from their server obviously it's just from the interface but we can still add them all right so that's how you use view resource now the last thing we're going to look at is view router so let's go ahead and stop this again ctrl C and we're going to say NPM install view - router - - safe okay and then let's run our server again all right now we're going to do this in main j/s and what we're going to do is we're going to kind of bypass the the main app component all together we'll create a router then we'll be able to go - we'll set our users for the home page and then we'll set a test route slash test to go to the test component alright so let's see we're going to want to bring this in so import few actually let's do view router from vu router and again we're going to have to add this I'm going to do view dot use and save you - our view router alright and then what we'll do is set here Const set a variable called router set it to new view router and here we're going to pass in the mode now I want this to just I want to be able to just go to our URL and slash test or about or whatever it may be so to be able to do that we want the mode to be history alright and then we're going to set the base to be on the double underscore their name and then we can create our routes okay which is an array can't type today all right now these are going to be it's going to be an array of objects which will have a path so let's say slash for the home page and we'll say component we want to be not home users okay so we want users for the home the home page and then we'll say path and say slash test and we want that to be the test component so it's a test now in order to use these you have to import them just like we did with the app component which we're not going to be using so important and that's going to be in component slash users and we're going to do the same thing for the test component so let's a test test okay so now that should work and then down here we're going to change this up a little bit we're going to pass in router we're not going to use this L right here we're going to get rid of that and then for the template we're not going to use the app component okay we can get rid of that what we're going to do here is put in a div with the ID of app okay and I'm going to change these quotes to back ticks so that we can use multiple lines just like that so now we can put this on a separate line okay and then here let's put our UL this will be our navigation and now to create our links we want to use this router - link and then we have this - attribute so router link - and we'll set that to slash say users and then we'll close that up okay let's copy that apologize for that banging that's my son running around upstairs and then this one here is going to be to test change that to test all right and then we need a place for this for our content to output so that's what we put right here this router - view okay so router view just like that and then finally we just want to add down to here dot money sign mount and then pass in the ID of app all right so let's go ahead and save that and let's look at the console all right let's see view router is not defined oh you know what this let's see this should be uppercase right here like that all right so save that and now you can see we have our users component and if I click test that shows our test component okay it's a messy looking app but that's not the point the point is that we go over all the basics and fundamentals of UJS and we've done that we do have a warning telling us about case because we have our upper case file names but that's fine I'm just gonna leave that so hopefully this helped you guys out I know it was kind of meshed together and it was really quick but we did cover a lot so please hit that subscribe button and hit that like button if you can look into the course maybe purchase there the full course I go into everything we went in through here but in much more detail along with other some other stuff as well so you may want to check that out so thanks for watching and I will see you next time

Channel: Traversy Media

Views: 634,184

Rating: 4.9221253 out of 5

Keywords: vue.js, vue, vuejs, vue js, vue-cli, vue-router, vue 2.0, vue.js 2.0

Id: z6hQqgvGI4Y

Length: 61min 46sec (3706 seconds)

Published: Sun Dec 04 2016

Reddit Comments

[u/Mobscene]

Big fan of Brad Traversy. His channel has loads of great content on a plethora of topics. He has a great way of clearly and calmly explaining different topics, definitely worth subscribing

[u/drewsmiff]

If you put it on 2x it's Vue in 30 minutes

[u/allkill]

Serious question, which one should I choose between vue or react?

[u/Xyles]

Great video ! A really quick crash course for me to understand Vue. I am also currently looking for more resources to learn more, does anyone have a recommendation ? I've looked through the guide on their website. But would like to learn more stuffs.

[u/BPagoaga]

Does someone knows of a similar resource for nuxt ?

[u/magenta_placenta]

If you guys want a great Vue course, buy Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex) on udemy.

Don't pay $190 for it, though, just keep it open in a tab and check it every day or so. Udemy courses go on sale all the time and you can get this for ~$15.

It's a fantastic course and if you're interested in Vue, I cannot recommend it enough.

[u/nemthenga]

Cool overview.

[u/asq2g]

TraversyMedia is killing the game right now. Constant uploads, and such a broad variety of topics. I loved his Angular 2 stuff, and just about everything he uploads. Keep killin it Brad!

Been a fan since 2015 :)

[u/Kasper_X]

Wish he'd release a more in depth Electron video!