gestion des événements
Répertoire
Modificateur de clé "Code clé"
- Écouter les événements
- Vous pouvez utiliser la directive
v-onpour écouter les événements DOM et exécuter du code JavaScript lorsqu'il est déclenché. - Exemple :
<div id="example-1"> <button v-on:click="counter += 1">Add 1</button> <p>The button above has been clicked {{ counter }} times.</p> </div>var example1 = new Vue({ el: '#example-1', data: { counter: 0 } })Résultat :
- Vous pouvez utiliser la directive
Cependant, de nombreuses logiques de traitement d'événements seront plus compliquées, alors écrivez le code JavaScript directement dans < Ceci n'est pas possible dans la directive code>v-on. Par conséquent v-on peut également recevoir le nom d'une méthode qui doit être appelée.
Exemple : <div id="example-2">
<!-- `greet` 是在下面定义的方法名 -->
<button v-on:click="greet">Greet</button>
</div>
var example2 = new Vue({
el: '#example-2',
data: {
name: 'Vue.js'
},
// 在 `methods` 对象中定义方法
methods: {
greet: function (event) {
// `this` 在方法里指向当前 Vue 实例
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
if (event) {
alert(event.target.tagName)
}
}
}
})
// 也可以用 JavaScript 直接调用方法
example2.greet() // => 'Hello Vue.js!'Résultat : 
v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。
示例：
<div id="example-3">
<button v-on:click="say('hi')">Say hi</button>
<button v-on:click="say('what')">Say what</button>
</div>new Vue({
el: '#example-3',
methods: {
say: function (message) {
alert(message)
}
}
})结果：
事件处理方法
然而许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。
示例：
<button v-on:click="warn('Form cannot be submitted yet.', $event)">
Submit
</button>// ...
methods: {
warn: function (message, event) {
// 现在我们可以访问原生事件对象
if (event) event.preventDefault()
alert(message)
}
}结果：
内联处理器中的方法
除了直接绑定到一个方法，也可以在内联 JavaScript 语句中调用方法：
<!-- 阻止单击事件继续传播 --> <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>
结果：
有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法：
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 --> <!-- 而不会等待 `onScroll` 完成 --> <!-- 这其中包含 `event.preventDefault()` 的情况 --> <div v-on:scroll.passive="onScroll">...</div>
<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` --> <input v-on:keyup.enter="submit">
事件修饰符
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation()
🎜Méthodes dans les processeurs en ligne🎜🎜🎜🎜🎜En plus de vous lier directement à une méthode, vous pouvez également intégrer des instructions JavaScript en appelant une méthode : 🎜<input v-on:keyup.page-down="onPageDown">
<input v-on:keyup.13="submit">
🎜Résultat : 🎜🎜🎜🎜🎜🎜🎜Parfois, il est également nécessaire d'accéder à l'événement DOM d'origine dans le processeur d'instructions en ligne. Vous pouvez le passer dans la méthode en utilisant la variable spéciale $event : 🎜// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112
<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
🎜🎜🎜🎜🎜Modificateur d'événement🎜🎜🎜🎜🎜Appel dans le gestionnaire d'événements event.preventDefault() ou event.stopPropagation() sont des exigences très courantes. Bien que nous puissions facilement implémenter cela dans les méthodes, il est préférable d'avoir des méthodes avec une logique de données pure plutôt que de traiter les détails des événements DOM. 🎜
event.preventDefault() ou event.stopPropagation() sont des exigences très courantes. Bien que nous puissions facilement implémenter cela dans les méthodes, il est préférable d'avoir des méthodes avec une logique de données pure plutôt que de traiter les détails des événements DOM. 🎜Pour résoudre ce problème, Vue.js fournit un modificateur d'événement pour v-on. Comme mentionné précédemment, les modificateurs sont représentés par des suffixes d'instruction commençant par un point. v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。
.stop.prevent.capture.self.once.passive
<!-- 即使 Alt 或 Shift 被一同按下时也会触发 --> <button @click.ctrl="onClick">A</button> <!-- 有且只有 Ctrl 被按下的时候才触发 --> <button @click.ctrl.exact="onCtrlClick">A</button> <!-- 没有任何系统修饰符被按下的时候才触发 --> <button @click.exact="onClick">A</button>
使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用
v-on:click.prevent.self会阻止所有的点击，而v-on:click.self.prevent只会阻止对元素自身的点击。
rrreee2.1.4 新增
不像其它只能对原生的 DOM 事件起作用的修饰符，.once 修饰符还能被用到自定义的组件事件上。如果你还没有阅读关于组件的文档，现在大可不必担心。
2.3.0 新增
Vue 还对应 addEventListener 中的 passive 选项提供了 .passive 修饰符。
这个 .passive 修饰符尤其能够提升移动端的性能。
不要把
.passive和.prevent一起使用，因为.prevent将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive会告诉浏览器你不想阻止事件的默认行为。
按键修饰符
在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
你可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。
在上述示例中，处理函数只会在 $event.key 等于 PageDown 时被调用。
按键码
keyCode的事件用法已经被废弃了并可能不会被最新的浏览器支持。
使用 keyCode
.stop.prevent🎜- 🎜
.capture🎜 - 🎜
.self🎜 - 🎜
. once🎜 - 🎜
.passive🎜
🎜Lors de l'utilisation de modificateurs, l'ordre est important, le code correspondant sera ; générés dans le même ordre. Par conséquent, l'utilisation dev-on:click.prevent.selfempêchera tous les clics, tandis quev-on:click.self.preventempêchera uniquement Empêchera les clics sur l'élément lui-même. 🎜
🎜Nouveau dans la version 2.1.4🎜rrreee🎜Contrairement à d'autres modificateurs qui ne peuvent fonctionner que sur les événements DOM natifs, le modificateur
.once peut également être utilisé dans < personnalisé un href="/js/js-vuejs-components-custom-events.html" target="_blank">événements de composants. Si vous n'avez pas lu la documentation de vos composants, ne vous inquiétez pas maintenant. 🎜🎜2.3.0 nouveau 🎜🎜Vue correspond également à L'option
passive dans addEventListener fournit le modificateur .passive. 🎜rrreee🎜Ce modificateur .passive peut notamment améliorer les performances mobiles. 🎜🎜N'utilisez pas🎜.passiveet.preventensemble car.preventsera ignoré et le navigateur pourrait émettre un message. Vous affichez un avertissement. N'oubliez pas que.passiveindique au navigateur que vous ne souhaitez pas bloquer le comportement par défaut de l'événement. 🎜
🎜
Modificateur de clé
🎜Lorsque nous écoutons des événements au clavier, nous devons souvent vérifier les frappes détaillées. Vue permet d'ajouter des modificateurs de touches pour v-on lors de l'écoute des événements du clavier : 🎜rrreee🎜Vous pouvez directement KeyboardEvent.key Tout nom de clé valide exposé est converti en kebab-case en tant que modificateur. 🎜rrreee🎜Dans l'exemple ci-dessus, la fonction de gestionnaire ne sera appelée que lorsque $event.key est égal à PageDown. 🎜🎜
🎜
Code clé🎜
🎜L'utilisation événementielle de keyCodea été abandonnée et peut ne pas être pris en charge par les derniers navigateurs. 🎜🎜L'utilisation de l'attribut keyCode est également autorisée : 🎜rrreee🎜Afin de prendre en charge les anciens navigateurs si nécessaire, Vue fournit des alias pour les codes clés les plus couramment utilisés : 🎜.enter.enter.tab.delete(捕获“删除”和“退格”键).esc.space.up.down.left.right
有一些按键 (
.esc以及所有的方向键) 在 IE9 中有不同的key值, 如果你想支持 IE9，这些内置的别名应该是首选。
你还可以通过全局 config.keyCodes 对象自定义按键修饰符别名：
系统修饰键
2.1.0 新增
可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。
.ctrl.alt.shift.meta
注意：在 Mac 系统键盘上，meta 对应 command 键 (?)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (?)。在 Sun 操作系统键盘上，meta 对应实心宝石键 (◆)。在其他特定键盘上，尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品，比如 Knight 键盘、space-cadet 键盘，meta 被标记为“META”。在 Symbolics 键盘上，meta 被标记为“META”或者“Meta”。
例如：
rrreee请注意修饰键与常规按键不同，在和
keyup事件一起用时，事件触发时修饰键必须处于按下状态。换句话说，只有在按住ctrl的情况下释放其它按键，才能触发keyup.ctrl。而单单释放ctrl也不会触发事件。如果你想要这样的行为，请为ctrl换用keyCode：keyup.17。
.exact 修饰符
2.5.0 新增
.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。
2.2.0 新增
.left🎜
.tab🎜🎜🎜.delete (capture "supprimer" et Touche "Retour arrière")🎜🎜🎜.esc🎜🎜🎜.space🎜🎜🎜.up < /code>🎜🎜🎜.down🎜🎜🎜.left🎜🎜🎜.right code>🎜🎜Certaines touches (🎜Vous pouvez également passer l'objet global.escet toutes les touches fléchées) ont des valeurskeydifférentes dans IE9, si vous souhaitez prendre en charge IE9, ces alias intégrés doivent être préférés. 🎜
config.keyCodes Alias de modificateur de clé personnalisé : 🎜rrreee🎜🎜
Touche de modification système < /strong>
🎜2.1.0 Nouveau 🎜🎜Vous pouvez utiliser les modificateurs suivants pour déclencher la souris ou le clavier uniquement lorsque la touche correspondante est enfoncée. auditeur. 🎜🎜🎜🎜
.ctrl🎜🎜🎜.alt🎜🎜🎜.shift🎜 🎜🎜.meta🎜🎜Remarque : Sur le clavier du système Mac, méta correspond à la touche de commande (?). Sur le clavier du système Windows, la méta correspond à la touche du logo Windows (?). Sur les claviers du système d'exploitation Sun, méta correspond à la touche gemme solide (◆). Sur certains autres claviers, notamment ceux des machines MIT et Lisp, et leurs successeurs, comme le clavier Knight et le clavier space-cadet, la méta est marquée comme « META ». Sur le clavier symbolique, la méta est marquée comme "META" ou "Meta". 🎜🎜Par exemple : 🎜rrreee
🎜Veuillez noter que les touches de modification sont différentes des touches normales. Lorsqu'elles sont utilisées avec l'événement🎜keyup, la touche de modification doit être enfoncée. lorsque l'événement est déclenché. En d'autres termes,keyup.ctrlne peut être déclenché qu'en relâchant d'autres touches tout en maintenantctrlenfoncé. Le simple fait de relâcherctrlne déclenchera pas l'événement. Si vous souhaitez ce comportement, utilisez plutôtkeyCodepourctrl:keyup.17. 🎜
🎜
这些修饰符会限制处理函数仅响应特定的鼠标按钮。 你可能注意到这种事件监听的方式违背了关注点分离 (separation of concern) 这个长期以来的优良传统。但不必担心，因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上，它不会导致任何维护上的困难。实际上，使用 Ces modificateurs limitent la fonction du gestionnaire à répondre uniquement à des boutons spécifiques de la souris. Vous remarquerez peut-être que cette façon d'écouter les événements viole la longue tradition de séparation des préoccupations. Mais ne vous inquiétez pas, car tous les gestionnaires d'événements et expressions Vue.js sont strictement liés au ViewModel de la vue actuelle, cela ne posera aucune difficulté de maintenance. En fait, utiliser .exact Modificateurs🎜🎜2.5.0 Nouveau 🎜
🎜.exact< Le / Le modificateur code> vous permet de contrôler les événements déclenchés par une combinaison précise de modificateurs système. 🎜rrreee🎜
🎜 🎜 2.2.0 Nouveau 🎜
🎜🎜🎜.left🎜.right.right.middle为什么在 HTML 中监听事件?
v-on.middlePourquoi écouter les événements en HTML ?
v-on présente plusieurs avantages :
