V-on and its event modifiers

Time:2021-1-10

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