V-on and its event modifiers

This article is aboutv-onBasic grammar, also includesv-onEvent modifier for

---

. stop: prevent event bubbling

1. Original HTML:

   <div class="inner" @click="first">
      < input type = button "value = poke him" @ Click = second ">
   </div>
   <script>
   var vm = new Vue({
           el: ".inner",
           data: {},
           Methods: {// the methods attribute defines the methods used in the current Vue instance
                   first(){
                           Alert ("entered div")
                   },
                   second(){
                           Alert ("entered BTN")
                   }
           }
   })
   </script>

   • If the event has no modification, the result of clicking the button is:
     1. Pop up: “entered BTN”
     2. Pop up: “entered div”
2. add to.stopModifier, then it stops popping out:

   <! -- modify the < input > in the above code as follows -- >
   < input type = "button" value = "poke him"@ click.stop= "second">

   • YesbtnAdded.stopThe results are as follows
     Will only pop up: “entered BTN”, and will not continue to go up

---

. prevent: prevent default behavior

1. Original HTML:

   <div class="inner">
      <a href="http://www.baidu.com" @click="goBaidu"> Go Baidu </a>
   </div>
   <script>
   var vm = new Vue({
           el: ".inner",
           data: {},
           Methods: {// the methods attribute defines the methods used in the current Vue instance
                   goBaidu() {
                           Alert ("go to Baidu")
                   }
           }
   })
   </script>

   • result:
     1. Pop up “go to Baidu”
     2. Then jump to Baidu page
2. add to.preventModifier to stop the jump:

   <! -- change < a > in the above code as follows -- >
   <a href="http://www.baidu.com" @click.prevent="goBaidu"> Go Baidu </a>

   • Result: only “go to Baidu” will pop up, but not jump to Baidu page

---

. capture uses capture mechanism to trigger events

1. Original HTML:

   <div class="inner" @click="first">
       <! --. Capture uses capture mechanism to trigger events -- >
       < input type = button "value = poke him" @ Click = second ">
   </div>
   <script>
   var vm = new Vue({
           el: ".inner",
           data: {},
           Methods: {// the methods attribute defines the methods used in the current Vue instance
                   first(){
                           Alert ("entered div")
                   },
                   second(){
                           Alert ("entered BTN")
                   }
           }
   })
   </script>

   • result:
     1. Enter BTN
     2. Enter div
2. add to.capture ：

   <! -- change the < div > in the above code as follows -- >
   <div class="inner" @click.capture="first">
       <! --. Capture uses capture mechanism to trigger events -- >
       < input type = button "value = poke him" @ Click = second ">
   </div>

---

. self is triggered only when you click on yourself:

1. Original HTML:

   <div class="inner" @click.self="first">
       <! --. Self is triggered only when you click on yourself -- >
       < input type = button "value = poke him" @ Click = second ">
   </div>
   <script>
   var vm = new Vue({
           el: ".inner",
           data: {},
           Methods: {// the methods attribute defines the methods used in the current Vue instance
                   first() {
                           Alert ("entered div")
                   },
                   second() {
                           Alert ('btn clicked ')
                   },
           }
   })
   </script>

   • result:
     1. Enter BTN
     2. Enter div
2. add to.selfAfter that:

   <! -- change the < div > in the above code as follows -- >
   <div class="inner" @click.self="first">
       <! --. Self is triggered only when you click on yourself -- >
       < input type = button "value = poke him" @ Click = second ">
   </div>

   • Results: only BTN was involved

---

. once is triggered only once

1. Original HTML:

   <a href=" http://www.baidu.com "@ Click =" gobaidu "> only supports go Baidu once</a>
   <script>
   var vm = new Vue({
           el: "#app",
           data: {},
           Methods: {// the methods attribute defines the methods used in the current Vue instance
                   goBaidu() {
                           Alert ("go to Baidu")
                   }
           }
   })
   </script>

2. join.onceAfter that:

   <! -- change < a > in the above code as follows -- >
   <a href=" http://www.baidu.com @ click.prevent.once= "Gobaidu" > only supports go Baidu once</a>

This work adoptsCC agreementReprint must indicate the author and the link of this article