Manejo de eventos en Vue3

Podemos usar la directiva v-on para escuchar eventos del DOM y así ejecutar código JavaScript.

v-onLa directiva puede abreviarse como@el símbolo @.

Formato de sintaxis:

v-on:click="methodName"
o 
@click="methodName"

v-on

<div id="app"> <button @click="counter += 1">Aumentar en 1</button> <p>Este botón ha sido clicado {{ counter }} veces.</p> </div> <script> const app = { data() { return { counter: 0 } } } Vue.createApp(app).mount('#app') </script>

Pruébalo »

Normalmente, necesitamos usar un método para llamar a un método JavaScript.

v-on puede recibir un método definido para llamarlo.

v-on

<div id="app"> <!--`greet` es el nombre del método definido a continuación.--> <button @click="greet">Haz clic en mí</button> </div> <script>const app = { data() { return { name: 'Ejemplo' } }, methods: { greet(event) { // El `this` dentro de `methods` apunta a la instancia activa actual alert('Hello ' + this.name + '!') // `event` es un evento DOM nativo if (event) { alert(event.target.tagName) } } } } Vue.createApp(app).mount('#app')</script>

Pruébalo »

Además de vincular directamente a un método, también se pueden usar declaraciones JavaScript en línea:

v-on

<div id="app"> <button @click="say('hi')">Say hi</button> <button @click="say('what')">Say what</button> </div> <script> const app = { data() { }, methods: { say(message) { alert(message) } } } Vue.createApp(app).mount('#app') </script>

Pruébalo »

El controlador de eventos puede tener múltiples métodos, separados por el operador coma:

v-on

<div id="app"> <!--Estos dos métodos, one() y two(), se ejecutarán en el evento de clic del botón.--> <button @click="one($event), two($event)">Haz clic en mí</button> </div> <script>const app = { data() { }, methods: { one(event) { alert("Lógica del primer controlador de eventos...") }, two(event) { alert("Lógica del segundo controlador de eventos...") } } } Vue.createApp(app).mount('#app')</script>

Pruébalo »

Modificadores de eventos

Vue.js proporciona modificadores de eventos para v-on a fin de manejar los detalles de los eventos del DOM, como: event.preventDefault() o event.stopPropagation().

Vue.js mediante el punto.que representa el sufijo de la directiva para invocar los modificadores.

  • .stop- Evitar la propagación
  • .prevent- Evitar el evento predeterminado
  • .capture- Evitar la captura
  • .self- Escuchar solo los eventos que se disparan en ese elemento
  • .once- Disparar solo una vez
  • .left- Evento del botón izquierdo
  • .right- Evento del botón derecho
  • .middle- Evento de la rueda central
<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联  -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

<!-- click 事件只能点击一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>

Modificadores de teclas

Vue permite añadir modificadores de teclas a v-on al escuchar eventos de teclado:

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">

Recordar todos los keyCode es difícil, por lo que Vue proporciona alias para las teclas más comunes:

<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">

Todos los alias de teclas:

  • .enter
  • .tab
  • .delete(captura las teclas "Delete" y "Backspace")
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

Teclas modificadoras del sistema:

  • .ctrl
  • .alt
  • .shift
  • .meta

Modificadores de botones del ratón:

  • .left
  • .right
  • .middle

Ejemplo

<p><!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

Modificador .exact

.exactEl modificador permite controlar los eventos que se desencadenan por combinaciones exactas de modificadores del sistema.

Ejemplo

<!-- Se dispara incluso si Alt o Shift se presionan al mismo tiempo -->
<button @click.ctrl="onClick">A</button>

<!-- Se dispara solo cuando Ctrl está presionado (y solo Ctrl) -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- Se dispara solo cuando no se presiona ningún modificador del sistema -->
<button @click.exact="onClick">A</button>
Otras extensiones