OverVue.dev

# 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>

  
        Copied!
1
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>

  
        Copied!
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

# Output:

# See the official Vue.js Doc

← Conditional / v-if →