The Vue JS (2.0) Crash Course | Stephen Sparling | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

14 Lessons (1h 8m)
    • 1. Introduction

    • 2. Installation & The Vue Instance

    • 3. The Magic of Vue (Data)

    • 4. Directives, v-if & v-bind

    • 5. List Rendering & v-for

    • 6. HTML & CSS for Our Lamp

    • 7. Vue Methods & v-on

    • 8. Lamp State & v-if

    • 9. The v-model Directive

    • 10. Adding Reactive Color!

    • 11. Dimming Our Lamp

    • 12. Computed Properties

    • 13. Displaying a Dim Value

    • 14. Wrapping Up & Your Project!

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

Vue.js is one of the fastest growing JavaScript frameworks out there - and for good reason! It’s an easy to learn and extremely approachable technology. 

In this course, you’ll learn what I think are the most important fundamental features of the framework and become comfortable working with them. We’ll learn by doing - as I teach concepts I’ll also be implementing them on an example class project. Please note - this is not an exhaustive course on Vue! This is meant to introduce you to what I feel are the most important features Vue has to offer.

This course is geared towards students that have a basic understanding of HTML, CSS and JavaScript - If you start into this course and find it's a little overwhelming, I’d recommend checking out one of the many fantastic intro to web dev courses here on Skillshare. Don't be afraid though! I've made every concept as approachable as I possibly could have.

SEPTEMBER 2021 UPDATE - As of now, Vue 3 is the newest version, while this course is based on Vue 2. 99% of what is taught is applicable to the new version, but certain exact code from each lesson is not guaranteed to work in Vue 3. In one of the first lessons, there are notes from me as to how to correctly choose Vue 2 so you can follow along with this course exactly.

Meet Your Teacher

Teacher Profile Image

Stephen Sparling

Creatively exploring web technology.


Hey everyone, my name is Stephen and I'm a web developer, video creator, musician and a teacher that's very excited to share some of the things I've learned with all of you!

As a creator, I'm constantly striving to better my craft, which means I'm also trying to deliver the best content I possibly can to you! I'm also someone who gets super pumped about sharing what I've learned with other people, and hopefully that excitement is infectious and gets you ready and raring to learn and create!

