简介

在原生 html + js 的项目中，如果需要给一个元素添加一个鼠标点击事件，可以在 DOM 上使用 onclick 来绑定一个事件。

在 Vue 的模板语法中，可以用 v-on 指令监听 DOM 事件，并在触发事件时执行一些 JavaScript。然后在 methods 这个对象中创建对应的事件。

用法

<!-- vue监听的容器元素 -->
<div id="root"></div>

<script>
  Vue.createApp({
    data() {
      return {
        event: 'click'
      }
    },
    methods: {
      handleClick() {
        console.log('hello')
      }
    },
    template: `
      <button v-on:click="handleClick">完整语法</button>
      <button @click="handleClick">简写</button>
      <button @[event]="handleClick">态参数的缩写 (2.6.0+)</button>
    `
  }).mount('#root')

  // 使用 mount 绑定要监听的元素
</script>

在 Vue 中事件绑定方式一共有3中，分别是：

完整语法：v-on
简写：@
动态参数：@[event]

其中动态参数中的 event 可以对应 data 里对应的数据。

其实动态参数的形式有点像在 js 中使用中括号动态读取对象属性

日常开发主要是用简写的形式。

多事件处理

多事件处理(官方文档)

事件处理程序中可以有多个方法，这些方法由逗号运算符分隔

<!-- vue监听的容器元素 -->
<div id="root"></div>

<script>
  Vue.createApp({
    methods: {
      one(event) {
        // first handler logic...
      },
      two(event) {
        // second handler logic...
      }
    },
    // 这两个 one() 和 two() 将执行按钮点击事件
    template: `
      <button @click="one($event), two($event)">
        Submit
      </button>
    `
  }).mount('#root')

  // 使用 mount 绑定要监听的元素
</script>

其他事件

常见的事件主要有3大类

鼠标事件
键盘事件
表单事件

常见的鼠标事件

@click -- 单击
@mousedown -- 按下
@mouseup -- 抬起
@dblclick -- 双击
@mousemove -- 移动
@mouseleave -- 离开
@mouseout -- 移出
@mouseenter -- 进入

常见的键盘事件

@onkeydown -- 按下键盘
@onkeyup -- 抬起

表单事件是区分元素的，但大部分表单元素都支持 @input 事件。 form 可以使用 @submit 事件。

事件修饰符

事件修饰符其实就是一套附加规则或者方法，能简化业务开发复杂度。

比如

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input @keyup.enter="submit" />

上面的例子，只有用户按下回车键的时候才触发 submit 事件。

官方提供的事件修饰符

.stop -- 阻止事件冒泡
.prevent -- 拦截默认事件
.capture -- 阻止事件捕捉
.self -- 忽略了事件冒泡和事件捕获的影响，只有直接作用在该元素上的事件才会被调用
.once -- 事件将只会触发一次
.passive -- listener 永远不会调用 preventDefault()

除了基础的事件修饰符，Vue 还提供了按键修饰符和系统修饰键。

详情请看：按键修饰符、系统修饰键

延伸阅读

本节源码

Vue监听事件(官方文档)

《Vue.js 3.0从入门到实战（微课视频版）》

【Vue3】事件绑定

简介

用法

多事件处理

其他事件

事件修饰符

延伸阅读