监听事件

使用 v-on 指令 (简写为 @) 来监听 DOM 事件

语法：v-on:click="handler" 或 @click="handler"

事件处理器 (handler) 的值有

1、内联事件处理器：事件被触发时执行的内联 JavaScript 语句 (与 onclick 类似)。

2、方法事件处理器：一个指向组件上定义的方法的属性名或是路径。

内联事件处理器

示例：

const count = ref(0)

<button @click="count  ">Add 1</button>
<p>Count is: {{ count }}</p>

方法事件处理器

示例：

const name = ref('Vue.js')

function greet(event) {
  alert(`Hello ${name.value}!`)
  // `event` 是 DOM 原生事件
  if (event) {
    alert(event.target.tagName)
  }
}

<!-- `greet` 是上面定义过的方法名 -->
<button @click="greet">Greet</button>

在内联处理器中调用方法

内联事件处理器中调用方法。并且向方法传入参数。

示例：

function say(message) {
  alert(message)
}

<button @click="say('hello')">Say hello</button>
<button @click="say('bye')">Say bye</button>

在内联事件处理器中访问事件参数

在内联事件处理器中访问原生 DOM 事件。我们可以向该处理器方法传入一个特殊的 $event 变量，或者使用内联箭头函数。

示例：

<!-- 使用特殊的 $event 变量 -->
<button @click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>

<!-- 使用内联箭头函数 -->
<button @click="(event) => warn('Form cannot be submitted yet.', event)">
  Submit
</button>

function warn(message, event) {
  // 这里可以访问原生事件
  if (event) {
    event.preventDefault()
  }
  alert(message)
}

事件修饰符

.stop

.prevent

.self

.capture

.once

.passive

示例：

<!-- 单击事件将停止传递 -->
<a @click.stop="doThis"></a>

<!-- 提交事件将不再重新加载页面 -->
<form @submit.prevent="onSubmit"></form>

<!-- 修饰语可以使用链式书写 -->
<a @click.stop.prevent="doThat"></a>

<!-- 也可以只有修饰符 -->
<form @submit.prevent></form>

<!-- 仅当 event.target 是元素本身时才会触发事件处理器 -->
<!-- 例如：事件处理器不来自子元素 -->
<div @click.self="doThat">...</div>

按键修饰符

按键别名

.enter

.tab

.delete (捕获“Delete”和“Backspace”两个按键)

.esc

.space

.up

.down

.left

.right

系统按键修饰符

.ctrl

.alt

.shift

.meta

exact 修饰符

.exact 修饰符允许精确控制触发事件所需的系统修饰符的组合。

示例：

<!-- 当按下 Ctrl 时，即使同时按下 Alt 或 Shift 也会触发 -->
<button @click.ctrl="onClick">A</button>

<!-- 仅当按下 Ctrl 且未按任何其他键时才会触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 仅当没有按下任何系统按键时触发 -->
<button @click.exact="onClick">A</button>

鼠标按键修饰符

.left

.right

.middle