When teaching, I try to be as concise and clearcut as I can, as well as doing away with any sort of filler which means my primary goal is to teach you exactly what you need to know, and get you creating as quickly as possible. I'm excited to see what you can do!

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Introduction: everyone. And welcome to the view Js crash course. I'm Stephen, a freelance Web developer. And more importantly for you, I'm a teacher. I'm so excited to be sharing this fantastic JavaScript framework with you now a little bit on few Js view is what's billed as a reactive framework at its very core. That means one thing when you're JavaScript, data changes everything else that relies on that data also changes, for example, other JavaScript data, or HTML, that relies on the JavaScript data. You'll soon understand why this is so, so powerful shortly. And of course, now let me give you an example of the course project. It's a lamp that's been modeled completely in views. I know it's not too much to look at, but we're really focusing on functionality and JavaScript, particularly in this course. So the HTML and CSS are not as important in this case, so you can see the lamp turns on and off waken. Change the color of the light just by typing in a color into an input box way. Condemn it as well, along with a percentage value next to the dim slider. Since I feel that it's extremely important to not only learn concepts but implement them right as you learn them. That's exactly what we'll be doing in this course, will be building this model of a lamp as we go at the end of the course, you'll have the tool set in order to model your very own real world object. And that's what the course project this you're gonna be choosing an object with state, for example, a traffic light, which has three states. It's got a green state Biello state and arresting or another, which has a ton of different states. Ah, couple examples would be. It's got a master on and off state. It's got a light, which has its own independent on an off state. It's got a temperature value or a temperature state. You could call it that can be controlled by buttons or a knob. I want you to be really creative with this, because I know that you can come up with something really amazing and interesting. So for this course, it would be beneficial to have a basic understanding of HTML CSS and most importantly, JavaScript as view is a JavaScript framework. Don't let that scare you off, though. I've made every concept as approachable as I possibly could have. That being said, I'm so looking forward to helping you grasp the fundamentals of you, my favorite JavaScript framework. Looking forward to seeing you in the course. 2. Installation & The Vue Instance: welcome everyone to the first riel lecture in the view Js craft course I'm really excited to get going. So we're just gonna jump right into it with the view instance. This is something that every single view application needs. It needs to be in there. So the instance itself is held in a regular old JavaScript variable. Nothing fancy about it. Um, app is the general way that people will usually name their view instance, you don't have to, but it's standard practice. This new view syntax here will create a new instance of you for us so we can actually use the framework. This isn't view specific syntax. In case you've never seen it before. This is, I believe it was introduced in JavaScript es six a. Just a version number of javascript. So if you have never seen this before, I just want to let you know that it is not view specific. I will be pointing out the syntax that is view specific throughout the course just so you don't get confused. The one thing that every view instance needs is the L property. Um, this actually points view at the HTML element that all of our HTML side view code will be wrapped in Usually it's gonna be a div. So well, let's take a look at that. The HTML This is very basic HTML for view If you'll notice the i d equals app in the diff So everything has to go inside of this stiff all of our view code. So it corresponds toothy l property of our view. Instance, if you see here I've shown you l is the number sign app That's a CSS selector. So you could actually make your did have a class of app and do period AP as the L and the JavaScript. But again, this is standard practice. This is what you see in the view documentation. So once you've actually linked them in this way, the JavaScript in the HTML, I should say you can start writing view specific code inside of your HTML, which we'll get to in the next lecture. In this lecture, I also wanted to talk about code pen, the platform I'm going to be using for this course. So it's a fantastic site for creating quick demos, sharing your code and, ah, the reason why I'm using it. It's great for teaching. So view actually isn't in code pen automatically. We need to take a moment to include it. And I just want to mention that view. Isn't some magic wizardry views? Actually, just a regular old JavaScript file. I don't want to understate how complex it is and the really smart people that have gone into creating it. But keep in mind that it's just JavaScript anyone could right view. While not anyone, you have to be really smart to do it. But it's It's just a regular Js file. That's what I want to get across. We can include it like any other JavaScript file by using a script tagged with an S R C attributes. So you'll see that here just script, and I've pulled it from a content delivery network. There's also another way, second way of code pen specific way to include external JavaScript resources. It does basically the same thing, but it keeps our code a little more organized, so I'm gonna hop over to code pen now. This is what Code pen looks like, and we are going to include view, so I'll truly the first way you can actually just paste in this, uh, this script tag that I've got here and we can go over to the console and type in view and it will return something you don't need to worry about What this actually is Just the fact that it returned Something means view has been correctly included. For example, if we take this script, take out and then type in view, we're gonna get a view is not defined. So if you ever want to check if use properly included, you can always just go to your console type in view the other ways. If you go to this little caused beside the Java script the Js thing on code pen, it will pop this window open and you can see search, CD and Js. So if we just type in view, it'll pop up right here. Click on that Saving Close and bam! It's included Retyping view. We get the same thing. So that's about it for this lecture I'm looking forward to seeing in the next one where we see how and why view is so so magic 3. The Magic of Vue (Data): in this lecture, we're gonna take a quick look at why view is so powerful and it's magic. Let's get to it. One of the reasons is views data property. That's what we're gonna be talking about in this lecture. You can see I've got it highlighted in red. Here again. It's just a regular old property on the view instance, So you can see there's a comma after the L to make sure that view knows that these two are separate entities. The view data property takes an object as a value you can see on the data colon and then the curly braces, which denote a JavaScript object. It holds property value pairs, which act as sort of the variables of you. You can see the property of these property value pairs is the name of the quote unquote variable. In this case, in the highlighted read, its message is the property name, and the value is what you want to be held inside. In this case, it's Hello world, a string that says hello world. So thanks to view these air much, much more powerful than regular JavaScript variables, all right, and it's all to do with updating HTML and data reactivity, which I'll talk about a little bit in a second. A bidding, Hmm? Really has never been this easy because you have got the same javascript as the last slide in this slide. And here is the HTML that actually allows us to display the value of the message property. In this case, the value of that is hello world, right? They match up the two curly braces, our view specific syntax. All right, this is something that view is looking for inside of our active. It's looking for these curly braces to say, OK, the program is referencing a that A property. I should take that and turn it into whatever the value is in our case again, it's hello world. So here's the syntax, the HTML syntax for including view data inside of our HTML. We're gonna take the name of our data property and put it inside to curly braces. So let's hop over to code pen and try this out. I'm just gonna put a data property again. It takes a object as a value. We're gonna give that object a property is well, message and we're gonna put in Hello world. It's worth noting. I've already included view in this code pen. You can see right here. I've included it. And that's why views working for us, we can head up to the HTML We're gonna do the two curly braces and we're gonna tight message automatically views gonna take care of it for us and display hello world in the HTML. As you can see there now, data reactivity is what's so exciting about this. So if we go down to our consul weaken type app dot message and that's actually going to show what our view instance, which is named APP, has held as a message property in its data property, I No, I'm saying property a lot. Hopefully you're following along now. This is where the real magic comes in. If we type app dot message equals and we change it to equal something else. Let's say world Hello, Just reverse it very original. I know, and we enter that in immediately. The html changes previous to reactive frameworks like view. We would have to write extra code in order to select the html element and update it with a new value. But view takes care of that for us behind the scenes, in a really, really elegant way, we can change it to whatever we want. We could change it to that weird thing we could change it to. You know, a number even. And it'll display, even though that's a different data type in JavaScript. Few takes care of all that for us. So hopefully that shows you a little bit about why view is so, so amazing and powerful. And we're gonna be getting into why it's even more powerful in the next lecture. Or we talk about something called view directives looking forward to seeing you then. 4. Directives, v-if & v-bind: Welcome back in this lecture, we're gonna be talking about view directives and V Bind, an example of a view directive. What exactly is a view directive anyways? It's few specific syntax, not vanilla javascript, just something to know. They go where html attributes go, and common examples of HTML attributes Air the A treff attributes in link tags or the SRC attributes in image tags. Few directives always start with V Dash as a prefix, and you evaluates the value of a directive as JavaScript all get into this a little bit more once we can see some code. A simple example of a view directive is V. If if you look at the drive a script at the bottom left of the screen, you'll see nothing really new to us. It's a view instance with Anel attributes and the data object. However, this time we have a showing property in our data object That's set to true the Boolean value. True in Javascript, that's not a string. It's just true. Now this HTML, we might see something a little bit new, and it's ah, on the second line, you can see we've got RV dash. If showing and to the second point on this slide view evaluating values of directives JavaScript View is gonna look for showing inside of its instance. Say Okay, where is showing? It's gonna find the showing property in our data object and say What does it evaluate too well, showing us set to just simply the Boolean value. True. So of course, it's going to evaluate to Troop, and what VF actually does is it's either going to show or hide the div that it's attached to. Let me show you that over on code pen. So here's Thievy. If example you can see. I've got the exact same code as we had on the slide. You can see data showing true. So let's go over to the console and type app dot showing and see what it evaluates to it evaluates to true. Now if we take app dot showing and said it equal to false. If you look at the top here, make sure you watch up here with the Now you see me, we're gonna press enter and it's gone, and that's without a page. Refresh views just doing that behind the scenes. So if we do act out showing set to true, it'll make it show back up. It's a very, very simple example of a view directive. Let's move on to view directive arguments and debunk few directives can take arguments by adding a colon after the directive. Name and V Bind is one of these attributes. What've you been does is it allows us to dynamically bind data toe a regular old HTML attributes. For example, a link tags a trip attributes. If you take a look at this JavaScript I have here, it's nothing really new. The only thing that's changed is that in our data object, we've got a your L property with the value of the hyperlink to google dot com. Me html. However, we'll see something that is new. If you look at the second line, we can see that we've got an A tag with a V Bind directive that takes an argument of a trip . So v bind Colon and then the argument. In this case it's a treff, and you can see the value of that is set to you, Earl. Again, you is gonna look through its instance and say, OK, I'm looking for something named U. R L it finds that in the data object and sees its value is set to google dot com so that it goes back to the HTML and says, What am I V binding this to What is the argument of my V Bind directive? And it's a trip. So it's going to set that a tags a treff to be google dot com. And this is really powerful because as your application progresses, we can actually change around that a traffic flee if we so chose. I've got code pen open here with the exact same code again, and you can see you are all set to google dot com. Let's just confirm that in the console app dot Earl and it's google dot com. Let's see what happens when we set it to something else, say bing dot com. So we've said it to being dot com again. We haven't refreshed the page. If we click on the link, it's going to send us to bing dot com. Now that's really, really powerful again. If we set the app URL back to google dot com, you have to type in that https, of course, because otherwise Theeighties won't load it properly. It's gonna go to Google and that is so, so powerful. You could do that with thesaurus property of an image and load in a different image based on a user's preference or even a user's profile. Now that's really, really powerful, and I'm happy to have shown it to you. Join me in the next lecture, where we're going to talk about something called List rendering CNN. 5. List Rendering & v-for: Welcome back in this lecture, we're gonna be talking about list rendering and the V four directive. Another directive in view. I just wanted to give a quick refresher on JavaScript a raise in case they've totally escaped your mind or your haven't used them to monitor or whatever. It's gonna raise a collection of data that the Reagan hold anything number, strings, objects, even other arrays. And it could be a mix of any of those usually meant to hold data that will be later iterated over, for example, using a for loop. You've all seen that four. I equals zero iess less than a ray dot length I plus plus. And then you can look at each and every item in that array. And this is just a example of a bunch of arrays. We've got our sounds array. Our numbers are a and, uh, an array of mixed values. Now, a raise in view. Having a re present is really a simple as including it as the value of a property within our data object. So you can look at the JavaScript here again. Nothing really new, except we've got our sounds, property and its value set to in a right, and it's really that simple view race just like that Easy enough, right? So list rendering and the V four directive. This is where lists get really, really interesting and super powerful in view. Using the V four directive, we can easily loop through an array, and it also works on objects were not gonna look at that. But just know that it also works on objects and we can render html for every piece of data . Here's the JavaScript. That was in the last slide. And here's the HTML. Now, this might look a little overwhelming confusing, so we're gonna go a little bit more in depth into it in the next slide. This is the same JavaScript in HTML that I had on the previous slide. And let's take a look at it. So we've got our directive denoted by the V Dash D dash for the name of the Array in the data object is gonna be after that in keyword, and this is a temporary variable, or alias, which holds the current array element. It's important to note that this does not need to be the singular version of our array name this is just convention. If you've ever worked in Python, this will be very, very familiar to you if you haven't. However, this in syntax is sort of view specific. It's kind of in JavaScript right now. Anyways, I'm not gonna go into it. But if you look at it, it does make sense. It's going to say it's gonna render a div for every sound that is in the sounds array. So it's gonna render four in our case with boom bap clap and ca bam and you can see down here we've got the curly braces, the two curly braces which let us type, view code inside of our HTML. Let's hop over to code pen and we're gonna take a look at it in action. I've got the same javascript as we had on the slides, and I've got an empty HTML template and we're gonna actually type in our before directive. So V four equals sound in sounds, and then we're gonna do the two curly braces sound. And if you look at the HTML, it's actually gonna render out every single array item that we had inside of the HTML. And if we actually open our inspector and take a look at it. You can see that each of these is an individual def boom BAP clap and ca bam! And you can you can understand why this could be so extremely powerful in a lot of situations. Ah, very classic example of these reactive frameworks is creating a to do list so you can have all of this to do data stored in your javascript. And then it can render this out using just this here, just three lines instead of having to access each one individually or looping over the data inside of the JavaScript in order to render out, uh, things to the dom. Anyways, it's very, very powerful. It's not something we're going to be looking at in, uh, creating our lamp. I just wanted to introduce it really quickly because it's a powerful concept that it's really worth knowing about. And you could totally use in your own project as well. All right to you in the next lecture 6. HTML & CSS for Our Lamp: Welcome back, everyone. I'm so excited about this, Lecter, because we're finally going to start building our sample project. Our lamp. Now, this lecture is gonna be completely HTML and CSS. No javascript, no view. This means if you don't care about the CSS or aren't worried about the structure of the HTML, you can skip it. It's gonna be pretty simple. So if you already are familiar with these concepts, no big deal. You'll just see what I've done in upcoming lectures. And yeah, that's about it. Now, I strongly encourage you to actually head on over to Code Penda, Ohio, and create on account and code along with me. I'm gonna mention this in, ah, lot of lectures to make sure that you're coding along because I really find that that is the best way for students to learn to code along with what I'm doing. And then even after electors over mess around with the concepts you've learned kind of solidify them in your brain. I'm also going to include a link to a code pen collection in the course somewhere that contains the source code for every lecture, just so you can review it. Please don't go in and copy Paste, this though I really, really strongly feel that it's important to code along with what I'm doing. All right, let's get to it. So we're gonna head on over to our HTML and create a div with a class of lamp. Now we're gonna go to the C S s and select that lamp Div and give it a position of absolute . We're gonna give it a top of 50 pixels and a left of 50 pixels. I'm not gonna worry too much about responsive design for this, as it's just a demo again were really mawr focused on the functionality rather than how it looks and how pretty it is. Now I'm gonna create a div inside of lamp with a class of shade, and we are going to select that shade class and give it a position of absolute. So since this is a child of the lamp, def, it's gonna be positioned according to the lamp tive, not the entire document like the lamp, Davis. So we're going to give this oops sorry with every gets a whiff of 70 pixels if I can type and a height of 50 pixels and a background color of biscuit. I didn't. I googled that. I didn't realize that was to CSS color before I actually made this course. All right. Now we are going to create a based if a div with a class of base, this is gonna be outside of the shade class. It's gonna be a sibling, I should say of the shade class. So let's select are based class or that are based. If I should say in the CSS, we are also going to give this a position of absolutes. We're going to give it a width of 10 pixels. We're gonna give it a height of 70 pixels. Not too wide, very thin and long left of 30 pixels and a top of 50 pixels. I'm not just pulling these from thin air. I've done this already just so that we can speed things along going to give it a color off brown. Now, what's going on here? Something bad. Oh, I've put this outside of the lamp tip. Hopefully you caught that. So we're gonna put it up one stick it in there, and now it looks like a lamp. You can see in the preview all right now, we're going to create a light class, actually, inside the shade, a light, defy, keep saying like class and that we're gonna put just under here for the sake of keeping our CSS organized. So that's gonna live inside of our shade, Diz. And its position is gonna be absolute. Which again means that it's gonna be positioned according to its parent, which is the shade Div. Now we're going to give it a width of 100% not pixels percent and a height of 100%. And that's gonna make it the exact same sizes are shade. So if we change, our are within height dimensions up here, the width and height world adapt to that. And now we're gonna give it a background color of you, and that's actually gonna light it up. And that's gonna be our lamps on state, which in the coming lectures were gonna manipulate with JavaScript so that when we click it , it can turn on and off. So that's about it for the HTML and CSS Hope that was enlightening part in the lamp pun. And I will see you in the next lecture 7. Vue Methods & v-on: welcome back. Once again, we're really going to get into the meat of you with this lecture with view methods and the V on directive. Now what? Our view methods, they're very important to view. So let's find out methods air held in an object as a property of our view Instance Exactly like our data object and you'll see what I mean. In a second, instead of things like strings or arrays, which is what our data object holds, our methods object will hold functions you can see in this JavaScript. I've got a pretty standard view instance, we've got our LR data, and now we've got a new property called methods. It's worth pointing out this. So remember our view instances, just one big JavaScript object. So we need that comma after the data closing brace because it's just a bunch of properties like in any other JavaScript object without that comma won't run. So it's something I sometimes forget. I figured it was worth mentioning. If you look at the methods property, it holds an object. And in that object we see we've got one property which is called hello world, and that property has a value of just a function, and in that function it runs an alert called Hello World. This is a pretty standard Java script beginning thing. So I figured I'd adapted to view. Now, how are we going to interact with this method in our HTML? And that is where the V on directive comes in. The Viane directive takes an argument exactly like V bine does with the colon. It allows us to actually set event listeners on HTML elements in a very simple way, and very often the argument of the Viane directive will be clicked. Not always, but you'll see it pretty often, and the value of the directive is almost always a method we've declared in our view. Instance, for example, the hello world method we saw in the previous slide. Here's some HTML. Pretty simple. You can see we've got R V on colon click. So ah, refresher Again. The V on is the directive Colon and after the colon is the directives argument. In this case, it's click. So what this code would do is when we click on the button, it's actually going to run this guy over here. The hello world, uh, property, which is a function. It's gonna run this function, and it's gonna alert hello, world in the browser. Now let's take a look at code pen and how we can use this in our in our lamp. So let's go over to the lamp and we're going to add a V on directive and at a click, and we're gonna reference something that actually doesn't exist in the Java script yet. And we're gonna call it toggle. So this has to be you can see down here, it's gonna yell at me saying that toggle doesn't exist and it's gonna get rid of this. But that's OK for now. No, uh, remember, we're gonna add this common. We're gonna go down to the JavaScript, and we're going to add a methods property, and it's going to hold a JavaScript object, all right? And we're going to add toggle, which is what we need to add. In order for this to start rendering properly again, and the value of toggle is gonna be equal to a function. And we're just gonna simply console thought log something. We're just gonna put, um, lamp clicked. Let's say with an exclamation point, because we're excited I'm gonna clear at this council, so you don't have to look at that now before we even click on the lamp. Let's just test up the method. Remember, we could access data properties of our application, our view application by typing app dot and the name of the data property. Let's see if that works with our methods as well. So let's type in just ap dot tug, and that's going to return a function. And that's what we want to happen. We wanted to return the function. Now let's see what happens if we actually run. Apt up, toggle. It's gonna council dialogue lamp lit so everything is working fantastically really well. And now let's try clicking on the lamp. Remember, this is Thievy on Click Directive working for us, and boom! It's gonna run that function. Now, this is something that is so powerful and exciting before these reactive frameworks, you'd have to go in. You have to select the actual HTML element. You'd have to add an event listener to it. You'd have to add a function to that and just it was much more complicated than this with view. It is so simple to do this and so easy to maintain and just a really exciting thing. This is a cool milestone. I really encourage you to mess around with this. If you want change what it says, try, you know, adding some extra code to our toggle function. Messing around with that, seeing what you can come up with. Don't be afraid. You're not gonna break anything, so just experiment. So that's about it for this lecture, I will see you in the next one. 8. Lamp State & v-if: Welcome back in this lecture, we're going to be adding basic state to our lamp using the data property. And we're going to be using thievy if directive from a couple of lectures ago if you remember it, If you don't, that's okay. You'll remember it as we go. All right, let's head over to our Java script, and we're gonna add a new property to our data, which is gonna be called on. So this is going to control the on off state of our lamp were gonna default it to false so that the user can turn on the lamp once they start. Okay, so now how do we interact with this on property? Well, we could always do app dot data. Our sorry at dot On equals through and change it to that. But how do we actually do that within a method? So we're gonna use our talk, lament that we're going to clear out the consul dot log, and we're gonna reference on with the keyword this. Now, this is a very confusing thing in javascript. It always has been. I'm not going to try to explain it here. There are some fantastic articles that go over how to deal with it and what it actually means. Basically, in different contexts, it means different things. However, in this case, we're going to simplify and just say this refers to the view instance. Okay, so if we type this dot on its going to access this on property in the data, if we type this dot toggle, it's going to reference the method. So that's another thing. Don't name your methods and data the same thing. You'll run into problems, but yet so for our purposes, this dot on refers to the on inside of our data property. This dot anything just refers to something within your view code so you could call other functions from within this function by typing this dot the name of the function. Anyways, let's set this start on to equal Not sorry, not this stock on again, Something confusing if you've never seen it before, JavaScript actually evaluates code from right toe left. So basically what's gonna happen is it's going to say OK, what is this dot on this done on this false? This not this exclamation point is going to invert whatever this dog on evaluates to in this case, this start on evaluates to false, so it's going to invert it to true. And then it's actually going to set this dot on to be equal to true. Hopefully that makes sense. It's a basic If you don't get it, it's okay. This is basically just how you toggle a true false value and JavaScript that's all you need to know. So now let's take a look in the consulate. What's happening? So this app dot on is equal to false. Now let's run at dot toggle all right, and let's see what act out on is equal to now. It's evil, the troops. So that is working perfectly. And now if we click the lamp, if we do apt on on click the lamp and do apt out on again false, so clicking the lamp also runs our method. We're still good for that. Now we are going to make it so that our lanterns on and off. How exciting is that? I'm so excited on the reason we actually made a separate class of separate Dave, I should say, for our light is so we can use the V if directive and we're simply just gonna put V if on all right. It's really, honestly that simple. And you can see our lamp has turned off, so to speak, The yellow Div the yellow color did with the class of light has disappeared. Thanks to view saying OK, it's not on honest is set to false. And now when we click it to toggle it, Moment of truth Bam, it turns on That's so cool. How cool is that? I'm getting excited about it. And I knew what was gonna happen. Um, so let's just go through that chain of events once more. We are clicking on the lamp and that, thanks to RV on click, it's gonna were gonna click it, and it's gonna look for view I should say is gonna look for the toggle method. It's gonna go over here and say, OK, the toggle method is set to a function that basically inverts the on property in our data, it turns it from false to true or true to false. Okay, that happens. And then view says, Oh, OK, this directive, this V If directive is saying okay if on is true, I want to display this. However, if on his false. I don't want to display this anymore. This like Div, which is set to a color of yellow in our CSS. You can see here background color, yellow, and that's basically what's happening. That's the chain of events there. I'm excited that we got this working really, really cool on. And I'm excited that we're actually starting to do stuff. I wanted to get into doing stuff as soon as I possibly could, so I will see you in the next lecture. 9. The v-model Directive: Welcome back, everyone. In this lecture, we're gonna be talking about a new directive called V Model. Really exciting, really powerful. And it's gonna be fun. So how do we use the model? Well, it's used for two way data binding, which is what the view Js docks calls it. So to a data binding on HTML elements that allow for user input, for example, text inputs. They can also be used on any anything the input tag can handle in HTML. Check boxes, radio buttons, range sliders, drop downs, all that good stuff. So when data changes in an HTML element that has a V model directive, it updates the data property it is tied to inside of the view instance and vice versa. If I change the data in the HTML element, it will automatically update the associated property in the view instance. And if I change the view instance, property inside of the JavaScript will automatically update the HTML. It's a really powerful concept, and I'm just really excited to show you guys how it works. Now you'll see some JavaScript here, pretty standard view. Instance, we've got a property named Color inside of our data object and its value is purple. And if we look at our HTML, you can see we've got something A little nuvi dash model equals color. And I want to remind you that view sees anything any value off a directive and looks for that value inside of the JavaScript. So that color is not the string color view is seeing that v Dash and saying, OK, this is a directive. I'm gonna evaluate whatever this is equal to and try and find it inside of my view. Instance, Just a quick refresher on that. Okay, we've hopped over to code pen, and now we're going to implement a V model directive on a text input box that will allow us to change the color of our lamp, which is really cool. Now, we're not actually going to implement the color changing just yet. That will be in the next lecture, where I talk about some other concepts that will allow us to do that. However, we're just gonna get the model up and running in this one. So I'm gonna add on input with a type of text outside of this lamp, def. However still inside of our active, that's very important otherwise have used not going to see it properly. So we add an RV model directive and we'll call this new property color, as we did in the slides. Now you're gonna see an object error down here. That's OK. It's just it's because view is not able to find the property of color because we haven't made it yet. So let's go ahead and make that at our comma. Remember, it's an object that we need those commas color and we're gonna add in purple. And now you can see up here. We've got purple automatically filled out. You can see up here. It doesn't even doesn't even say anything right. There's there's nothing. There's no placeholder text, nothing associated with it. Watch this. This is the really cool part. So if we do apt out colored remember, we can access any property inside of our data object by doing app or the name of our view. Instance. In this case, it's app, app dot whatever the property name is. In this case, it's color purple. Now if I type orange into here and remember, this hasn't been refreshed or anything, this is all happening live in real time orange. How cool is that? Immediately it's taken the text that the users put in and changed it in the Java script. Now that is amazingly powerful. And you can see it works the same way. If I in the JavaScript If I type red orange in here ap dot color up there automatically, it changes. Watch again. Watch again at the top. As I do this, I'm gonna change it to blue. Now watch again at the top up here immediately. It changes. That is so, so cool. This is one of the coolest things about view for me. Personally, I just I love this back and forth between the HTML and Js. It's so elegant and so, so easy to use. Okay, in the next lecture, we are going to actually make this have an effect right now where our lamps still yellow? Because that's what the CSS is dictating down here in the next one were actually going to use V buying. And if you remember from a cup electors ago in order to change the color of the lamp see you then 10. Adding Reactive Color!: Welcome back, everyone in this lecture, we're going to be taking our color property inside of our view. Instance that is V modeled to our text input. And we're gonna make it so that that value actually changes the color of our our length that we've got here on the screen. Now it's worth noting that, uh, I've added some flavor text here since the last lecture that just prompts the user to input a valid CSS color. And it has to be a valid CSS color. If it we type in something gibberish or numbers or whatever, it's not going Teoh display correctly. It will just default to a yellow, so it's not gonna break anything. However, if you want a more error prone way to do this, good way would be a select input and, you know, like a drop down. And I'm not gonna go into that here. But the view documentation as they have fantastic docks. It's another reason why it's one of my favorite frameworks in JavaScript. Their documentation is just amazing. But if you go to the V model documentation, it's got a whole section on select inputs. Drop down inputs. Let's get into including it here, though, let's get into using the model to change the color. Now let's take a minute to think about How would we change the color of this while we could go into the CSS and just change it manually ourselves, and that would work right? It's purple now, but JavaScript has no way of touching a CSS file. Not like this anyways. So how do we do that? How do we make the HTML change the style? Well, I'm sure you've seen it before. It's the style attributes on on HTML element. And in order to do that, we just type in some CSS code background. Color is purple and you can see it's changed. We've made it so that it's purple. However, we want to be able to change this with view, right? And we can't just type in, you know, double Curley's and then color, because view can't look inside of attributes, right? This is just a strength you couldn't possibly know that it was supposed to look inside of there in order Teoh discern what the color should be. So what have we seen previously that allows us to change? HTML attributes using view data. That's right. It's the bind. Okay, so we're actually going to get rid of this and type in v bind. Remember, that's our attributes. That's our, Ah, our directive, I should say. And after the colon, that's our argument for a directive. V bind style equals okay, and what this is gonna take, we can't just type in background. Color is purple because that's CSS code, right? There's a lot of things wrong with that, but that CSS code. So how does view deal with, uh, the V bind style? Well, it takes a JavaScript object. Okay, And that's the two curly braces. Now it takes this, and basically it's just a list of CSS properties. So, for example, background color. Remember, you can't use dashes in JavaScript, so it's background with a background color with a capital C on the color. And if you've ever edited style using native JavaScript, just vanilla JavaScript, I should say this is very similar. There shouldn't be anything new to you, Colon and of course, because it's ah object that's our property or Kias, background, color and our value. We have to use single quotes here because if we use double quotes it'll actually escape us from this this sequence. But we have to use single quotes because remember, we can't just type purple because then that's the JavaScript is gonna look for the view instances, Rather is gonna look for the property of purple, and that doesn't exist, right? So if we put a string in here as purple, you're going to see bam, it changes. That's that's amazing, right? That's really, really cool. Okay? And really, really powerful. But we don't want this to just be a static strength. And here's where it all comes together. This is such an exciting moment in the course. We're going to get rid of this and were simply gonna type color. And remember, whenever view has a directive, it's going to see the value of the directive as JavaScript. Right? And it's gonna look for this color property inside of itself and its gonna find it in our data object, which is equal the purple Ok. And now we click it and it's purple. And watch this. This is, like, so amazing. We're combining stuff, and it's exciting. So we get rid of purple and it defaults to yellow, remember, because in our CSS. We have the background. Color is yellow. We type in orange. Look at that. Automatically. It changes. That is so exciting. It's so exciting. Pink, uh, blue green. Amazing. And just toe show you that it does work, weaken type in app dot color equals yellow or let's not do yellow. That's the default, um, orange again and it changes. Wow. How amazing is that? That is so, so cool. And you see every type gibberish it'll stay. Is orange type of numbers that'll stay is yellow. But how amazingly powerful is that? We're combining just two simple things and we don't even have, you know, we've got less than 30. Maybe you'd lesson 25 lines of code here, and this is all functioning like this. It's it's just mind blowing. How powerful view is in a moment like this. And I'm so excited to get to this moment in the course. Okay, that's about it for this lecture. I will see you in the next one 11. Dimming Our Lamp: All right, welcome back. So we're hearing code pen, and we're going to add a dim slider to our lamp that lets us dim and brighten the actual color of whatever color we've chosen to set it to. Now, this is going to be using concepts that we've already explored. This is nothing new. 100% of it is what we've already seen. Save for a different type of HTML input. Now, if you'd like to try this yourself, I encourage you to do it because it's kind of like a puzzle exercise, right? It's really fun to try and figure this stuff out anyways. It's fun for me. Obviously, completely optional. You could just follow along as I'm doing it. I'll give you a hint for those of you that do want to try it on your own will be using on input html input attribute with a type of range. It's gonna be a range slider. Okay, let's jump into it. I'm gonna start with the job script this time. We're gonna add a brand new property to our data object called brightness. Okay, We're gonna set that equal. The one note that this is the number one, the integer one knot, the string one like you'd see there. Okay, One. And it's important that this is one. Because this is what's gonna control our light, dibs, opacity the like, give up here that, actually, when we click shows up, right, so that's gonna control the opacity and opacity. Uh, in CSS is a value between zero and one, with 0.5 being the middle point. Okay, so it's important that this is one. It starts off, it won. It can start off whatever you'd like, but it has to be a value, but between zero and one, just like the opacity styling in CSS. Okay, before this text input, we're gonna add another input with the type of range. And here are some attributes that are, uh, that you would usually include in a range input. We're gonna have a men, which is gonna be the minimum value. We're gonna have a max would mean the maximum value. Just like we talked about has to be between zero and one. We're gonna add this step attributes or is set to 0.1 If you've never seen this before, it controls how far the steps are in this slider. Let me just show it to you. So if we set the step to 0.5, which is our halfway point, you can see when I dragged this, it automatically jumps toe halfway between. Now we want to be 0.1 because it's going to allow us to have a nice smooth movement and a nice smooth brightness change as we go. All right, let's add in some view magic with V model. We've seen this before. This allows us to link to weigh data binding between an input and a JavaScript. Our our view property, I should say. So we're gonna model it after brightness. If I can spell Minamata, let after brightness OK, And if we go down here and we change it to 0.5 and save, you'll see that view automatically takes care of the default value for us. We don't have to set that and again to weigh data binding. Sorry, this is from earlier We can clear that if we do app dot rightness down here, you can see it's at one. If we change it up in the html to something low, go back to the consul. Check it out. It's point to two, and we can set apt uprightness to something like 20.5 and watch the HTML appear the slider . It'll change 2.5. Now, how do we go about using this to control our opacity? The opacity of this light? If well, we're gonna use the same thing that we use for back for the background color, we're gonna use this style object. And remember, this is just javascript. So it's just comma separated, right comma. And then we type in our new key or property, whatever you'd like to call it off opacity. Right, Because that's a CSS uh, a CSS style that we want to change. So if we do a pass, it e equals brightness. That is all we have to do were done. Check it out. Watch this, we click it and we move the slider and it gradually dims and gradually brightens. And we can even change the color. All this is happening, right? This is halfway between orange. It completely dimmed in orange. Full color. How crazy is that? That's so cool. Right? And this is all using things that we've already learned. You could add so much mawr using just the concepts We've kind of gotten under our fingers so far in the course again, I recommend that you mess around with this experiment. Have fun. Anyhow, that's the end of this lecture, and I'll see you in the next one. 12. Computed Properties: Welcome back in this lecture, we're gonna be talking about computed properties and using them to clean up and re factor some of our code that we have in our lamp project. What are computed properties there? Another very powerful, very important facet of view. What they are are properties held in a computed object, an object different from our data object. Similar to methods properties inside the computed object have values of a function. They always have a value of a function just like our methods. So the function these functions use the return key word to determine what the property is equal to when we access. It will get into that in a minute. When I show you the code so you can see here, there's there's a little bit, but don't be. Don't be worried about it or anything. We've got a view. Instance an l and we've got this new property, a new ahbd, a new property on our view instance called computed. And it's equal to an object just like our data property. And just like our methods property, you can see we've got one property inside of our computed object called product and its value is a function and dysfunction returns something as simple as two times two. Okay, this is the HTML that goes along with it. Very simple, but a couple things to note here. So let's talk about this return Key word. If you don't know what it is, that's okay again. NDN has some really, really great documentation on return. You can google it. It'll come up with a bunch of results. Basically, for our purposes, return is what is the value that product is going to be equal to. When the computed function is over, it's it's going to return it. This has to be at the end of the function. If we write any code after the return statement, that code won't run. Okay? And you can see on the right. I've got some HTML with product in our curly races. As we we do anything in view, we've got to curly braces, the name of a view property and to closing curly braces. And it's gonna display for because two times two is four. If we were to access app dot product from the console, that would also return for so we can access these computed properties the same way we would access data properties by typing app dot and then the name off the computed property. Now let's jump over to code pen. Here we are in code pen. This is the code from the last lecture. We've still got our on our functionality. We added this dim slider in the last one. So let's get to adding a computed object within our view. Instance for the lamp and I'll tell you what we're going to do in a minute here, OK, so we're going to do computed. Remember this comma here because our view instances, just one big javascript object needs to have that comma also needs to have a comma at the end. Now, the order of these don't matter. You can have them in any order. I just like to have my computers right under my data because I see computers as a type of data, just something with more complex logic behind it. Now we're gonna add a property to this computed object called style. Okay? And maybe you can guess is what we're going to do. Remember, that's gonna be equal to a function computed properties are always equal to a function all right, a function that returns something, and we'll get to that. So what we're gonna do here is we're actually going to take this object up here. Remember, this is just Java script, and we're gonna put it into the JavaScript because it's getting a bit long for my tastes. I think when you have something like this, that's a lot of JavaScript. It belongs in the JavaScript. It doesn't belong in the HTML on. If we were to add more and more properties to this, it would get much, much longer, too long. I think on we're gonna clean it up basically, by adding a computed property. Okay, so we're gonna have a variable a local variable called style object. This exists on Lee. Within this function, it doesn't touch any any view. Instance. You can't access it up here. Nothing like that. So we're going to set a variable. We're gonna set it equal to an object, and this object is gonna have to properties one called background color. Just like up here. Remember, we need to make it say exactly background color. Otherwise, html won't understand what CSS property we're trying to access, and we're going to put this dot color. I talked about this dot a couple of lectures ago, earlier in the course. If you don't understand this stott again MDMS and great documentation, there's some great stuff on Google. They're great articles honestly written about this dot However, for our purposes, this dot references anything in the view instance, anything that we could access by typing app dot whatever app dot color let's say inside of our view, instance inside of any computed properties or methods or what have you this dot accesses values inside of our our view instance. And it can access this dot and I say instance and not just data object, because we can actually access this style in the same way by typing, uh, this dot style in, say, a method or a different computed property. Okay, so this dot refers to any data that we've got inside of the app or any method. You can also reference toggle with this dot toggle right. Okay, so let's add a 2nd 1 called capacity. Make sure that that's opacity and do this dot brightness. Remember, we need to match whatever the data, not the star capacity, because that doesn't exist. OK, on now we're gonna do a return of style. Object returns don't like you saw in the slides returns did a did two times two, which is returning just a plain old number. Returns can also return a variable local variable like style object. Right. So we're returning style object. This is you could return. You could do it like this is Well, um which some people might prefer. I just think this is a little more explicit and and I just like it better, But you can return just the object itself if you'd like eso weaken again. Like I said, we can access computer properties with app dot Name of computer property, So app dot style You can see it's returning an object with the background color of yellow and opacity of one. Right, because our brightness is set toe one. When the When the instances created the view instance I should say is created and you can see this is the This object here is the exact same as this object here. So what we're gonna do is we're just gonna replace this v bine style with style. Right? And view is automatically gonna know that style Well, it's Ah, it's a view directive. So the value of it has to be somewhere within the view instance, right? And so it looks in the data and says, OK, it's not in the data on color. Brightness knows a style that it looked through the computers and says, OK, I found style. What is this return Now? This is a The next thing I want to talk about is a very, very important facet of computed properties. Okay, so if we do app dot color, let's say act up brightness. All right, if I can spell, uh is equal to one right? And if we change it around here, I've got brightness is set to 0.54 now. OK, if we look at ap dot style, it's also set to 0.54 We change it again. Look at ap dot brightness 0.77 at dot style. The computed property automatically updates because of use magic. What's happening in the background view knows that it looks forth self self references, I should say to other data within this view. Instance. So it says Okay, this dark color and this stop brightness are both within this computed. So whenever this dark color or this stop brightness, You know, over here, the color and the brightness, whenever those change view automatically re computes this property. Okay? And that's sort of why they're called computers. They compute when any anything within them changes anything within them. That's part of the view instance changes, right? So it's a really powerful thing, a really cool thing, and something that can be really, really useful to us, Right? Because now you can see it's doing the exact same thing. We can change the color. It will also change the color. Okay, that's about it. With computers. Hopefully you enjoyed that. Found them fun. Like I said, experiment mess around. See what else he can do with, um, in the next lecture, we're gonna be looking, Maura computed objects to create ah, percentage value of our dim slider. So stay tuned for that. See you next time 13. Displaying a Dim Value: Hey, everyone. And welcome back to what is actually the final practical lecture in the view Js craft Course I'm really proud of you all for making it this far in this one, we're gonna be using a computed property to show ah percentage of our brightness. We're going to show, you know, 50%. If our brightness is equal to 0.5, let's just get started. So I'm just gonna type brightness plain html. It's just going to show up here is as text and then to curly braces. And what happens if we just type brightness? Well, it's gonna reference our brightness property down here in our data object. And if we move the slider, it's gonna show, you know, it's gonna show the percentage, but we want this to look a little prettier. We don't want it to show 0.27 We wanted to show 27% right? How are we gonna go about doing that? Well, we're going to use a computed property on perform some math on our brightness property inside of our data. So remember we got to use a comma because are computed. Object is just that it's an object, and we're going to create a new computer property called dim Percentage. Okay, and remember all computed properties. Their values are always a function, and they always have to return something. So let's just start with return this dot brightness times 100. Okay, so remember this DOT is referencing the view instance itself, and it's gonna look for brightness. Brightness is one, and it's gonna multiply that one by 100. So right now it's saying brightness is equal to one, and that's because I forgot to change it up here. Remember, we gotta change it in our template as well. Brightness is not equal to that. We want to be equal to dim percentage. Okay, and now it's equal to 100 you can see when we change it, it changes the number. Pretty, pretty, pretty awesome, right? It's really that easy to do that to do, like some math. Or you could even do more complex math. You'll notice here that it's it's flashing those really weird numbers every now and again, right? Because of internal things with JavaScript, I guess an HTML. But there is a way to fix that and what we're gonna use is, ah, function called unturned. All JavaScript function called math dot round. And that's just gonna round it down to the nearest integer value so that it's it has. No, there can be no decimals, right? So we fixed that issue. It's no longer showing those weird in between numbers, and that's about it. For that, we can also add, ah, percent sign up here in the HTML itself, and it'll show percent. We could add that in the JavaScript as well, by doing ah, plus sign and a percent sign. Now you see their 2% signs. But I prefer it up here because, you know, this is HTML. It's in the HTML where it belongs. You can see it's really that easy to do something like that, just using a computed property in order to show that up. All right, join me in the next lecture for a wrap up some key takeaways on my congratulating you on finishing this course. Well done. See that 14. Wrapping Up & Your Project!: Welcome back, everyone to the final lecture of the view Js craft course. Congratulations. You made it through. I hope that you come out of this course knowing a little bit more about the framework than you did before. And I hope you can see why. I think it's such a fantastic tool in Web development now. This was only a crash course, a slice of what I think are the most crucial concepts within the view framework. If you did enjoy the framework if you thought it was cool, I highly recommend you check out the view Js documentation as well as follow me here on skill share because I'm looking at creating some or view related content. If if demand is there now, let's talk about some key takeaways what you should now be able to do with view. But at the very least, I hope that you can create an instance of you and make some reactive data and know what to put inside of the HTML. In order to make that data show up, you should be able to use a raise in view and the V four directive to render out lists of data in HTML. Based on those a rays, we didn't actually use this in our lamp application, but we learned it early on in the list rendering lecture of the course. It's a crucial concept, so that's why I wanted to cover it. You should be able to create and use view methods and beyond. To make HTML interactive, you should be able to use view directives like VF V Bind and the model to make the HTML talk to view and vice versa. And you should be able to use views computed properties to store more complex data data that requires computations and the like. Now I want to show you something that I created. Uh, that's a little more advanced in the lamp application. I called it view dot TV, and what it does is it doesn't whole bunch of stuff. It's basically I wanted to model a TV. I was originally going to just show images on the screen and have the view instance hold things like channel data and volume data. When you change the channel, it would change the image, and the volume data wouldn't really do much except display that volume control you have on there But as I've been known to dio, I took it one step further. I actually used YouTube's I frame a P I in order to create something that would actually house live streams within the television. The channel changes the live stream that you're listening to. It's all of these. You know, The chill beats toe work study to that are on YouTube, all those 24 7 live streams and the volume while it shows up on the screen. It also actually controls the volume of the YouTube player. So it's a more substantial demo of a project that I would have created had I taken this course. It uses some or advanced CSS than we saw in the lamp. I didn't use this view TV as the example because I didn't want to focus on the CSS. There was a lot of CSS that I had to do in order to make this function nicely. I also used external job script resources like the YouTube I frame a P I, as I stated earlier, and I didn't want to get too bogged down with that stuff. That's why I created something so bare bones so simple so that we could focus Onley on view in its data. Something that I really want to stress is that this view dot TV application uses Onley concepts that we learned here in the course. It doesn't use anything beyond that view wise. Like I said, Advance CSS and external jazz. But Onley concepts that we learned here in the course when it comes to view and the entire application is pretty much, you know, like 85 90% view, so they'll be a link to it. You can check out It's on code Panic created it on Cope in will be a link to it. In the notes of this lecture on, I encourage you to check it out. You can look at the source code. A swell is just play around with it. I actually really like the application. I was happy with it, and now it is your turn. I want you to take all of that newfound view knowledge and make something as creative as you possibly can. It's just on object with state, right? So really, any electronic device you know, you could do speakers you could do even like a video game console house user data. What game is currently running? Anything. You know, Sky's the limit. Think big and create something really cool. In order to do this, you're gonna head on over to code pen dot io and create an account if you haven't done so already. I told you to do this at the beginning of the course, but if you decided not to, now is the time to do it. This is how we're going to share our our projects inside of the projects and resources tab off the course. You're just gonna share a link as well as a thumbnail if you so choose of your final project. Now, I want to mention one more thing before we end the course in the projects and resources tab of this course, there is a link to a pdf off the view Js craft course tt that I've made on its got all the concepts that we've learned throughout the course, as well as examples on how to use them. Now I want to take a moment to thank you for taking this course. It really means a lot to me that you wanted to learn more about this fantastic framework that I love so much. If you would leave a review, I would it turn. Be eternally grateful. I would really appreciate that And anything constructive that you've got for me. I want to learn how to teach better because it helps you learn. And that's really my goal in creating this course and any other courses, I make sure to follow me as well because I will definitely be uploading more courses to skill share. I had so much fun doing this. Thank you for joining me in this view Js crash course. And I hope to see you soon in a future course. Thanks for joining me.