Analyse d'attribut de la liaison d'événement simple de la directive v-on dans Vue (avec code)

Cet article vous présente l'analyse des attributs de la liaison d'événement simple de l'instruction v-on dans Vue (avec code). Il a une bonne valeur de référence et j'espère qu'il pourra aider les amis dans le besoin.

Préface

L'article précédent a présenté l'utilisation de l'instruction v-on en prenant l'instruction v-on pour lier l'événement click comme exemple. Cet article présente certains attributs du v-. sur l'événement de liaison. Comment utiliser.

attribut d'instruction de liaison v-on

attribut .stop

empêche les événements de clic de continuer à se propager vers le haut (pour faire simple, il ne laisse pas les événements du nœud parent et du nœud au-dessus du nœud parent se déclencher). S'il n'y a pas d'attribut stop dans cet exemple, les événements du nœud parent et du nœud grand-père se déclencheront et le contenu sera affiché sur la console. et les exemples de résultats sont les suivants :

1 <template>
 2   <div>
 3     <p class="title1">{{title}}</p>
 4     <div class="div1">
 5       <div v-on:click="clickme0">
 6         {{ msg1}}
 7         <div v-on:click="clickme">
 8           {{msg2}}<br/>
 9           <span v-on:click="clickthis">{{msg3}}</span>
10         </div>
11       </div>
12     </div>
13   </div>
14 
15 </template>
16 
17 <script>
18   export default {
19     name: &#39;v-on&#39;,
20     data() {
21       return {
22         msg1: &#39;我是爷爷节点&#39;,
23         msg2: &#39;我是父节点&#39;,
24         msg3: &#39;测试click属性&#39;,
25         title: &#39;v-on指令学习&#39;
26       }
27     },
28     methods:{
29       clickme0(){
30         console.log("我是爷爷节点");
31       },
32       clickme(){
33         console.log("我是父节点");
34       },
35       clickthis(){
36         console.log("不打印父节点事件内容！")
37       }
38     }
39   }
40 </script>
41 
42 <style scoped>
43   .title1 {
44     text-align: left;
45   }
46   .div1{
47     float: left;
48   }
49 </style>

Si vous ajoutez l'attribut stop, les événements du nœud parent et du nœud grand-père ne seront pas déclenchés et le contenu de l'événement correspondant sera ne pas être affiché sur la console. L'exemple de code et les exemples de résultats sont les suivants :

1 <template>
 2   <div>
 3     <p class="title1">{{title}}</p>
 4     <div class="div1">
 5       <div v-on:click="clickme0">
 6         {{ msg1}}
 7         <div v-on:click="clickme">
 8           {{msg2}}<br/>
 9           <span v-on:click.stop="clickthis">{{msg3}}</span>
10         </div>
11       </div>
12     </div>
13   </div>
14 
15 </template>
16 
17 <script>
18   export default {
19     name: &#39;v-on&#39;,
20     data() {
21       return {
22         msg1: &#39;我是爷爷节点&#39;,
23         msg2: &#39;我是父节点&#39;,
24         msg3: &#39;测试click属性&#39;,
25         title: &#39;v-on指令学习&#39;
26       }
27     },
28     methods:{
29       clickme0(){
30         console.log("我是爷爷节点");
31       },
32       clickme(){
33         console.log("我是父节点");
34       },
35       clickthis(){
36         console.log("不打印父节点事件内容！")
37       }
38     }
39   }
40 </script>
41 
42 <style scoped>
43   .title1 {
44     text-align: left;
45   }
46   .div1{
47     float: left;
48   }
49 </style>

.prevent property

Cette méthode informera le navigateur Web de ne pas effectuer l'action par défaut associée à l'événement (si une telle action existe). Notez que si la propriété annulable de l'objet Event est fasle, alors il n'y a pas d'action par défaut, ou l'action par défaut ne peut pas Dans les deux cas, l'appel de cette propriété n'a aucun effet.

