modificador de eventos
.stop evita que el evento continúe propagándose.prevent
evita el comportamiento predeterminado de
la etiqueta.capture usa el modo de captura de eventos, es decir, el evento desencadenado por el elemento mismo se procesa aquí primero y luego se entrega al elemento interno para procesamiento.self
solo cuando event.target es el elemento actual El controlador se activa cuando
el evento mismo.once solo se activará una
vez.passive le dice al navegador que no desea evitar el comportamiento predeterminado del evento
<!-- 阻止单击事件继续传播 -->
<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>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成 -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>
Al usar modificadores, el orden es importante, el código correspondiente se generará en el mismo orden. Por lo tanto, usar v-on:click.prevent.self evitará todos los clics, y v-on:click.self.prevent solo evitará los clics en el elemento mismo.
En segundo lugar, el modificador de v-model
1 .perezoso
Por defecto, v-model sincroniza el valor y los datos del cuadro de entrada. Este modificador se puede cambiar para resincronizar en el evento de cambio.
<input v-model.lazy="msg">
2 .número
Convierta automáticamente la entrada del usuario a tipo numérico
<input v-model.number="msg">
❤️ .recortar
Filtre automáticamente los espacios iniciales y finales ingresados por el usuario
<input v-model.trim="msg">
3. Modificadores para eventos de teclado
En nuestro proyecto, a menudo necesitamos escuchar algunos eventos del teclado para activar la ejecución del programa, y Vue permite agregar modificadores de teclas al escuchar:
<input v-on:keyup.13="submit">
Para algunas claves de uso común, también se proporcionan alias de clave:
<input @keyup.enter="submit"> <!-- 缩写形式 -->
Todos los alias clave:
.enter
.tab
.delete (para capturar las teclas de borrar y retroceder)
.esc
.espacio
.arriba
.abajo .izquierda
.derecha teclas
modificadoras
:
.ctrl
.alt
.shift
.meta
<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
A diferencia de los alias de tecla, cuando se usan teclas modificadoras con el evento keyup, se debe presionar la tecla normal cuando se genera el evento. Para decirlo de otra manera: si se activa keyup.ctrl, las otras teclas deben soltarse mientras se presiona ctrl; soltar ctrl solo no activará el evento.
<!-- 按下Alt + 释放C触发 -->
<input @keyup.alt.67="clear">
<!-- 按下Alt + 释放任意键触发 -->
<input @keyup.alt="other">
<!-- 按下Ctrl + enter时触发 -->
<input @keydown.ctrl.13="submit">