前言

⭐️ 本专栏主要内容为「 Vue3官方文档」的学习过程 ✍🏼

⭐️ 本专栏适合人群：Vue小白、学完一遍Vue的掘友 👨🏼‍💻

⭐️ 本专栏的阅读顺序和官方文档顺序相同 📖

⭐️ 英雄不问出处，这个专栏一定让你收获满满 🥳！

⭐️ 静心，思考，实操，坚持，巩固，满载而归 🥰！

⭐️ 欢迎各位掘友在评论区交流 🤡

第十章事件处理

使用v-on指令来监听DOM事件，并在触发事件时执行JavaScript表达式。

使用JavaScript表达式

<div id="js-sentence">
  <button @click="counter += 1">{{counter}}</button>
</div>

<script>
  const jsSentence = Vue.createApp({
    data() {
      return {
        counter: 0
      }
    },
  }).mount('#js-sentence')
</script>

使用方法methods

<div id="use-method">
  <button @click="addCounter">{{counter}}</button>
</div>

<script>
  const useMethods = Vue.createApp({
    data() {
      return {
        counter: 0
      }
    },
    methods: {
      addCounter() {
        this.counter++
      }
    }
  }).mount('#use-method')
</script>

使用带参数的方法

<div id="use-method">
  <button @click="say(hi!)">{{message}}</button>
</div>

<script>
  const useMethods = Vue.createApp({
    data() {
      return {
        message: ''
      }
    },
    methods: {
      say(message) {
        this.message = `Say ${message}`
      }
    }
  }).mount('#use-method')
</script>

也可以将特殊变量$event传入方法，这样就能访问到原生事件了。

PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, …}

多事件处理器

事件处理程序中可以有很多个方法，这些方法用逗号分隔

<!-- 这两个 one() 和 two() 将执行按钮点击事件 -->
<button @click="one($event), two($event)">
  Submit
</button>

// ...
methods: {
  one(event) {
    // 第一个事件处理器逻辑...
  },
  two(event) {
   // 第二个事件处理器逻辑...
  }
}

事件修饰符

vue提供了事件修饰符，由点开头的指令后缀来表示

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

<!-- 阻止单击事件继续冒泡 -->
<a @click.stop="diThis"></a>

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

<!-- 修饰符可以串联 -->
<a @click.stop.prevent="diThis"></a>

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

<!-- 事件捕获：内部元素触发的事件先在此处理，然后交由内部元素进行处理 -->
<div @click.capture="doThis">...</div>

<!-- 只当 event.target 是当前元素自身时触发处理函数 -->
<!-- 事件不是从内部元素触发的 -->
<div @click.self="doThat">...</div>

<!-- 只触发一次 -->
<button @click.once="doThis"></button>

当串联时，顺序很重要，比如@click.prevent.self会阻止元素本身及子元素的点击的默认行为，@click.self.prevent只会阻止元素本身的点击的默认行为

.once不仅能对原生的DOM事件起作用，也能用到自定的组件事件上。

Vue还提供了addEventListener中的passive选项 —— .passive

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发，   -->
<!-- 而不会等待 `onScroll` 完成，                    -->
<!-- 以防止其中包含 `event.preventDefault()` 的情况  -->
<div @scroll.passive="onScroll">...</div>

.passive 修饰符尤其能够提升移动端的性能。

不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。

按键修饰符

监听键盘事件，Vue 允许为 v-on 或者 @ 在监听键盘事件时添加按键修饰符

可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。

<input @keyup.enter="submit" />

<!-- 当$event.key等于PageDown时被调用 -->
<input @keyup.page-down="onPageDown" />

Vue 为最常用的键提供了别名：

.enter
.tab
.delete( 删除和退格 )
.esc
.space
.up
.down
.left
.down
.right

系统修饰符

用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

.ctrl
.alt
.shift
.meta

<!-- Alt + Enter -->
<input @keyup.alt.enter="clear" />

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

在和 keyup 事件一起用时，事件触发时修饰键必须处于按下状态。

.exact修饰符

他允许你控制由精确的系统修饰符组合触发的事件。

<!-- 即使 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

这些修饰符会限制处理函数仅响应特定的鼠标按钮。

为什么在HTML中监听事件

扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。
当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何清理它们。

结语

专栏同步代码：Github ⎋

掘金社区：跟我一起学Vue3

作者简介：

一个满脑子奇怪知识的小商同学，在校ing，懂点设计，懂点排版，为成为一名优秀的前端工程师而努力。

跟我一起学Vue3——事件处理

前言

第十章 事件处理