v-on精炼

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

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