Almost any application you build requires that you manage input from a user. In Vue.js templates, you can both display and react to changes to data modifiers. Input fields have the unique ability to perform two-way data binding using the v-model command.
- [Instructor] So far, vjs has given us a nice templating language, but it's really not a dynamic system, so let's go ahead and add that functionality in this video. What we're going to do is come up in here and add ourselves an input field, and this input field, I'm going to give it a class of form-control, that's just a Bootstrap class and a w-25, which again is another Bootstrap class that makes it 25% of the width of the container. In here, we will use the value directive here, which is the equivalent of a v-bind colon value, to go ahead and echo the value of the maximum variable. As soon as we do that, we have the value right up here of 99, because that's the value of that element. Actually, we should have put this outside the v four, so we'll go ahead and add it over here so it just appears one time at the top. You'll notice that if I change this to something else like 200, the other item doesn't show up and that's because when you use the v-bind directive or this shortcut right here called value, all we're doing is echoing the value of the maximum variable. It essentially goes only one way, we're just showing it, we're not really setting it. To do that, there's a separate directive and it's called v-model, and the difference is that now in addition to setting this to the original value, we can go ahead and modify it, and you can see that our display is going to change because this is not just showing you the value, it also allows you to modify or change the value. Let's go ahead and set that to 99, and even like 96, you can see that we only get one. This is now a dynamic element, and that's pretty cool but I think that we could do a little bit better than this, to make it more dynamic. Let me go ahead and add some code here, and we'll take a look at how it works. Let's go ahead and hide the interface and we'll type some of this code in so that it doesn't keep on updating as we type. These are some Bootstrap classes, this is going to be an inline form, and I am adding a margin to the right of auto, and then I'll put my input field in here, and I'm going to add a label for it. I'll make it bold and give it a margin to the right of two units so it'll just give it a little bit of spacing. We're going to issue this for attribute here, this is just a form attribute just so that we can tie this label to whatever it changes. I'll give it a label here of max label and I'll go ahead and add the id here of formMax. These two should always match, they really don't have anything to do with vjs, just a way you build form elements. In addition to that, I'm going to add another input here, and this is going to be the cool one, it's going to have a type of range and I'm going to give it a class of custom-range. Again, this is just a Bootstrap class to make it look really pretty. We're going to set the minimum value is going to be zero, so this allows us to set a minimum and a maximum value for essentially what's going to be a slider. You're going to see it in just a minute. We'll use here v-model as well, and track that variable called maximum. These are both going to control the model, or the variable called maximum, and what this allows us to do is sort of have a slider. Notice as I'm sliding this right here, it's showing and hiding the different elements, and it's also updating here. I can modify this in either place. You can see that one of them controls the other one because they are bound to that variable and also a modification in either of these is going to affect the other one as well.
- Basics of Vue.js
- Installing Vue.js
- Making an app more reactive
- Working with templates
- Binding classes with objects and arrays
- Creating transitions and animations
- Toggling elements with a key
- Understanding Vue CLI installations
- Installing additional modules
- Adding navigation
- Building routes and creating route links