Un exemple simple est le suivant, dans la page du formulaire si l'attribut type est "submit"

Si Prevent n'est pas spécifié, le L'événement click déclenche automatiquement le formulaire from. L'action passe au site Web spécifié. L'exemple de code et les exemples de résultats sont les suivants :

<template>
     <div>
      <p class="title1">{{title}}</p>
       <div class="div1">
         <form action="http://www.baidu.com" v-on:submit="clickme">
          <button type="submit">{{msg}}</button>
         </form>
         <!--<a href="http://www.baidu.com"   v-on:click.prevent="banclickme">点我去百度</a>-->
       </div>
     </div>
 </template>

<script>
    export default {
         name: &#39;v-on&#39;,
         data() {
           return {
               title: &#39;v-on指令学习&#39;,
             msg: &#39;form表单默认点击打开百度&#39;
           }
         },
       methods:{
           clickme(){
               console.log("页面重新加载了");
             }
         // banclickme(){
         //     console.log("去不了百度吧")
         // }
         }
     }
   </script>

 <style scoped>
    .title1 {
         text-align: left;
       }
  .div1{
              float: left;
            }
</style>

Si la prévention est spécifiée, le clic. l'événement ne déclenchera pas l'action du formulaire pour accéder au site Web spécifié, l'exemple de code et les exemples de résultats sont les suivants :

<template>
     <div>
      <p class="title1">{{title}}</p>
       <div class="div1">
         <form action="http://www.baidu.com" v-on:submit.prevent="clickme">
          <button type="submit">{{msg}}</button>
         </form>
         <!--<a href="http://www.baidu.com"   v-on:click.prevent="banclickme">点我去百度</a>-->
       </div>
     </div>
 </template>

<script>
    export default {
         name: &#39;v-on&#39;,
         data() {
           return {
               title: &#39;v-on指令学习&#39;,
             msg: &#39;form表单默认点击打开百度&#39;
           }
         },
       methods:{
           clickme(){
               console.log("去不了百度吧");
             }
         // banclickme(){
         //     console.log("去不了百度吧")
         // }
         }
     }
   </script>

 <style scoped>
    .title1 {
         text-align: left;
       }
  .div1{
              float: left;
            }
</style>

attribut .capture

.

Utilisez le mode de capture d'événement lors de l'ajout d'un écouteur d'événement, c'est-à-dire que l'élément lui-même déclenche. L'événement est d'abord traité ici, puis transmis à l'élément interne pour traitement lorsque vous cliquez sur l'élément inférieur

déclenche l'événement, l'élément avec l'écouteur est d'abord recherché, et l'élément avec le modificateur est d'abord déclenché en fonction de la priorité du nœud, puis déclenche son propre événement, et enfin l'événement bouillonne. Dans cet exemple, l'impression. du nœud grand-père est déclenchée en premier, puis l'impression du nœud parent est déclenchée, puis l'impression du nœud propre est déclenchée et enfin l'impression du nœud arrière-grand-père est déclenchée. L'exemple de code et les résultats sont les suivants. :

<template>
  <div>
    <p class="title1">{{title}}</p>
    <div class="div1" v-on:click="click3">
      {{msg3}}<br/>
      <div class="div1" v-on:click.capture="click2">
        {{msg2}}<br/>
        <div class="div1" v-on:click.capture="click1">
          {{msg1}}<br/>
          <div v-on:click="click0">{{msg}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: &#39;v-on&#39;,
    data() {
      return {
        title: &#39;v-on指令学习&#39;,
        msg: &#39;我是div内部子节点&#39;,
        msg1: &#39;我是div父节点&#39;,
        msg2: &#39;我是div爷爷节点&#39;,
        msg3: &#39;我是div曾祖父节点&#39;
      }
    },
    methods:{
      click0(){
        console.log("打印子节点");
      },
      click1(){
          console.log("打印父节点");
      },
      click2(){
        console.log("打印爷爷节点");
      },
      click3(){
        console.log("打印曾祖父节点");
      }
    }
  }
