Un article analysant brièvement certains modificateurs d'événements vue

Cet article vous apporte des connaissances pertinentes sur le front-end. Il parle principalement de certains modificateurs d'événements dans Vue. Les amis intéressés peuvent y jeter un œil. J'espère qu'il sera utile à tout le monde.

J'ai rencontré l'événement clavier de vue lors du développement du projet. Voici l'extrait de code du projet :

<div class="query-form-left">
   <i-Form :model="formItem" inline>
       <form-item  >
           <i-input style="width:200px"  placeholder="名称" v-model="formItem.name" @keyup.enter.native="queryTableDataByAction"></i-Input>
       </form-item>
       <form-item>
           <i-input placeholder="负责人" v-model="formItem.ownerUserName" @keyup.enter.native="queryTableDataByAction"></i-Input>
       </form-item>
       <form-item>    
           <i-Button type="ghost" @click="queryTableDataByAction">查询</i-Button>
       </form-item>
   </i-Form></div>

Dans l'extrait de code, on constate qu'il y a toujours . naitvie après l'événement clavier. , je n'ai pas compris la raison au début. Après vérification, j'ai découvert que c'était parce que vue utilise son propre mécanisme de livraison d'événements, par exemple, @click<.> sont encapsulés par vue . Si vous souhaitez écouter un événement natif sur l'élément racine d'un composant, vous devez utiliser le modificateur v-on <code>.native.naitvie，刚开始并不明白是什么原因，查证一番，发现是因为vue 使用的是一套自己的事件传递机制，例如 @click 等事件是经过 vue 封装的。如果想在某个组件的根元素上监听一个原生事件，就要使用 v-on 的修饰符 .native

在上面的代码片段中@keyup.enter 是写在一个封装好的组件上（项目中用的的 iView组件 ），因此，在一些实际上处理 DOM 原生事件的上需要添加额外的标识符.native，如果是直接在input上使用就不需要添加了。

此外，vue 提供了很多的 修饰符。

1、事件修饰符

.stop 阻止单击事件继续传播
.prevent 提交事件不再重载页面
.capture 添加事件监听器时使用事件捕获模式， 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理
.self 只当在 event.target 是当前元素自身时触发处理函数 ，即事件不是从内部元素触发的
.once 点击事件将只会触发一次
.passive 滚动事件的默认行为 (即滚动行为) 将会立即触发 ，包含 event.preventDefault() 的情况

注：修饰符可以串联 ,使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 @click.prevent.self 会阻止所有的点击，而 @click.self.prevent 只会阻止对元素自身的点击。

2、按键修饰符

可以直接用keycode，但是较难记全，所以Vue提供 了常用的按键别名

.enter 回车键
.tab 制表空格键
.delete (捕获“删除”和“退格”键)
.esc 退出
.space 空格键
.up 向上键
.down 向下键
.left 向左键
.right 向右键

3、系统修饰键

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

.ctrl .alt .shift .meta

dans l'extrait de code ci-dessus @keyup.enter est écrit sur un composant encapsulé (le <a href="https://www.php.cn/link/7cacb56f54aec341efbcbab4c267db28">composant iView <p> utilisé dans le projet), donc, dans certains cas, il traite réellement le DOM Un identifiant supplémentaire <code>.native doit être ajouté à l'événement natif. S'il est utilisé directement sur input, il n'est pas nécessaire de l'ajouter.

De plus, vue propose de nombreux modificateurs.

1. Modificateurs d'événement

.stop empêche l'événement de clic de continuer à se propager .prevent Soumettez l'événement et ne rechargez plus le page.capture Utilisez le mode de capture d'événements lors de l'ajout d'écouteurs d'événements, c'est-à-dire que les événements déclenchés par l'élément lui-même sont d'abord traités ici, puis transmis aux éléments internes pour traitement.self Uniquement lorsque La fonction de gestionnaire est déclenchée lorsque event.target est l'élément actuel lui-même, c'est-à-dire que l'événement n'est pas déclenché à partir d'un élément interne<path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><code>.once L'événement click ne sera déclenché qu'une seule fois .passive L'événement scroll Le comportement par défaut (c'est-à-dire le comportement de défilement) sera déclenché immédiatement, y compris dans le cas de event.preventDefault()

Remarque :Les modificateurs peuvent être concaténés . Lors de l'utilisation de modificateurs, l'ordre est important ; le code correspondant sera généré dans le même ordre. Par conséquent, l'utilisation de @click.prevent.self empêchera tous les clics, tandis que @click.self.prevent empêchera uniquement les clics sur l'élément lui-même. 2. Modificateurs de touches

Vous pouvez utiliser le code clé directement, mais il est difficile de tout mémoriser, donc Vue fournit des alias de touches couramment utilisés🎜🎜.enter Touche Entrée 🎜 .tab Touche d'espacement de tabulation 🎜.delete (capture les touches "supprimer" et "retour arrière") 🎜.esc Quitter 🎜 . espace Barre d'espace 🎜.up Touche haut 🎜.down Touche bas 🎜.left Touche gauche 🎜 .right Touche droite🎜🎜<strong>3. Touches de modification du système</strong>🎜🎜 Vous pouvez utiliser les modificateurs suivants pour implémenter un écouteur qui déclenche des événements de souris ou de clavier uniquement lorsque la touche correspondante est enfoncée. 🎜🎜<code>.ctrl .alt .shift .meta🎜🎜Seuls certains événements de vue sont répertoriés ici Modificateurs , pour une introduction plus détaillée aux modificateurs, veuillez consulter la documentation officielle de vue 🎜🎜🎜 Résumez un peu chaque jour... Gagnez un peu chaque jour... Faites un peu de progrès chaque jour... (＾－＾)🎜 🎜🎜🎜🎜🎜🎜 🎜🎜🎜Apprentissage recommandé : "🎜Tutoriel vidéo vue.js🎜"🎜🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!