As with all framework, Vue lets us add reactivity to our functions and web sites by means of occasions. The wonderful thing about Vue occasions is that they mimic vanilla Javascript, so all of the occasions you are used to utilizing in Javascript may also be utilized in Vue.
Vue Fundamentals
In case you are model new to Vue, I might advocate studying my information on making your first Vue application, or creating components in Vue first.
Occasions in Vue
Probably the most fundamental occasion ceaselessly utilized in Vue, in addition to in most Javascript, is click on. The part beneath is a straightforward counter which will increase by 1 each time the button is clicked. To do that, we use an inline @click on occasion:
<script>
export default {
knowledge() {
return {
counter: 0
}
}
}
</script>
<template>
<button @click on="++counter">
{{ counter }}
</button>
</template>
Since we will write inline Javascript straight into our occasions, we will merely write ++counter to extend our counter knowledge. As such, the above will improve counter any time we click on the button, and show that in our button factor.
As talked about earlier than, we aren’t simply restricted to @click on. All different Javascript occasions work too, in the identical format. Which means you should use:
@keydown@mousedown@pointerdown@pointerup@scroll- and so forth..
We aren’t simply restricted to working Javascript inline in our occasions. We will set off a technique or perform, if one is outlined in our Vue Javascript. Right here is identical code utilizing a technique as a substitute:
<script>
export default {
knowledge() {
return {
counter: 0
}
},
strategies: {
incrCounter: perform() {
++this.counter
}
}
}
</script>
<template>
<button @click on="incrCounter">
{{ counter }}
</button>
</template>
v-on vs @ in Vue
You’ll have seen occasions written as v-on:click on vs @click on. Each of those imply the identical factor, and are interchangable, so use whichever one you might be snug with!
Mouse Particular EVents
We will additional modify any mouse occasions through the use of the left, center, and proper modifiers. If we’re firing a mouse associated occasion, like click on, or mousedown, then mousedown.proper will solely observe proper mouse clicks, or mousedown.center will solely observe center mouse clicks.
<!-- left mouse clicks -->
<button @mousedown.left="incrCounter">
{{ counter }}
</button>
<!-- proper mouse clicks -->
<button @mousedown.proper="incrCounter">
{{ counter }}
</button>
<!-- center mouse clicks -->
<button @mousedown.center="incrCounter">
{{ counter }}
</button>
Utilizing Occasion Information in Vue Occasions
Typically, we need to entry the occasion or e object in our occasions. In conditions the place we merely need to entry e itself with no different arguments, we do not have to say e – it’s mechanically handed on to the perform. For instance, the code beneath will nonetheless console log e.clientX and e.clientY every time the consumer clicks the button:
<script>
export default {
knowledge() {
return {
counter: 0
}
},
strategies: {
incrCounter: perform(e) {
++this.counter
console.log(e.clientX, e.clientY)
}
}
}
</script>
<template>
<button @click on="incrCounter">
{{ counter }}
</button>
</template>
Issues turn into slightly tricker when you might have greater than 2 arguments. In these conditions, there are two methods to entry occasion knowledge. Both encapsulate the perform, or use the predefined $occasion variable.
For instance, for instance we need to improve the counter by a customized quantity, and proceed to console log e.clientX and e.clientY. That is achievable through the use of $occasion to move the occasion knowledge to our perform:
<script>
export default {
knowledge() {
return {
counter: 0
}
},
strategies: {
incrCounter: perform(quantity, e) {
++this.counter
console.log(e.clientX, e.clientY)
}
}
}
</script>
<template>
<button @click on="incrCounter(5, $occasion)">
{{ counter }}
</button>
</template>
Alternatively, we may additionally move the e object on to the perform as follows:
<button @click on="(e) => incrCounter(5, e)">
{{ counter }}
</button>
Customized Key Occasions in Vue Occasions
Vue tries to simplify occasions as a lot as doable. Should you’ve ever made key occasions prior to now, you may know that ceaselessly we solely need to entry a particular key. Subsequently, with key occasions, we will tie frequent keys on to the occasion. For instance, on this enter, we’ll fireplace an occasion any time the consumer presses a keyup occasion:
<enter @keyup="someFunction" />
However if we need to fireplace the @keyup solely when the consumer presses enter, we will do this with the next occasion:
<enter @keyup.enter="someFunction" />
We will use any defined keyboard key value, transformed to kebab case. For instance, PageDown is a keyboard key outlined worth, however in Vue we write page-down:
<enter @keyup.page-down="someFunction" />
Lastly, Vue has outlined some generally used keys which aren’t outlined values. These are enter, tab, delete, esc, area, up, down, left, proper, in addition to the keyboard modifiers ctrl, alt, shift and meta.
Keyboard modifiers and keys
We simply talked about the keyboard modifiers ctrl, alt, shift and meta, and these can truly be mixed with our key values from earlier than, so as to add one other layer of performance. For instance, the beneath will fireplace the keydown occasion, and due to this fact someFunction, every time shift and enter are each pressed inside the enter:
<enter @keydown.shift.enter="someFunction" />
Precise modifier
Lastly, we will be sure that just one key’s being pressed through the use of precise. The beneath, for instance, will solely fireplace if enter is pressed alone. If enter is pressed with a mixture of different keys, the occasion is not going to fireplace:
<enter @keydown.enter.precise="someFunction" />
Ultimate Ideas
Occasion management in Vue is an important factor to constructing any full Vue utility. I hope you have loved this information. You could find extra Vue content here.
