7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 10Length: 51 minutes

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.7 Basic Interactivity

In this lesson, you will learn some basic interactivity with buttons and inputs as you explore the v-on and v-model directives in Vue.

Useful Links

2.7 Basic Interactivity

Hello, and welcome back. In this lesson I want to show you how to add a little bit of interactivity to your Vue.js websites using the v-on directive, and the v-model directive. We're gonna use the v-on directive to create a click event for this button right here, and the v-model directive to do some two-way binding on this text field. So as you can see, we're starting with a whole new site here, which just had some simple html in it. And you can find the url for this starting pin in your course notes for this lesson. Once you've opened that up, let's go ahead and fork it to create a new copy. And we'll get started with this new copy. So first of all, let's talk about the v-on directive, which allows us to create things like click events for buttons. So you'll notice in our JavaScript here that we have a view instance here called app. And in this instance, we have a property called items, and it's set to 0. And I've already bound this text up here to that item's property. And because we've bound that, we can see that number showing up at the very top, Items in Cart is 0. Well, what I wanna do is I wanna create a method that will increment that value by 1 every time we click on this button, or every time we run that method. But we can add methods to our view instance and the way we do that is, I'm gonna do this after our data object here. I'm gonna put a comma at the end of that data object and then on the next line, I'm gonna create another property called methods. Then we'll say colon space, and this is gonna be an object as well, and then inside this object, we can have any number of functions. So let's say we wanted a function called add to cart. Well, the way we do this is we're gonna treat it like a property. So we're gonna put the name of the function first, so addToCart, and then a colon space and then the word function. And then our opening and closing parenthesis, then opening and closing curly bracket. We'll nudge that closing curly bracket down a couple of lines. All I want to do in this function is I want ti increment this items value by one. And it's very easy to do. All we need to do is we need to point to this, which is simply referring to our Vue instance. And then we can points to properties inside our data object, simply by typing dot, and then the name of the property. So we're gonna say this.items, plus plus, and that should increment items by 1. So in order to trigger this method whenever we click on our button, we can use the v-on directive on the button itself. So in our opening button tag here, I'm gonna type space and then v-on, and then we need to pass a value into this. We need to pass a parameter into this directive using colon, and then the name of the value. And this is going to be a click event. So we're gonna say v-on:click. And we're gonna set that equal to a certain value. And that value is going to be the name of the method that we want to run whenever we click on this button. So the name of that method is add to cart. So I'll just copy that method name, and paste it here inside the quotation marks. And now, whenever we click on this button, two things are gonna happen. The first thing that's gonna happen is it's gonna run this method and increment the value of items by 1. The second that thing that's gonna happen is that since this text up here is bound to that item's property, it's automatically going to update. So let's see it that works. We're going to click on Add Another Item, and sure enough, we see Items in Cart increases by 1, and every time we click on it, we see that it increases by a value of 1 every single time. So as you can imagine, we can make these functions even more complex in order to create some more creative functionality for our page. Well, now let's jump down to this second section and let's talk about the v-model directive. The v-model directive allows us to create some two-way binding. And what we're gonna do is we're gonna bind this name property that we're pointing to here in this h4, which we can also see down here in our view instance, we're going to bind that to this text field. So that any time this text field changes, we're gonna see that value change as well. And you'll see right now that we have this simple input here and that's what this text field is. We can set that to a type of text if we want to explicitly set the type. But then we can use a new directive that we haven't talked about yet called v-model. And we're basically just gonna set that model equal to the property that we want to bind it to. And we wanna bind it to that name property, so we're just gonna type in the word name here. When we do that, you'll see that it automatically populates that input field with the value stored in that name property, which is currently Jimmy. But if I wanted to change my name to Craig, we can see that, that automatically updates anything else that's pointing to that particular property. So those are just a couple of simple ways that we can add a little bit of interactivity to our view websites using the v-on and v-model directives. Thank you for watching, and I'll see you in the next lesson.

Back to the top