YouTube

DOWNLOAD SUBTITLES

— Handwritten subtitles — Generated subtitles

Summary (generated by robot):

welcome to the course my name is Gwen and I'm a software developer here is the itinerary for today part 1 we'll start in the browser to get a feel for the syntax and part 2 will be on a local computer building apps as you regularly would along the way we'll cover different bits of the view API so you can get started right away first let's define what view is on a basic level it's a front-end library to help you build JavaScript applications now view jeaious is more robust than something like jQuery since it gives you specific recommended patterns for code organization although it did borrow a lot of good ideas from jQuery angular react and others it's usually not found in the wild by itself you'll see it used with lots of other libraries and combined to make sort of a framework an alternative to react angular and others and we'll cover many of these libraries today so let's get straight into it I'm here my browser at jsfiddle dotnet is just another place to put front-end code and I'm going to try hello world so this is if I was just writing a plain HTML or jQuery application I might put something like this so how do I attach this to the view instance here I've reloaded the view library so I can just choose it from frameworks and extensions I'm just pulling in the latest version and from that library I have a view instance so I can instantiate it like this and then pass it an object of options the only required option I have to set is element so which element in the Dom do I want to attach my view instance to I'm going to attach it to root and then of course I need to have a root an element with ID of root here so now my view instance is attached to this div in the Dom if I run it of course it doesn't do anything different so let's make it do something different there's also a data object I can use and I can populate this with variables to use in the Dom so I can say data breeding now how do I put this in the dome if you have something called double mustache mustache syntax so anything inside of this inside of these double curly braces you looks at and will parse as JavaScript so view comes down here and says okay I have a variable in data called greeting and so I'm going to render the contents of the variable we've run this again it changes the hell of you another important concept in view is data binding view uses two-way data binding through a directive called Z model on an input when I put V model it binds it to a variable in the data object that I give it so in this case I'm telling you to bind this value of the input to the greeting variable from data if I run this everything inside of my input is the same as the greeting variable and then if I change it it live updates extremely simple V model is something called a directive there are a lot of directives in view and they're used to interact with the Dom let's look at another common directive v if v if evaluates an expression to a boolean value either true or false so let's start with something that we know is true so if one equals one you're telling view to display this div and render it to the page yep so this isn't so useful it's usually used in combination with data attributes here so let's make a new data variable we're gonna call it count so if count equals one then display this div to the screen so I'll put I change this to count equals zero and of course it won't display to the screen now there are other directives that you can chain called V else if and the else just like an if-else statement so let me change these and let's save count equals two so this is pretty self-explanatory if count is one nope if count is to render this anything out other than that render V else Oh put two it's gonna render red and so on now the thing to note about V if these divs if they're not true they don't get rendered to the Dom at all now this might be the behavior you want and many times it is view also has another directive called V show so let's call this V show and we'll just do the same thing if count run and it's green now this time if count is two of course nothing displays here but it's actually still being rendered to the Dom just with display:none set in the CSS so if you look in here to kind of dig in but you can see that there's a div with green inside this are same div up here and it's set to style display:none so it's still in the Dom here and so sometimes you want to use V if and sometimes you want to use V show it depends on what you're doing in the application and if you need better performance if you're constantly adding and removing things from the Dom so let's look at some more directives I've already typed this out to save some time is just an input with a submit button you click it alerts and also an email variable that is bound through the v-model directive to the what's entered into the input the view has this directive called V blind of the bind can take an HTML attribute like disabled that works in vanilla HTML and parse it as JavaScript so email button links will say is less than two so what this does is the regular HTML attribute disabled would disable this button but we're telling view to parse this as JavaScript so we're gonna take the email length and the button will be disabled only if the email length is less than two if it's greater than 2 then the button will be enabled so let's run this and you can see I can't click on it it's disabled but if I type something here now it's enabled again so you can do this on many different attributes not just disabled and there's also a shorthand which is what you usually see in view applications so it will be just whatever HTML attribute preceded by a colon and that shortcut for saying V bind colon because it's so common in view now another use for V bind that's common is to dynamically add classes so let's do colon the shorthand for V bind class and then there's two different ways of doing it I'm gonna start with the first syntax which is called object syntax so I'm going to dynamically add this read class and I'm gonna say if the email dot length is less than 2 I want to have a border a red border around this input box so let me run that and I have a red border and as soon as I get past to where I get to or greater I don't so that's how you can dynamically toggle classes so there's another syntax used if you want to toggle in between two different classes which is array syntax so we can use just a regular JavaScript ternary here so you know about length is let's say if it's less than two then we're going to use the class red and if it's greater than or equal to two will be the class screen so let me run this and we had the class red and now it toggles back and forth in between green there are several other directives in view these are a bit less common but I just want to mention some of them so we already know that we can put variables in the Dom using the double mush deston mustache syntax if I run this I can type and it shows up I can actually do the same thing using a directive called V text put paragraph tag the text equals you know and then just close the tag so if you're used to jQuery you'll be used to the dot text that it uses to put text inside of an HTML element this is doing the exact same thing so if I run this it does the same thing as using double curly brace there's also V HTML which will parse it and we'll just put text inside but it will parse it as HTML similar to the HTML and jQuery so if I type stuff in it does the exact same thing but I also type in HTML tags and it parses it as HTML so what if you want to render something just once a static HTML well view has another directive called V once say once and put the email in here just to compare I'm going to copy this and put it outside of the one's so let me start with something initially here so as I update this it only changes in the second one because it's frozen and just set as the static HTML of whatever it was initially the second one will still display and update as you change the v-model for that variable so let's look at looping in view I'm just going to clean this up real quick all of this and let's make a list unordered list it's no I and the directive to handle looping in the Dom in view is called v4 so let me come down here and get something to actually loop through which is an array of cats I've already written paste it there and the syntax for this will be you need to take your red cats and you're gonna say item in items so it will just be like a four in loop in JavaScript so you'll say cat in cats and then during every iteration of the loop you'll have access to the cat variable which will be per index in the array so I'm just gonna put cat here and run this again and it comes out with all the different cats in the array so of course in the first iteration it displays in Li element with the first cat inside which is KitKat that index 0 and then it moves the loop moves to index 1 and then index 2 and song is on and if you look in the dev tools so you can see it has the full array there now you can also do this with objects of course these are just simple objects with one key value pair each so now cat would equal this object with the name inside so to display the cat's name now I'd have to do cat name run it and I get all my cats great so does more we can do with looping and there's more we'll get to later when we're looking at local applications but that's pretty much how it works so let's look at functions now what if we wanted to add a new item to this array so I'm just gonna add something similar to what there was before and put the model little new cat and button so I'll add a function to the button in a second let me run this and it renders my static HTML that's good and let me add this new cat so this is modeling my new cat that I'm gonna add to this list so I need some kind of a function to add it for me and I can do that with a directive called V on on click so when I click this button I want it to perform an action in this case I want it to run the function add Kitty which we're about to make so the data object is just for variables so to put a function here I need to add one called methods and this is another object with functions inside so add Kitty oops kitty which is a function and I'm gonna need to push a cat onto this array to add it to this array so I can access any any data variable inside of a method by doing by using this so this dot cats will access my cats array in data here so this dot cats dot push and then I want to push my new cat and my new cat I also have access to on this so I can say this dot new cat and I have the new cats name and of course this would work if we had just a plain array but we actually have an array of objects so I'm gonna put this inside of an object and then say name is this dot new cat so this will push another object onto this array so let me see if this works ran it let me add and I can't press ENTER right now but when I click the button it adds it pushes on to my array perfect of course it's kind of annoying click add every time so what if I want it to respond to and enter as I'm typing so I can quickly add more kiddies I can actually add another event with V on again but in this case I want V on key up and then equals add kitty so I want to run the function add Kitty on Kia so let's run this and see what it does so unfortunately though I didn't tell it which key up so any key that I press it's just adding a new cat for each one which isn't the functionality that I want so I can modify this key up by saying key up dot enter let me run that there key up enter so I have to hit enter and it adds it to the array which is perfect unfortunately it's not really the functionality that we want to leave the same cat in the input box so how do we clear the input box we can just set new cat this dot new cat equals an empty string we've already pushed the new new cat so we don't need it anymore and this new cat is fine to be emptied again so let's run this there and now it empties ready for more cats so there's many more events and modifiers that you can chain on to events for example view has an API for chaining things on to the click event you could do dot prevent which means prevent default and you can also do stop for stop propagation basically all of the common things you might do that are associated with that type of event which is super useful I want to show one more shortcut here and this is what you'll normally see in a view application instead of Veon because it's so commonly used they have a shortcut to just do at so at click and then you can do this with any type of event anywhere you would use beyond so you can say at KeyUp let me just show that this still works and it works fine both ways work this is just adding a shortcut to it so let's say you want to update something that's rendering to the Dom view has something called filters so I'm just going to write a simple filter to illustrate what it does and I'll come down here after methods I can add another object and this one is similar to methods it's an object of functions and I'm going to put the function capitalize function actually value here and I'll return the value but I'm going to change it to upper case view will parse this as JavaScript with cat name and then it will pipe it to this capitalize function which is a filter so it doesn't change the actual value stored in the view state here in the data property so all of these names will still be lowercase but just the display on the Dom will be piped through this capitalize function and it will come out value dot to uppercase so if you run this so I actually misspelled filters here I'm gonna add an S and there you go it filters through the capital I so you can also pipe these so I'm going to add one more key defi and I'll make another filter here and I'll return the value Y so when that it returns Y on the end if I piped it the other way the Y would be capitalized really this isn't used that often in view in my experience it's just a good thing to know about for when the need arises another set of methods in view for updating what's seen on the Dom are the computed methods so let me get rid of filters real quick and this filters block here and I'm gonna add computed instead and I'm going to use the same and scroll down and I'm going to use the same method so let's get a PHY the cat named function this time the function doesn't have to take anything so let's say if this dot new cat which is our cat name that's entered in in this input box so if that the length of that is greater than one I'm going to return this stop cat name plus y and let's display this in the Dom to the fire game and I'll put a break after so you probably noticed the connection that view whenever it sees a variable inside of the double curly braces it looks down here at the data property and the methods and the filters and the computed and tries to find a match for it so let's run this there we go and as I type well it's adding the Y for computed but it's coming up with undefined and that's because I misspelled the variable so you put a new cat there and run it again yeah and that should work so later on you'll be using computed a lot when you deal with view X it's also extremely useful if you have a lot of logic in the Dom let's say you're doing a lot of computation or updating inside of this block then you could clean it up take all of the logic outside of the Dom here put it inside of a computed property and then just display it in the Dom like we're doing so let's say you want to update something that's rendering to the Dom view has something called filters so I'm just going to write a simple filter to illustrate what it does and I'll come down here after methods I can add another object and this one is similar to methods it's an object of functions and I'm going to put the function capitalized function actually value here and I'll return the value but I'm going to change it to upper case view will parse this as JavaScript with cat name and then it will pipe it to this capitalize function which is a filter so it doesn't change the actual value stored in the view state here in the data property so all of these names will still be lowercase but just the display on the Dom will be piped through this capitalize function and it will come out value dot to uppercase so if you run this so I actually misspelled filters here I'm going to add an S and there you go it filters through the capital I so you can also pipe these so I'm going to add one more key defi and I'll make another filter here Y so run that and it returns Y on the end I piped it the other way the Y would be capitalized really this isn't used that often in view in my experience it's just a good thing to know about for when the need arises let's talk about custom components view has a component architecture that lets you reuse bits of code just like most modern single page application frameworks so let's illustrate this I'm going to create a new component using view dot component and I'm just gonna call it cat list and then I pass it an object of options that's it there's a template and I'm just going to do a multi-line string with let's say for right now and actually a list should be inside of you now how does this work what's this I'll have to attach it to my view instance so I'm gonna say component and then give an array of components my components name is cat list now let's add cat list to the Dom so to add any custom component that you make you can just add it by its name and run it and you can see cat down here you can also pass in logic and variables so let's pass in our cats array and display the array through the component the way to accept variables in a component is through something called props I'm going to pass in the cats array I'm going to say props cats actually this and I'm gonna pass in cats and then here I can use a V 4 V 4 so here I actually have to pass in cats so I'm passing in cats but if you remember here I have to add V bind for the shortcut which is just a colon because if I don't add that it's just going to treat cats as a string when it gets passed into the component instead of treating it as JavaScript and then looking in the data property and getting the array so now cats is set to the array of cats and if I run this again it's the same array and it adds on to both of them so the idea of having components is that they're reusable modular pieces and when you're developing view locally view CLI brie it's a really nice project with you with a modular architecture that kind of handles this under the hood for you to wrap up here I just want to talk quickly about view lifecycle methods view will trigger certain functions to run which can be very useful when you're developing an application so I have four functions here created mounted updated and destroyed and they're just logging things I'm gonna run this and if I look at the console it shows created when the component is created when it's mounted as it Adamic runs mounted now it's been updated because the state and the data object has been updated now for destroyed it's a bit harder because in the small applications instance never leaves the Dahmer's destroyed so I'm going to take a function to call destroy so I'm basically setting a timer for 5 seconds and after 5 seconds it's going to call app dot destroy because the view instance is set equal to the app variable so this will destroy it let me run this again so I see created mounted and then destroyed this also means I won't be able to update anything here because it will be just statically render at HTML as it is it's no longer connected to view there are many other functions that run including before mounted before destroyed and I think they're very well drawn out in the view documentation so view jeaious org the version to guide and if you look at the lifecycle diagram section it shows you exactly when each function is going to be run during the lifecycle of the component so this is a really good reference and you'll be using these a lot as you develop applications next we're going to go over how to start developing applications with view CLI locally to create a view jeaious application we're going to start with the command line interface so if you come to CLI dot view Jas org and click on getting started now over here on the left is a link for installation and it prompts you to NPM install - G view CLI globally so if you copy this command and come over to your terminal you can enter this and install view CLI I've already done this so I'm just gonna check my version my version is three point one point one so now I'm going to create a view app I can do this with the view create command so view space create and then whatever I want to name my application which in this case I'm going to call it quiz so it takes me through a series of prompts mm-hm so if you'll notice the last one manually select so you can select routing testing linting etc the default gives you just babble and es lint and is a pretty basic site on top this is a template I created which I'm going to talk about how to do later so for right now we're just going to pick the default to get started and see how it works it's installing all the dependencies this will take a few minutes and it creates a folder for you called quiz with your view application inside and now it also tells me how to run the application so I can move into the quiz folder npm run serve and it's going to run my view application on port 8080 i'm gonna copy this go to my browser and it gives me a boilerplate application let's open up our application and see the code I'm gonna be opening up envious code which is a free code editor and you can see by default it gives you a few config files package.