Processeur de méthode
Vous pouvez utiliser la commande V-on pour écouter les événements DOM:
<div id = "Exemple"> <Button V-on: cliquez sur = "saluer"> saluer </fontificateur> </div>
Nous lions un gestionnaire d'événements de clic à un salut de méthode. Ce qui suit est la méthode définie dans l'instance Vue:
var vm = new vue ({el: '#example', data: {name: 'vue.js'}, // définir les méthodes dans l'objet `Methods`: {saluer: fonction (événement) {// dans la méthode` Cet point vers VM alert ('hello' + this.name + '!') // `event` est un événement natif de Dom allert (event.target. }}) // Vous pouvez également appeler la méthode vm.greet () dans JavaScript Code // -> 'Hello Vue.js!'Testez-le vous-même
Processeur de déclaration en ligne
En plus de la liaison directe à une méthode, vous pouvez également utiliser des instructions JavaScript en ligne:
<div id = "Example-2"> <Button V-on: cliquez sur = "Say ('Hi')"> Dites Hi </futton> <Button V-on: cliquez sur = "Say ('What')"> Dites ce que </utton> </div> new Vue ({el: '# Exemple-2', méthodes: {dire: fonction (msg) {alert (msg)}}})Semblable aux expressions en ligne, le gestionnaire d'événements est limité à une déclaration.
Parfois, il est également nécessaire d'accéder aux événements natifs DOM dans le processeur de déclaration en ligne. Vous pouvez utiliser l'événement Special Variable $ pour le transmettre dans la méthode:
<Button V-on: click = "Say ('Hello!', $ Event)"> soumettre </fontificateur>
// ... Méthodes: {Say: function (msg, événement) {// Nous pouvons maintenant accéder à l'événement de l'objet de l'événement natif.PreventDefault ()}}Modificateur d'événement
Dans les processeurs d'événements, Event.PreventDefault () ou Event.Stoppropagation () est souvent nécessaire. Bien que nous puissions facilement le faire dans une méthode, il serait préférable que la méthode soit une logique de données pure sans gérer les détails de l'événement DOM.
Pour résoudre ce problème, Vue.js fournit à V-on deux modificateurs d'événements: .prevent et .stop. Vous souvenez-vous que le modificateur est le suffixe d'instructions qui commence par le point?
<! - Empêchez l'événement de clic de Bubbled -> <a V-on: click.stop = "dothis"> </a> <! - Soumettre l'événement ne surcharge plus la page -> <formulaire v-on: soumed.prevent = "onSubmit"> </ form> <! - Les modificateurs peuvent être concatenés -> <a V-on: click.stop.prevent = "Dothat"> <! v-on: soumed.prevent> </ form>
1.0.16 Ajout de deux modificateurs supplémentaires:
<! - Utilisez le mode Capture lors de l'ajout d'écouteurs d'événements -> <div v-on: click.capture = "dothis"> ... </div> <! - Le rappel est déclenché uniquement lorsque l'événement est déclenché sur l'élément lui-même (pas un élément enfant) -> <div V-on: click.elf = "dothat"> ... </v>
Modificateur clé
Lors de l'écoute des événements du clavier, nous devons souvent détecter le Keycode. Vue.js permet d'ajouter des modificateurs de clés à V-on:
<! - VM.SUBMIT () est appelé uniquement lorsque Keycode est 13 -> <entrée v-on: keyup.13 = "soumettre">
N'oubliez pas que tous les cocodes de keys sont difficiles, Vue.js fournit un alias pour les clés les plus couramment utilisées:
<! - Identique à ci-dessus -> <entrée v-on: keyup.enter = "soumi"> <! - Syntaxe abréviation -> <input @ keyup.enter = "soumi">
Tous les alias clés:
•entrer
•languette
•supprimer
•Échap
•espace
•en haut
•vers le bas
•gauche
•droite
1.0.8+: prend en charge l'alias de clé unique.
1.0.17+: vous pouvez personnaliser l'alias clé:
// vous pouvez utiliser @ keyup.f1vue.directive ('on'). Keycodes.f1 = 112Pourquoi écouter des événements en HTML?
Vous avez peut-être remarqué que ce type de méthode de surveillance des événements va à l'encontre du concept traditionnel de "séparation de préoccupation". Ne vous inquiétez pas, car toutes les méthodes et expressions de traitement des événements Vue.js sont strictement liées au point de vue de la vue actuelle, et cela ne provoquera aucune difficulté de maintenance. En fait, il y a plusieurs avantages à utiliser V-on:
1. Scannez le modèle HTML et vous pouvez facilement localiser les méthodes correspondantes dans le code JavaScript.
2. Parce que vous n'avez pas à lier manuellement les événements en JavaScript, votre code ViewModel peut être une logique très pure, complètement découplée du DOM, ce qui facilite le test.
3. Lorsqu'un ViewModel est détruit, tous les processeurs d'événements seront automatiquement supprimés. Vous n'avez pas à vous soucier de la façon de les nettoyer vous-même.
Cet article a été compilé dans le tutoriel d'apprentissage des composants frontaux "Vue.js", et tout le monde est le bienvenu pour apprendre et lire.
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.