事件处理

事件监听

通过 v-on 指令监听事件。

<button v-on:click="submit">提交</div>

v-on 还可以简写成 @ 。

<button @click="submit">提交</div>

事件处理方法

内联：

• 模板<template> 中，无需使用 this 就可以访问实例的属性或方法。

<button v-on:click="() => {}">提交</div>

// or

<button v-on:click="value = '具体的值'">提交</div> // 单个语句可以使用第二种写法。

在 methods 定义方法：

• methods 用于存储可以复用的方法，这些方法可以在 Vue 实例的模板中使用。
• methods 中的方法可以通过 this 关键字访问到当前的 Vue 实例。

<template>
  <button @click="submit">提交</button>
</template>

<script>
export default {
  methods: {
    submit() {
      console.log("submit");
      console.log(this, "this"); // 当前 Vue 实例。
    }
  }
}
</script>

事件传参：

• 什么都不传，默认接收到 event 事件对象。

<template>
  <button @click="submit">提交</button>
</template>

<script>
export default {
  methods: {
    submit(event) {
     console.log(event, "event")
    }
  }
}
</script>

• 传递参数后，如果还需要使用到事件对象，需要在模板中传入 $event。

<template>
  <button @click="submit('Hi！', $event)">提交</button>
</template>

<script>
export default {
  methods: {
    submit(msg, event) {
      console.log(msg, "msg");
     console.log(event, "event")
    }
  }
}
</script>

内置的事件修饰符

v- 开头的就是指令。

在指令中 : 后面的是参数，例如：v-bind:href，这个 href 就是指令参数。

在指令中 . 后面就是修饰符，例如：v-on:click.stop，这个 stop 就是修饰符。

一个指令中可以同时出现 指令参数 和 修饰符。

内置修饰符：

• .stop
• .prevent
• .capture
• .self
• .once
• .passive

使用：

<!-- 阻止事件冒泡 -->
<button v-on:click.stop="submit">点击</button>

<!-- 阻止默认行为 -->
<form v-on:submit.prevent="submit">
  <button>点击</button>
</form>

<!-- 只有修饰符 -->  
<form v-on:submit.prevent>
  <button>点击</button>
</form>

<!-- 只执行一次 -->
<button @click.once="submit">点击</button>

<!-- 只有在 event.target 是当前元素自身，才会触发 Click 事件。（不接受冒泡和捕获的影响） -->
<div @click.self="submit"></div>

修饰器可以多个：

<!-- 右键触发点击并且禁止默认行为 -->
<button @click.right.prevent="submit">点击</button>

内置按键修饰器

在监听键盘事件时 Vue 实现了一些内置的键盘修饰器。

• .enter
• .tab
• .delete (捕获“删除”和“退格”键)
• .esc
• .space
• .up
• .down
• .left
• .right

最常见的就是 @keyup.enter ，监听键盘回车动作。

<input @keyup.enter="submit">

内置鼠标按键修饰器

• .left
• .right
• .middle

系统修饰键

注意：修饰键 和 修饰符 不一样，仅在按下相应 修饰键 时才触发鼠标或键盘事件的监听器。

• .ctrl
• .alt
• .shift
• .meta

<!-- Ctrl + Click --> 
<button v-on:click.ctrl="submit">点击</button>

需要按着 ctrl 键，点击按钮才会触发事件函数。