5 Program to demonstrate Event Modifiers in VueJS

Program:

index.html:

<!DOCTYPE html>
<html>

<body>
    <div id="ad">
        <a @click.stop="doStop" href="https://codingatharva.blogspot.com" target="_blank"> Stop </a>

        <br>
        <br>

        <button v-on:click.once="doOnce"> Once </button>

        <br>
        <br>

        <a href="https://codingatharva.blogspot.com" v-on:click.self.prevent target="_blank">Coding Atharva
            <p>Click me now</p>
        </a>

        <br>
        <br>

        <a v-on:click.prevent="doPrevent" href="https://codingatharva.blogspot.com" target="_blank"> Prevent</a>

        <br>
        <br>

        <!-- using capture mode when adding the event listener -->
        <!-- i.e. an event targeting an inner element is always handled here before being handled by that element -->
        <span v-on:click.capture="doThis"> Capture </span>

        <br>
        <br>

        <!-- the scroll event's default behavior will happen -->
        <!-- immediately, instead of waiting for `onScroll` to be completed  -->
        <!-- whenever it contains `event.preventDefault()` -->
        <span v-on:scroll.passive="onScroll">Passive</span>

    </div>

    <div style="margin-top:500px;"></div>
    <script src="https://unpkg.com/vue"></script>
    <script type="text/javascript" src="./index.js"> </script>


</body>

</html>


index.js:

var app = new Vue({
    el: '#ad',

    methods: {
        doStop: function () {
            alert("You are About to Redirect")
        },
        doThis: function () {
            alert("hello")
        },
        doPrevent: function () {
            alert("Click Prevented")
        },
        doOnce: function () {
            alert("Once")
        },

    }
});


Output:

Event Modifiers in VueJS


Previous
Next Post »