Techoceanhub logo

Learn how to handle event in VueJs.

In this post, I have tried to explain about different events in VueJs. In  simple words events are action  triggered by system for example:

  • Mouse Events
  • Keyboard Events

Mouse events can be recognized as double click, or on hover event by mouse.

In below example, I am going to explain different events  like click event and key event and  also I have tried to explain stop propagation and prevent propagation in VueJs. So below is a sample code provided to you.

<!DOCTYPE html>
<html>
    <head>
        <script src=“../vue.js”></script>
    </head>
    <body>
        <div id=“app”>  
            <input type=“button” v-on:click=“changeMessage(‘in vue’, $event)”  value=“Click here”/>             
            <p v-on:click=“preventEvents”>
                {{mymessage}}   
                <br><br>
                <span v-on:click.stop=“preventEvents”>This is span Element</span>
                <a href=“http://google.com” v-on:click.stop.prevent=“preventEvents”>Go to google</a>
            </p> 
            <input type=“text”  @keyup.enter.space=“alertMessage” :value=“textStr”>        
        </div>        
        <script>
            new Vue({
                el:“#app”,
                data:{
                    mymessage:“Welcome to Vue.js Learning”,
                    textStr:“Enter Text”                              
                },
                methods:{
                    changeMessage(strevent){
                        this.mymessage=“Learn Event Handling “+str
                    },

                    preventEvents(){                        
                        alert(“This is Tag: “+event.target.tagName);
                    },
                    alertMessage(){
                        alert(“Key Event call”);
                    }
                }
            })         
        </script>
    </body>
</html>


Feel free to try this example and  comment below.

Share:

Categories

Archives

Related Posts

Array Destructuring

Array Destructuring Array destructuring is a powerful syntax introduced in ES6 that allows you to unpack elements from an array

Read More »

Explore our Affiliated partner links

hostgator website plan

Hostgator

Best Website hosting plans & Best for 24/7 support.

hostinger webhosting plan

Hostinger

Reasonable website hosting packages for small business & 24/7 Email support

Elementor pro

Design Worpdress website quickly using Elementor Builder and AI

buy elementor website templates

Buy Elementor Website Template

Buy ready made Elementor Website Template from us & Get Free Elementor pro licence for 1 year .