2.14. Vue3 event handling

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

Page Views: 9 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框架 
                            
                            
                        
                             946
                        
                    
                    
                    
                        

                            
 
 
 

                        

                    
                

                
                

            

        
    
    
        
        

            

                

                    
                        
                            
                                《地理信息系统原理、技术与方法》 
                            
                            
                        
                             97
                        
                    
                    
                    
                        

                            
 
 
 最近几年来，地理信息系统无论是在理论上还是应用上都处在一个飞速发展的阶段。 GIS被应用于多个领域的建模和决策支持，如城市管理、区划、环境整治等等，地理信息成为信息时代重要的组成部分之一； “数字地球”概念的提出，更进一步推动了作为其技术支撑的GIS的发展。 与此同时，一些学者致力于相关的理论研究，如空间感知、空间数据误差、空间关系的形式化等等。 这恰好说明了地理信息系统作为应用技术和学科的两个方面，并且这两个方面构成了相互促进的发展过程。 
 
 

                        

                    
                

                
                

            

        
    
    
        
        

            

                

                    
                        
                            
                                WEB基础 
                            
                            
                        
                             289