All language subtitles for 11. Events & Methods

Now we learned how to listen to events.

Now here's one important thing.

Currently, I'm updating the counter here in my HTML code.

In the Vue control parts, but in the HTML code

and it's generally is considered a bad

or not optimal practice to do that.

You don't wanna put too much logic into your HTML code.

Instead, the HTML code should really

just be about outputting stuff.

Logic like this, even though it's not too complex,

should typically go into your JavaScript code.

Now how could we get this logic into our JavaScript code?

Well, we wanna do something on every click.

What do you typically use

if you wanna do something at a certain point of time,

potentially in a repeated way?

Well, you need a function that can be called.

You need a function,

which you can call when the Add button is clicked

and you need a function which you can call

when the Reduce button is clicked.

Now of course, we could specify a function here, add,

and there, try to set counter equal to counter plus one.

But for multiple reasons,

this wouldn't work

for one counter is not a globally available variable,

it is a data property,

hence it's not available here.

In addition, even if it would be available

for whatever reason,

add now is a globally created function.

But in your Vue controlled HTML code,

you can't use such a function.

You can only use in this Vue controlled HTML part,

what is defined in your Vue app.

And that's why we use methods for that,

and we did already learn about methods before.

Now, we don't just use methods to manually call them

as we did before, we can also use methods to connect them,

to event listeners and let Vue call them for us

when a certain event occurs.

For example, here, we can add a add method,

though this name here is totally up to you,

you could also name it add counter or increment

or whatever you want, but I'll name it add.

And in here, you can now update this counter,

just important as you learned with this counter.

In your JavaScript code,

you refer to your data properties with this.

This counter plus plus,

or the longer form this counter

equals this counter plus one, it's the same.

And with that, we have a method which we can call

to update our counter.

Now this method doesn't return anything

because it doesn't have to.

We'll not use the method like we did before

to dynamically output something here.

Instead, we're using it to run it when a click occurs

and therefore, this does need to return anything

because the click listener doesn't want a return value.

So now here, we can call add like this

and if I now saved it and reload, I can click add

and it still works because we're executing the same code

just in a different way.

And this is actually the batter way of doing it,

putting your logic into JavaScript

and just pointing at that logic.

That is generally considered better,

even though technically, it here works in the same way.

But consider cases where you have more complex logic

and it quickly makes sense that you should put that logic

into JavaScript and not into HTML.

So it's not bad to get started with that as a habit,

right from the start.

Now besides calling add like this, by the way,

you can also just point at it

so that you tell Vue, "Hey, that's the name of the function

"or of the method to be precise.

"You should execute when a click occurs."

Vue accepts both, you explicitly calling it like this,

or you pointing at it,

Vue detects what you're doing,

and it will do the right thing in both cases.

Now typically, you just wanna point at it

since that is closer to vanilla JavaScript

and how you would set up an event listener there

but it is worth noting that both syntaxes are allowed

as you can see here.

Well, and now let's do the same for reducing our counter.

Of course, try this on your own.

Here's a quick pause for you to do that

and there after, we'll do it together.

Were you successful?

Well, again, it's pretty much the same code.

We can add a reduce method,

again, this name is up to you

and in there, we just set this counter

equal to this counter minus one, or we use the shorter form,

which looks like this, which is also okay.

And now in here on this second button,

we can call reduce like this, or as I just mentioned,

just point at it, both is accepted.

And now we've got our working buttons

with one important change,

now the logic is outsourced into JavaScript,

which is where your logic should be

and the HTML code is cleaner

and this is better.

This is considered to be better,

so it is a good idea to get started with this approach

and with this pattern.

Now that is how we can use methods.

We cannot just use them in curly braces or with the bind

to dynamically derive a value we wanna output

but we can also use them with event listeners

to define codes that should be executed

when the event occurs.

And in reality, you will more often use methods

to connect them to events,

than you will use them

to output something dynamically derived.

I just showed this before to show you that it's possible

and to introduce methods

but typically, you'll use them like this

in combination with event listeners.