Event Listeners

main Documentación oficial Licencia MITDescargado el 2026-08-02

Event Listeners#

We can listen to DOM events using the v-on directive:

<button v-on:click="increment">{{ count }}</button>

Due to its frequent use, v-on also has a shorthand syntax:

<button @click="increment">{{ count }}</button>

Here, `increment` references a function declared using the `methods` option:

```js{7-12} export default { data() { return { count: 0 } }, methods: { increment() { // update component state this.count++ } } }

</div>
<div class="html">

```js{7-12}
createApp({
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      // update component state
      this.count++
    }
  }
})

Inside a method, we can access the component instance using `this`. The component instance exposes the data properties declared by `data`. We can update the component state by mutating these properties.

Here, `increment` is referencing a function declared in `

</div>

<div class="html">

Here, `increment` is referencing a method in the object returned from `setup()`:

```js{$}
setup() {
  const count = ref(0)

  function increment(e) {
    // update component state
    count.value++
  }

  return {
    count,
    increment
  }
}

Inside the function, we can update the component state by mutating refs.

Event handlers can also use inline expressions, and can simplify common tasks with modifiers. These details are covered in Guide - Event Handling.

Now, try to implement the increment methodfunction yourself and bind it to the button using v-on.