# Events / v-on
Use the v-on: directive to listen to DOM events (or the shortcut @).
You can chain a key modifier like .enter
# Click event
# Input:
<template>
<div><button @click="alertMe">Click me</button><br /></div>
</template>
<script>
export default {
methods: {
alertMe: function() {
alert('Hey All You Cool Cats And Kittens.')
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# Output:
# KeyUp event
# Input:
<template>
<div>
<p>
<input
@keyup.enter="alertTheMessage"
type="text"
v-model="myMessage"
placeholder="Type something and press Enter"
/>
</p>
</div>
</template>
<script>
export default {
data() {
return {
myMessage: ''
}
},
methods: {
alertTheMessage: function() {
alert(this.myMessage)
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27