本文共 669 字，大约阅读时间需要 2 分钟。

v-on的介绍

• 在Vue中，常使用v-on指令用于监听事件的发生，v-on指令就类似于JavaScript中的addEvelistener()方法

v-on的基本使用

   
    
    
{{counter}}
    
        
    +    
        
    -
   

v-on参数传递问题

• 当通过methods中定义方法，以供@click调用时，需要注意参数问题：
  • 如果该方法不需要额外参数，可以省略方法后的()
  • 默认会将原生事件event作为额外参数传递进去

按钮2按钮3

v-on修饰符

• Vue为我们提供了修饰符，这些修饰符可以帮助我们更方便的处理一些事件

①.stop

• 阻止冒泡
  • 事件默认会由内向外依次触发。绑定.stop修饰符前，点击按钮后控制台会依次输出btnClick、keyUp、divClick，绑定.stop修饰符后，会阻止冒泡，因此控制台只会输出btnClick

   
    
        
    
        
     按钮    
    
   

②.prevent

• 阻止浏览器默认行为
  • 当点击提交按钮时，浏览器会默认将数据提交到服务器，绑定修饰符prevent后可以阻止这个默认行为，数据便能正常输出到控制台

③.{keyCode | keyAlias}

• 监听键盘的键帽，当特定按键按下时触发

④ .once

• 只会触发一次回调

   按钮2

⑤.native

• 监听组件根元素的原生事件，可以使组件同样可以监听事件

转载地址：http://yrxoz.baihongyu.com/