简介

用法

<!-- 方法处理器 -->
<button v-on:click="doThis"></button>
<!-- 动态事件 (2.6.0+) -->
<button v-on:[event]="doThis"></button>
<!-- 缩写 -->
<button @click="doThis"></button>
<!-- 动态事件缩写 (2.6.0+) -->
<button @[event]="doThis"></button>
<!-- 对象语法 (2.4.0+)，同时绑定多个事件 -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

事件对象 Event

原生的JS，事件触发后，都会有一个Event对象，保存触发时的一些属性

1、本身方法有参数，但调用时不加参数，vue会把事件对象赋值给函数的第一个参数
2、方法想要参数，而且也想把事件对象传给方法，可以用内置的$event浏览器对象

<template id="my-app">
    <!-- 默认传入event对象, 可以在方法中获取 -->
    <button @click="btn1Click">按钮1</button>
    <!-- $event可以获取到事件发生时的事件对象 -->
    <button @click="btn2Click($event, 'coderwhy', 18)">按钮2</button>
  </template>

data() {
  return {
    message: "Hello World"
  }
},
methods: {
  // 默认是可以获得event对象作为参数
  btn1Click(event) {
    console.log(event);
  },
   // 若要传递多个参数，可以通过$event 获取事件对象
   btn2Click(event, name, age) {
     console.log(name, age, event);
   }
}

事件名

修饰符

<!-- 停止冒泡 （常用）-->
<button @click.stop="doThis"></button>
<!-- 阻止默认行为 （常用） -->
<button @click.prevent="doThis"></button>
<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>
<!--  串联修饰符 -->
<button @click.stop.prevent="doThis"></button>
<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">
<!-- 键修饰符，键代码 （常用，但可能会被废弃） -->
<input @keyup.13="onEnter">
<!-- 刷新页面前，点击回调只会触发一次（常用） -->
<button v-on:click.once="doThis"></button>
<!-- 监听根元素的原生事件 -->
<button v-on:click.native="doThis"></button>

阻止事件冒泡 .stop

事件冒泡：例如点击，会同时触发元素的事件，和元素的子元素的事件，先从子元素事件开始执行，一层一层往上，就像冒泡

<div @click="divClick">
  <button @click.stop="btnClick">
  </button>
</div>
<script>
//@click.stop 是阻止事件冒泡，也就是点击button只会执行btnClick事件，而不会执行div的
</script>

阻止默认行为 .prevent

例如表单提交按钮，会自动提交表单并跳转，而不会执行后面的我自己定义的submiClick。
而了这个修饰，就不会执行自动提交并跳转，而是执行我自己的事件，我就可重新定义如何提交数据。

监听原生事件 .native （常用于自定义组件）

这样是监听不到点击事件的
这样才能进行监听

特定按键

特定鼠标按键

特定控制按键 ctrl、alt、shift

精准控制