</script>

<style scoped>
  .title1 {
    text-align: left;
  }
  .div1{
    float: left;
  }
</style>

.self attribut

ne déclenche le gestionnaire que 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 En termes simples, l'événement n'est déclenché que lorsque l'on clique sur l'élément lui-même pour déclencher l'événement ou lorsque l'on clique sur l'élément enfant et que l'événement bouillonne, le propre événement de l'élément n'est pas déclenché. .

Dans cet exemple, l'événement n'est pas déclenché lorsque le nœud parent ou le nœud enfant est cliqué. Imprimez l'événement d'élément lui-même. L'exemple de code et les exemples de résultats sont les suivants :

<🎜. >

<template>
  <div>
    <p class="title1">{{title}}</p>
    <div class="div1" v-on:click="click3">
      {{msg3}}<br/>
      <div class="div1" v-on:click.self="click2">
        {{msg2}}<br/>
        <div class="div1" v-on:click="click1">
          {{msg1}}<br/>
          <div v-on:click="click0">{{msg}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: &#39;v-on&#39;,
    data() {
      return {
        title: &#39;v-on指令学习&#39;,
        msg: &#39;我是div内部子节点&#39;,
        msg1: &#39;我是div父节点&#39;,
        msg2: &#39;我是div爷爷节点&#39;,
        msg3: &#39;我是div曾祖父节点&#39;
      }
    },
    methods:{
      click0(){
        console.log("打印子节点");
      },
      click1(){
          console.log("打印父节点");
      },
      click2(){
        console.log("打印爷爷节点");
      },
      click3(){
        console.log("打印曾祖父节点");
      }
    }
  }
</script>

<style scoped>
  .title1 {
    text-align: left;
  }
  .div1{
    float: left;
  }
</style>

Attribut .once

L'événement click ne sera déclenché qu'une seule fois. En termes simples, c'est-à-dire que le propre événement de l'élément ne peut être utilisé qu'une seule fois. l'élément est cliqué pour la deuxième fois, mais cela n'empêchera pas l'événement de bouillonner.

Dans cet exemple, le nœud enfant et le nœud parent sont imprimés lorsque l'élément est cliqué pour la deuxième fois. Les nœuds enfants ne sont pas imprimés, mais le nœud parent et supérieur sont toujours imprimés. L'exemple de code et les résultats de force sont les suivants :

<template>
  <div>
    <p class="title1">{{title}}</p>
    <div class="div1" v-on:click="click3">
      {{msg3}}<br/>
      <div class="div1" v-on:click="click2">
        {{msg2}}<br/>
        <div class="div1" v-on:click="click1">
          {{msg1}}<br/>
          <div v-on:click.once="click0">{{msg}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: &#39;v-on&#39;,
    data() {
      return {
        title: &#39;v-on指令学习&#39;,
        msg: &#39;我是div内部子节点&#39;,
        msg1: &#39;我是div父节点&#39;,
        msg2: &#39;我是div爷爷节点&#39;,
        msg3: &#39;我是div曾祖父节点&#39;
      }
    },
    methods:{
      click0(){
        console.log("打印子节点");
      },
      click1(){
          console.log("打印父节点");
      },
      click2(){
        console.log("打印爷爷节点");
      },
      click3(){
        console.log("打印曾祖父节点");
      }
    }
  }
</script>

<style scoped>
  .title1 {
    text-align: left;
  }
  .div1{
    float: left;
  }
</style>

.attribut passif

Le comportement par défaut de l'événement scroll (c'est-à-dire le comportement de défilement) sera déclenché immédiatement sans attendre la fin de onScroll, ce qui inclut le cas de event.preventDefault()

Recommandations associées :

Analyse de la liaison d'événement simple de l'instruction v-on dans Vue (avec code)

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!