So then there's a bunch of different methods that you could go in and use and build and ways to handle it. I think this has really comes, once you know the tools now with view, it's really how, as a programmer, how are you going to use those tools? What is your master creation? How do you work with the tools more effective? And that's really just going to come to a practice and trying different things and trying and methods to abstract your code and make it easier. A couple of things here that you might want to try out here are under events. You have the stop actions that we talked about in the last video. You also have some keyboard commands that you can integrate inside of input fields. So maybe the person presses enter inside of a text area box and it needs to do something.
It needs to go and register a spell check or it needs to go in and highlight something. And you have a bunch of different commands that you can set up there. You also have system modifiers that go along with that and mouse button modifiers. So if you have a three click mouse or a two click mouse, you can actually tie in or trigger the left, right, or middle buttons to do something different in your application. So maybe when you right click inside that input field, it opens up a series of options. Now these are different than global keyboard or global mouse events. These are designed to go work with your input fields. If you need to be global, you only need to register it like with a window event. Maybe we'll take a look at that later on. So from here, I want to jump into computed properties and watchers.
And if we go down this list here, we've pretty much gone over the view instance, some of the templates, syntax, the computed properties and watchers, what we're going over next. We went through class and style bindings, conditional rendering, and event handling. So also form input fields. So what we have left are components list rendering, and here are computed properties and watchers. So let's go look at computed properties and watchers. And so computed properties are these pretty cool things that allow you to manipulate whatever that data is. And so they give this example of message dot split. So it's going to split at the space there, reverse, and then it's going to join. Okay. So let's take a look at how we might want to write something like that. So message dot split, reverse, and then join. And I'm going to apply this to our H1.
So here's our H1 code, which is the name. And I'm going to say where it says message is now name and notice. I'm not doing anything. I'm just writing these methods, split, reverse and join. Okay. So now let's go back to our example here and now it says rovert. And if I go in here and say, cat, it's going to say trevor cat, it's going to say tac rovert, and if I write baba doo, I'll do it as two words, even though... It says ood abab tac rovert and so what this is doing is it's bleeding at the space. If you're familiar with PHP, with a string replace. So basically split the data here at this space, reverse it and then join it back together. It's a pretty cool way of applying some of these computed properties. So here's that basic example. Again, here's the reverse message.
So you can call it, instead of applying all these methods, you can create a computed option here and then add a method here or function for reverse the message, and then it's going to return this dot message. So it's going to reference the message here, split it, reverse and join it. You can use, I guess you could say a reverse message as the value here, instead of just the message. So you don't need to go in and chain these on. So maybe you need to do something in a computed value to go and do that. So here's the original, and here's what the reverse is here. And you can see VM message goodbye, and you can console VM dot reverse message. So you can call it wherever you want inside of your JavaScript as well. So computed, caching versus method.
So here's a method here. Reverse message function returned this message reversed. You can achieve the same thing by invoking it that way, but this is really designed to be a computed property when doing that. Here's another one. So now you could say a return date now. So if we let's try this one out, we'll say, now we're going to grab the whole chunk of code computed. And now we'll scroll down to the bottom, into our code here, see where the methods are. We're going to put a comma and we'll say computed, and then now function return date now. So now we should go into our code and now, right, and reference now in the value there. And now you can see the string of the time that it is of right now. And there it is, as it changes every second.
I think those are in smaller than seconds, milliseconds of time. So there's computed. Now, computed versus watch. Now watch is first time I learned view, I was a little confused. I was like, well, what is computed versus watch? And for some reason, I think this is a common misconception about these things, but they're a very different. And if you think about them going in as very different, I think it'll help you conceive of the idea of watch. And so I'm going to skip over that section and I'm going to go down to watchers. So watchers are this concept of, well, by default, our data is watching, right? We data binded using the V model to an input field. So here they're doing input V model question. And normally we would reference question here, but now they're referencing answer. So if we scroll down to some of the code that they're using, they're saying question watch, or on question, this answer is waiting for you to stop typing this dot get answer.
So they've integrated with as a couple Axios and load dash libraries that are going to do a little bit more, but let's go and just integrate this first part and we'll simplify it for our example. So first thing we're going to have as a question and an answer, and what I'm going to do is clean a little bit of this out because we got a lot of code as you can see going here, and it'd be nicer if we got rid of some of that and let's keep it pretty basic. So I'm going to delete everything up till that idea of app. So that's basically where we're at now. And then I'm going to scroll down to our elements here. It says name, BG, color, text. I'm going to get rid of all of these, except for the panel, which is false. And I'm going to get rid of some of these methods here and I'm going to leave computed.
I think that one's okay, actually, I'll tab this in. So it's every, let's clean this up a little bit, so everything's nice and organized. And again, I'm just using my arrow keys and the tab key to kind of format this a little nicer. That looks a lot better. So now from here, if we go and grab that, watch, we'll say watch, and we'll do this after. So comma watch, and then let's tab this in. So it's nice as well. Get to that last one. There we go. So whenever question changes, this function will return. So question function, new question, this answer, waiting for you to stop typing this dot get answer. So as you can see here, here is input V model question. If we bring this up to the top and say input V model question, we need to set up a question. So I'm going to say question is what color is it?
So that's the question. And whenever that question changes, it's going to go and say this dot answer. Notice the answer here, waiting for you to stop typing. And so we'll go in here to our data and we'll set up an answer just to be default. So there's a default and put a comma to separate these values and then this dot get answer is what we're referencing here. So we'll say this dot answers waiting for you to type, okay, actually we have two of those. Okay. So question is a new question.
This dot answer, waiting for you to type. So now we can specify that inside of our value here. So I have a field and then I'm going to set this field inside of alert. So I'm going to say alert, and this is going to be a div. So I'll say alert, and we'll say alert info. And these are the bootstrap classes, the alert, alert info. And then inside this value here, we can specify the answer, which is the answer here. And then it says this answer waiting for you to stop typing. And then it says this dot get answer, which is going to call a method. But for now we could just say that this is answer.
And then actually, let's see how they're doing this. They're doing this. This D bounce function is provided by low dash, which limits how often a particular expensive operation can be run. So they're basically waiting. So I will just hold off on this so you can kind of get the concept. So, cause we don't actually need that to get the concept down. So class container ID app, we've instantiated the view instance input V model question. That's our question. If we change the question, that's what we're going to do. It's like a Google search. If we change the question, it's going to alert the well as we change it of the question here answered by is default to empty string. But then when it says this dot answer, when we're changing the question, it's going to show the virus. So let's just go and try this out.
Waiting for you to stop typing is what's going to say or refresh the page. It says the answer here. So it looks like we probably have an error in our code. We'll go and says invalid property shorthand initializer. So where did we write anything like that? So this dot answer, new questions. Semi-colon right there. We'll refresh. Line 36 it says, so answer, this is a colon. There we go. And now we refresh. Now it shows that alert box. I don't want it to show that. So I'm going to go and write a V hyphen show and then equals whether or not it has an answer or not. So don't show this unless there's an answer. And now you don't see it at all. Now for that form field, we'll add a class to it, of a form control and then we'll refrehs. Okay. So here it is. What is the color? What color is it? If I change it, you can see it changed the value of answer because it's watching for me to change the value.
And that's what we're after here. So it says, watch the question. When the question is watched, then this dot answer waiting for you. Now I would want to write something on this here says something like dot lazy as it's going to only run after I get done typing and changing the values based on your structure. Yes, you can see there when I stopped typing, then finally stopped. So you might try to use something like lazy in there. You might not. It depends on your need. As if you start typing immediately, it'll say waiting for you to stop typing. Then it's detecting that your watch and that the value of the question has actually changed. Then it's going to go in and do some sort of action. And that could be various sorts of things that you go in and apply inside this action. That could be changing color, that could be changing a value. It could be sending an Ajax request. A bunch of different things you could go and do with watch. Now you can see that's a little bit different than computed as computed is changing the values up almost like a filter and watch is watching the values to see and maybe doing something different to it.