Installing Vue DevTools 0:00In step one, we reviewed basic data binding, and you also got your first glance at the reactivity that occurs here, which is so cool. However, I'm going to open up Chrome Development Tools by right-clicking and choosing Inspect, or on the Mac, you can hit Shift-Command-C. Okay, and you'll see a little tip here. Download the Vue DevTools for a better development experience. So why don't we go ahead and pull that in sooner rather than later. So we'll take a look at it. It's a basic Chrome extension here, and we can get it on the web store. Head to Chrome, and we're all set. Enabling File URL Access 0:24It's a basic Chrome extension here, and we can get it on the web store. Head to Chrome, and we're all set. But now, if I give it a refresh, I still don't see anything here, and if I click on the Vue icon, it says Vue.js not detected. Okay, that's because we're using file URLs here. So one way to get around this is to boot up a little server, if you know how to do that. Otherwise, why don't we just give the extension access to file URLs. Manage Extensions, Vue.js, Allow Access to File URLs. Okay, so now we give it a refresh, and we can see that the Vue icon changed. So let's just close it out, open it back up again, and there you go. Inspecting Reactivity in DevTools 0:56Okay, so now we give it a refresh, and we can see that the Vue icon changed. So let's just close it out, open it back up again, and there you go. Now we see a new Vue tab. Okay, this is really cool. You're going to like this. So notice we have our root element where we have one piece of data bound, a message property. But here's what I want you to take a look at. As I change this, the value down here is going to update dynamically. And that's the thing to understand with this reactivity. If it changes on the Vue end, meaning we update to the input, then the underlying data Accessing Instance via Console 1:21And that's the thing to understand with this reactivity. If it changes on the Vue end, meaning we update to the input, then the underlying data object will be updated as well, like this. However, the exact same thing works in reverse. So take a look at this. You'll see that this root has been saved to a temporary variable called VM0. So if I go to my console and type that out, there we go. We have our instance. And even better, Vue will automatically proxy all of your data properties like this so that you can access them directly off of the instance.And even better, Vue will automatically proxy all of your data properties like this so that you can access them directly off of the instance. So if I want to access message, I can just type it like so. Why don't we update it? We're going to say message equals I have been changed and save it. Instantly, in our Vue, it's updated. And that's the two-way reactivity we're talking about. If I change it on the data level, it's going to be reflected in the Vue. And if I update the Vue, like changing an input, then it will also be updated in our data object. Single Source of Truth 2:13And if I update the Vue, like changing an input, then it will also be updated in our data object. We refer to this as a single source of truth. Think of this. This data object defines our truth. What is this value equal to? Then, simply by changing that value, it can automatically be reflected in the DOM. Compare that to in the past, maybe if you used jQuery, where in order to track things, you're constantly reaching into the DOM. Find this paragraph, fetch its value, and then change it to something else.you're constantly reaching into the DOM. Find this paragraph, fetch its value, and then change it to something else. And then later down the line, if you need to do that again, once again, you dive back into the DOM, you fetch it, and then you manipulate it. That's a very confusing way to build your applications. But with Vue and similar frameworks, yeah, we allow the data to be our single source of truth. I hope you're excited. We'll continue on in step three.We'll continue on in step three.
