Installing Vue via CDN 0:00So, you're here to learn Vue 2.0. Okay, let's do it. First step, we need to install it on our machine. So of course, you can pull it in through NPM, but let's keep it really simple, and instead, we're just going to reference it on a CDN. And it looks like this is the recommended CDN for the latest possible version, which is, by the way, 2.1.3 at the time of this recording. Okay, so I'm going to grab that, and I'm going to switch to Sublime, where I have a brand new file, and let's just import that. So let's get started with the basics. Creating a Basic Input 0:44new file, and let's just import that. So let's get started with the basics. I'm going to set up, as Bob Ross would say, a little happy input here. We'll give it an ID of input. Now all I want to do is just dynamically bind the value. So maybe something like this. Imagine we have a data attribute. We can use ES6 if we want, whatever you like. And we're going to set a message here to Hello World. And all I want to do is just bind this value, or property, to the value of the input.And we're going to set a message here to Hello World. And all I want to do is just bind this value, or property, to the value of the input. Okay, well traditionally, what do you do? You end up diving into the DOM, fetching some elements, and then manipulating them. So maybe something like this. Fetch the input with an ID of input, and then set its value equal to data.message. So if we do view this in the browser, yes, it works. But it's kind of a lot of work, in this constant cycle of dive into the DOM, fetch some elements, and then do something with them. It's kind of weird. Why Data Binding Matters 1:41and then do something with them. It's kind of weird. Instead, I would prefer to have automatic data binding, so that I can simply just say bind the value of this input to this property. And if either one of them changes, I just want it to automatically work behind the scenes. I don't want to also set up an event listener to say, well, when the user keys down or keys up on the input, then I'm going to update this. It's just too much for any one person. So that's where view comes into play. Among other things, it can handle all of this data binding for us. Creating the Vue Instance 2:07So that's where view comes into play. Among other things, it can handle all of this data binding for us. Let's create a new view instance. And I'm going to specify that the data, or sort of like the model for this view model, will be this. So we'll just associate it. Next, though, we have to tell view, well, what is your surface area? What are you working with? In our case, why don't we create a wrapping div, and we'll give it an ID of root, something like that.In our case, why don't we create a wrapping div, and we'll give it an ID of root, something like that. So now I can tell view, the area that I want you to exist or be relevant in is the element with an ID of root. So that means within here, I can use view, and I can use the data binding. But outside of here, no, I can't. Okay. So now, let's go back to Chrome. Let me give it a refresh, but we don't see anything here. And that's because, well, we haven't specified that we want any connection between this input Binding with v-model 2:49Let me give it a refresh, but we don't see anything here. And that's because, well, we haven't specified that we want any connection between this input and this message property. Okay, take a look. We're going to use a new directive here. And you'll find that all view directives begin with a V dash, just to make it that much more clear that you are working with view. Okay, so V model is a directive specifically for form inputs and controls. So I'm going to bind this to our message property here. Now take a look. Displaying Reactive Output 3:15So I'm going to bind this to our message property here. Now take a look. We come back and give it a refresh, and instantly, it's updated. We can even do things like this. Below it, I'll say the value of the input is colon, and then I will use this mustache-like syntax where I'm saying I want to spit out the value in our data model called message. So now, let's come back, give it a refresh, and we see that there. But here's the coolest part by far. Notice that as I change this, the paragraph below dynamically updates. How cool is that?Notice that as I change this, the paragraph below dynamically updates. How cool is that? And think about what was required on your part to get that to work. You simply create a view instance, you specify some data, and then you bind it to an element. That's it. But then think about this. Yes, we have the data stored out here, but there's really no need to do that. We can inline it here. Now we can remove that, and it's that much simpler. So the key things in this lesson, create a view instance, bind it to an element in yourNow we can remove that, and it's that much simpler. So the key things in this lesson, create a view instance, bind it to an element in your DOM, specify some data. This is sort of like the model for the view. And then finally, for form inputs alone, if you need to bind to their value, then you use the vmodel directive. Okay, keep playing around with that, and when you're ready, let's move on to step two.
