Attributanalyse der einfachen Ereignisbindung der v-on-Direktive in Vue (mit Code)

Dieser Artikel führt Sie in die Attributanalyse der einfachen Ereignisbindung der V-On-Anweisung in Vue ein (mit Code). Er hat einen guten Referenzwert und ich hoffe, er kann Freunden in Not helfen.

Vorwort

Im vorherigen Artikel wurde die Verwendung der v-on-Anweisung anhand der v-on-Anweisung zum Binden des Klickereignisses als Beispiel vorgestellt. In diesem Artikel werden einige Attribute der v-on-Anweisung vorgestellt. bei verbindlichem Ereignis.

v-on-Bindungsanweisungsattribut

.stop-Attribut

verhindert, dass sich Klickereignisse weiter nach oben ausbreiten (um es einfach auszudrücken: Wenn in diesem Beispiel kein Stoppattribut vorhanden ist, werden die Ereignisse des übergeordneten Knotens und des übergeordneten Knotens ausgelöst und der Inhalt wird auf der Konsole ausgegeben Die Beispielergebnisse lauten wie folgt:

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>

Wenn Sie das Stoppattribut hinzufügen, werden die Ereignisse des übergeordneten Knotens und des Großvaterknotens nicht ausgelöst und der entsprechende Ereignisinhalt wird nicht ausgelöst Ausgabe auf der Konsole. Der Beispielcode und die Beispielergebnisse lauten wie folgt:

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 attribute

Diese Methode benachrichtigt Der Webbrowser führt die mit dem Ereignis verbundene Standardaktion nicht aus (falls eine solche Aktion vorhanden ist). Wenn die abbrechbare Eigenschaft des Objekts „fasle“ ist, gibt es keine Standardaktion oder die Standardaktion kann nicht verhindert werden In beiden Fällen hat der Aufruf dieser Eigenschaft keine Auswirkung.

Ein einfaches Beispiel sieht wie folgt aus: Wenn auf der Seite aus dem Formular das Typattribut „submit“ lautet.

Wenn „prevent“ nicht angegeben ist, wird die Das Klickereignis löst automatisch das From-Formular aus. Die Aktion springt zur angegebenen Website. Der Beispielcode und die Beispielergebnisse lauten wie folgt:

<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>

Wenn „Verhindern“ angegeben ist, wird das Klickereignis ausgeführt Die From-Formular-Aktion nicht auslösen, um zur angegebenen Website zu springen. Beispiel Der Code und die Beispielergebnisse lauten wie folgt:

<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>

.capture-Attribut

Verwenden Sie das Beim Hinzufügen eines Ereignis-Listeners wird der Ereigniserfassungsmodus verwendet, dh das vom Element selbst ausgelöste Ereignis wird hier zuerst überall verarbeitet und dann zur Verarbeitung an interne Elemente übergeben. Wenn das Ereignis durch Klicken auf das untere Element

, wird zuerst nach dem Element mit dem Listener gesucht, und das Element mit dem Modifikator wird zuerst entsprechend der Knotenpriorität ausgelöst, und dann wird das Ereignis ausgelöst. Das eigene Ereignis, und schließlich sprudelt das Ereignis In diesem Beispiel wird zuerst das Drucken des Großvaterknotens ausgelöst, dann wird das Drucken des übergeordneten Knotens ausgelöst, dann wird das Drucken des eigenen Knotens ausgelöst und schließlich wird das Drucken des Urgroßvaterknotens ausgelöst. Der Beispielcode und die Ergebnisse sind wie folgt:

<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 attribute

löst die Handlerfunktion nur aus, wenn event.target das aktuelle Element selbst ist, also das Das Ereignis wird nicht vom internen Element ausgelöst, sondern nur, wenn auf das übergeordnete Element geklickt wird, um das Ereignis auszulösen Das Ereignis des Elements selbst wird nicht ausgelöst, wenn auf den übergeordneten Knoten oder den untergeordneten Knoten geklickt wird. Beispiel:

<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>

.once-Attribut

Das Klickereignis wird nur einmal ausgelöst. Für Laien kann das eigene Ereignis nur einmal verwendet werden, das Ereignis wird nicht ausgelöst Das Element wird zum zweiten Mal angeklickt, aber es verhindert nicht, dass das Ereignis sprudelt. In diesem Beispiel werden der untergeordnete Knoten und der übergeordnete Knoten gedruckt, wenn das Element zum ersten Mal angeklickt wird Wenn das Element zum zweiten Mal angeklickt wird, aber immer noch der übergeordnete Knoten und die darüber liegenden Knoten gedruckt werden, lauten die Beispielcode- und Festigkeitsergebnisse wie folgt:

<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>

. passives Attribut

Standardverhalten des Scroll-Ereignisses (das heißt, das Scroll-Verhalten) wird sofort ausgelöst, ohne auf den Abschluss von onScroll zu warten, was den Fall von event.preventDefault()Verwandte Empfehlungen:

v in Vue Analyse der einfachen Ereignisbindung der -on-Direktive (mit Code)

Das obige ist der detaillierte Inhalt vonAttributanalyse der einfachen Ereignisbindung der v-on-Direktive in Vue (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!