logo

2.14. Vue3 event handling

发布时间 ：2025-10-25 13:33:36 UTC

Page Views: 45 views

We can use it. v-on directive to listen for DOM events to execute JavaScript code.

v-on instructions can be abbreviated to @ symbols.

Syntax format:

v-on:click="methodName"
or
@click="methodName"

2.14.1. v-on 

<divid="app"><button@click="counter += 1">increase
1button><p>This button has been clicked {{ counter }} times.p>div><script>const
app = { data() { return { counter: 0 } } }
Vue.createApp(app).mount('#app')script>
   
 Typically, we need to use a method to call the JavaScript method. 
 
   v-on   can receive a defined method to call. 
 
 V-on 
 
 
 

   
 In addition to binding directly to a method, you can also use an inline JavaScript statement: 
 
 V-on 
 
 
 
<divid="app"><button@click="say('hi')">Say
hibutton><button@click="say('what')">Say
whatbutton>div><script>const app = { data() { }, methods: {
say(message) { alert(message) } } }
Vue.createApp(app).mount('#app')script>
   
 There can be multiple methods in an event handler, separated by a comma operator: 
 
   v-on   
 
 
 

  
 
 
 
 Event modifier  
 
   Vue.js   provide   v-on   event modifiers are provided to handle DOM event details, such as:   event.preventDefault()   or   event.stopPropagation()   . 
 
   Vue.js   pass by the point   .   represents the instruction suffix to invoke the modifier. 
 
     
  •  
       .stop   -stop bubbling 
     
    •  
  •  
       .prevent   -block default events 
     
    •  
  •  
       .capture   -prevent capture 
     
    •  
  •  
       .self   -listen only for events that trigger this element 
     
    •  
  •  
       .once   -trigger only once 
     
    •  
  •  
       .left   -left button event 
     
    •  
  •  
       .right   -right button event 
     
    •  
  •  
       .middle   -Intermediate wheel event 
     
    •  
 
 
 












...



...





 
 
 
 
 
 Key modifier  
 
 Vue allows for   v-on   add a button modifier when listening for keyboard events: 
 
 
 



 
 
 
 Remember everything.   keyCode   is difficult, so Vue provides aliases for the most commonly used keys: 
 
 
 





 
 
 
 All key aliases: 
 
     
  •  
       .enter   
     
    •  
  •  
       .tab   
     
    •  
  •  
       .delete   (capture “delete” and “backspace” keys) 
     
    •  
  •  
       .esc   
     
    •  
  •  
       .space   
     
    •  
  •  
       .up   
     
    •  
  •  
       .down   
     
    •  
  •  
       .left   
     
    •  
  •  
       .right   
     
    •  
 
 System modifier key: 
 
     
  •  
       .ctrl   
     
    •  
  •  
       .alt   
     
    •  
  •  
       .shift   
     
    •  
  •  
       .meta   
     
    •  
 
 Mouse button modifier: 
 
     
  •  
       .left   
     
    •  
  •  
       .right   
     
    •  
  •  
       .middle   
     
    •  
 
 
 
 
 
  2.14.2.  Example  
 
 
 




Do something


 
 
 
 
   .exact   modifier  
 
   .exact   modifiers allow you to control events triggered by a precise combination of system modifiers. 
 
 
 
 
  2.14.3.  Example  
 
 
 







 
 
 
 
 

                        
                        
                    
                
                

                    

                        
                            

                                文章链接
                                ： 2.14. Vue3 event handling 
                            

                        
                    

                

            
        
        

            


    
        
            

                

                    

                        
                            
                            
                                
Web框架 

                            
                            
                                 942
                            
                        
                        
                            

                                
 
 
 

                            

                        
                    

                    
                

            

        
    
        
            

                

                    

                        
                            
                            
                                
Principles and Applications of WebGIS 

                            
                            
                                 37
                            
                        
                        
                            

                                
 
 
 

                            

                        
                    

                    
                

            

        
    
        
            

                

                    

                        
                            
                            
                                
WEB基础 

                            
                            
                                 287
                            
                        
                        
                            

                                
 
 
 

                            

                        
                    

                    
                

            

        
    
        
            

                

                    

                        
                            
                            
                                
Principles, Technologies, and Methods of Geographic Information Systems 

                            
                            
                                 102
                            
                        
                        
                            

                                
 
 
 In recent years, Geographic Information Systems (GIS) have undergone rapid development in both theoretical and practical dimensions. GIS has been widely applied for modeling and decision-making support across various fields such as urban management, regional planning, and environmental remediation, establishing geographic information as a vital component of the information era. The introduction of the “Digital Earth” concept has further accelerated the advancement of GIS, which serves as its technical foundation. Concurrently, scholars have been dedicated to theoretical research in areas like spatial cognition, spatial data uncertainty, and the formalization of spatial relationships. This reflects the dual nature of GIS as both an applied technology and an academic discipline, with the two aspects forming a mutually reinforcing cycle of progress.