Comment implémenter la surveillance des événements vuejs

Dans vuejs, vous pouvez utiliser l'instruction "v-on" pour implémenter la surveillance des événements. Cette instruction est utilisée pour lier les écouteurs d'événements ; Modèle d'étiquette. Instruction, utilisez JavaScript pour définir le code qui doit être exécuté lors du déclenchement.

L'environnement d'exploitation de ce tutoriel : système Windows 7, vue version 2.9.6, ordinateur DELL G3.

Une fois le rendu du modèle terminé, la liaison et la surveillance des événements peuvent être effectuées. La directive v-on est utilisée pour surveiller les événements DOM et est généralement utilisée directement dans le modèle.

<button v-on:click="say">Say</button>

Méthode et processeur d'instructions en ligne

Liez la méthode dans les méthodes d'attribut de l'option de force via v-on en tant que gestionnaire d'événements. Le post-paramètre v-on: accepte tous les noms d'événements natifs.

    <button v-on:click = "say">Say</button>
    var vm = new Vue({
        el: "#app",
        data: {
            msg:"hello vue.js"
        },
        methods:{
            say:function(){
                alert(this.msg);
            }
        }
    })

v-on abréviation : @. @click="say"

v-on prend en charge les instructions JavaScript en ligne, mais une seule instruction.

    <button v-on:click = "sayFrom(&#39;from param&#39;)">Say</button>
    var vm = new Vue({
        el: "#app",
        data: {
            msg:"hello vue.js"
        },
        methods:{
            sayFrom:function(from){
                alert(this.msg + &#39;&#39; + from);
            }
        }
    })

Lorsque vous liez directement des fonctions de méthodes et du JavaScript en ligne avec des salles, vous devrez peut-être obtenir l'objet d'événement DOM natif

   <button v-on:click = "showEvent">Event</button> 
   <button v-on:click = "showEvent($event)">event</button>
   <button v-on:click = "showEvent()">Say</button>  //这样写获取不到event
    var vm = new Vue({
        el: "#app",
        methods:{
            showEvent:function(event){
                console.log(event);
            }
        }
    })

Vous pouvez lier plusieurs fonctions d'événement identiques au même élément via v-on, et l'ordre d'exécution est une exécution séquentielle .

Modificateurs d'événement

1.stop : appelez event.stopPropagation().

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>

2 .prevent : appelez event.preventDefault().

    <!-- 提交事件不再重载页面 -->
    <form v-on:submit.prevent="onSubmit"></form>
    <!-- 修饰符可以串联  -->
    <a v-on:click.stop.prevent="doThat"></a>
    <!-- 只有修饰符 -->
    <form v-on:submit.prevent></form>

3. auditeur.

  <!-- 添加事件侦听器时使用事件捕获模式 -->
    <div v-on:click.capture="doThis">...</div>

4.self : Le rappel n'est déclenché que lorsque l'événement est déclenché depuis l'élément d'écoute lui-même.

   <!-- 只当事件在该元素本身（比如不是子元素）触发时触发回调 -->
    <div v-on:click.self="doThat">...</div>

5.once :

 <!-- 点击事件将只会触发一次 -->
    <a v-on:click.once="doThis"></a>

Lors de l'utilisation des modificateurs, l'ordre est important ; les codes correspondants seront générés 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.

   //例子
    var vm = new Vue({
        el: '#app',
        methods:{
            saySelf(msg) {
                alert(msg);
            }
        }
    });
    //HTML代码
    <div v-on:click="say(&#39;click from inner&#39;)" v-on:click.self="saySelf(&#39;click from self&#39;)">
        <button v-on:click="saySelf(&#39;button click&#39;)">button</button>
        <button v-on:click.stop="saySelf(&#39;just button click&#39;)">button</button>
    </div>

Modificateur de valeur de clé

Lorsque vous écoutez des événements de clavier, vous devez surveiller les valeurs de clé communes.

    <input v-on:keyup.13 = "submit" />  //监听input的输入，当输入回车时触发submit函数。

Il est difficile de se souvenir de tous les keyCide, donc Vue fournit des alias pour les clés les plus couramment utilisées.

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

.enter
.tab
.delete (capture les touches "supprimer" et "retour arrière")
.esc
.space
.up
.down
.left
.right
Accessible via la configuration globale. Objet keyCodes Alias ​​du modificateur de valeur de clé personnalisé :

    // 可以使用 v-on:keyup.f1
    Vue.config.keyCodes.f1 = 112

Différences par rapport à la liaison d'événement traditionnelle

1. Lorsque le ViewModel est détruit, tous les gestionnaires d'événements sont automatiquement supprimés, nous évitant ainsi d'obtenir des événements liés au DOM, puis de les dissocier dans des circonstances spécifiques.

2. Découplage. Le code ViewModel est un code purement logique et n'a rien à voir avec le DOM, ce qui nous est utile pour écrire des cas de test automatisés.

vue.extend()

Afin de réutiliser les sous-composants, vue.js fournit la méthode Vue.extend(options), qui crée une "sous-classe" du constructeur de base de Vue, un objet d'options de paramètre et déclare directement l'instance Vue Les objets paramètres sont fondamentalement les mêmes.

    var Child = Vue.extend({
        teplate:'#child', //不同的是，el和data选项需要通过函数返回值赋值，避免多个组件实例共用一个数据
        data:function(){
            return {
                ...
            }
        },
        ...
    })
    Vue.component('child',child)  //全局注册子组件
    <child ...></child>  //子组件在其他组件内的调用方式

Recommandations associées : "Tutoriel 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!