So at this point now we've made this pretty cool interface where we click on an element, it opens up. I can close the element and I can open up the element. We've added view DevTools. That'll help us out quite a bit here. We've added some radius tracking to our elements, line height, text size, color, background color here and the actual value that we send in there to the box. So you can see pretty easy to handle and build out this tool that could go in and manipulate the DOM pretty easily. I want to go and show you a couple more things that we might do with class bindings.
So here a lot of this was style binding. We started getting into the show state, which is actually view. You also have v-if. And so v-if, the same concept as v-show, basically showing the element or hiding the element. I believe v-if doesn't actually even load the element in the data end, whereas v-show will just hide the data.
So you might want to go into this apply classes to your view code. So if we go back to our documentation, so Vuejs.org. And you say class, there's class and style binding, binding HTML to classes will say binding HTML to classes. So pretty much the same. And you start to get a little bit of the hang of the syntax. And again, it takes lots of practice to get this down, get used to this, but get the hang of it. It says V:bindclass active, and then the method is active and then the div there, and then here down here is active true or has error false. And so here's a simple way that you might bind something to an element. And so in addition to class, and then in addition to style, you have class as your data binding, and of course you combine multiple or conditionals with this ternary operator here.
So from here, let's talk about some of the other events. And if we go through the documentation here, so we have the view incidents, we skipped over computer properties and watchers. I'm going to come back to that classes and style bindings. So pretty much what I showed. Again, you might have little bit different syntax, but that's the real guts I think of the visual editing and things like that, it'll do a view is in the class and style bindings. We've talked briefly about conditional rendering, and that was v-if, v-else-if, v-show. We started doing v-show and again, pretty simple straightforward. Here's the v-if. V-if is real conditional rendering because it ensures the event [inaudible 00:02:54] and child components inside can show blogs properly destroyed and recreated during toggles. So it's not just a hiding of the element versus v-show. V-if versus v-show, v-if versus v-for.
So let's go into... Now, let's come back to that actually. We have list rendering, event handling, informed input, bindings and components. Well, it was only a couple more we need to go through. So form input bindings, we've actually done a lot of this already and you can see here with the v-model message and it's set up and same with a text area, v-model message and it's set up. With check boxes it's a little bit more complicated, I guess you could say. V-model checked and then for label and then you add the checked field. A lot of people do is they wrap the label around input fields when they design their check boxes. Multiple check boxes around the same array. So v-model checked names and then you can see checked names has the default value there. Radio buttons, same concept. Select fields, pretty much the same as well.
So v-model selected options as you have the options here. Now, if you wanted to make this more dynamic and have the options get fed from another area, you would need to write the v-for and we'll get into that v-for instance soon enough. Pretty much the same thing. So for value binding here, input type radio value binding, pick the check boxes again, the radio boxes and select options. So the buy-in value number 123 of v-model selected as you can see here. And then you could reference it when selected VM selected dot number.
Modifiers now. So this is where you get into some cool things because it's one of those things you don't have to have it, but it adds a cool function. So v-model syncs immediately. So when you change, it changes and if you don't want that functionality and you want it to change a little bit later, meaning after the event is done sync after change events, then you can say v-model.lazy and it'll sync after.
So again, that sync input with data after each input event or sync lazy monitor instead sync after change event. So if I was driving a slider going back and forth, every time it moves on the slider, it's going to run an event. If I was setting that up with an ajax request, I got a problem because that's like a thousand ajax requests that could get sent out by that one user by me specifying undone, which means that lazy on let go, then it's going to go and run and you can see it's very easy to go and integrate that by just saying dot lazy.
So if you want your numbers basically, so v-model number and then number age, and then type is number. This is used for the type and number input fields trim. You can try apply trim to an element automatically, and v-model will components. We don't need to worry about yet. So that's pretty much it. You can get the same concept of how you're binding elements to your input fields and to the Dom using some of these modifiers. And there's a bunch of other things that you can go and do if you look into it.
I want to jump into now event handling. And we did one of these now, which was the click. I used the app, click syntax. They're doing this v-on. That's what I think is the long extended way of doing it, but you could also use the add symbol. I think I'm used to just using an add symbol. I think when I first started, I was using v-on, but now it's just at click because it's less code, which is slightly less code.
So v-on click greet, and then it's going to hit a method and new to specified methods as we did in the last one. And you can invoke methods here is a great example. They show example two, and again, this is the instantiated view element here, and we say greet, and they give you example of greet as the button. Some method inline handlers. So it says say, so we say buttons, say hi, say hi, it's all in line. We're just taking the message and passing the message to the value. So if you needed to do something like that event modifiers.
So here's where you're going to do some cool things, because you need to maybe control how the user works with those buttons. And so you have some event modifiers of stop, prevent capture self and wants and they give you a little bit of explanation click event propagation will stop. So v-on click dot stop do this. And then this comes into play when sometimes on different browsers, there's this propagation and a bubbling effect. Sometimes when you have an element inside of an element inside of an element, and you click on one of the elements in the inside, but elements on the outside might also have events or actions that take place. It can cause a bubbling up effect, which actually clicks on the element, the parent element. So you might need something like that for your propagation. Again, a lot of this comes to an as needed basis for this stuff on how you're going to do your submissions and things like that.