事件处理

事件处理免费看

11-10侠课岛    新上线 基础入门       

前端/前端/Vue入门教程 17     0     206

本节我们学习 Vue 中如何进行事件处理。之前我们提到过 v-on 指令,本节我们将详细介绍这个指令的用法。

监听事件

我们可以使用 v-on 指令 (通常缩写为 @ 符号) 来监听 DOM 事件,并在触发事件时执行一些 JavaScript

用法为:

v-on:click="methodName"
// 缩写
@click="methodName"`
示例:

例如下面这个例子:

<div id="basic-event">
  <button @click="counter += 1">加一</button>
  <p>上面的按钮已被单击 {{ counter }} 次。</p>
</div>
Vue.createApp({
  data() {
    return {
      counter: 1
    }
  }
}).mount('#basic-event')

在浏览器中的演示效果:

上述代码中,我们使用 v-on 指令给 <button> 元素绑定了一个点击事件。当我们点击按钮时,会触发这个事件,并执行相应的 JavaScript 代码,即 counter += 1

事件处理方法

在上述示例中,我们将事件处理直接写在了模板中,即 @click="counter += 1"。但是许多事件处理逻辑都要比这更复杂,所以直接把 JavaScript 代码写在 v-on 指令中有时是不可行的。v-on 指令可以接收一个需要调用的方法名称。

示例:

我们来看下面这个例子:

<div id="app">
  <!-- greet在下面定义的方法名 -->
  <button @click="greet">打招呼</button>
</div>
Vue.createApp({
  data() {
    return {
      name: '侠课岛'
    }
  },
  methods: {
    greet(event) {
      alert('你好 ' + this.name + '!')
      if(event) {
        alert(event.target.tagName)
      }
    }
  }
}).mount('#app')

在浏览器中的演示效果:

上述代码中,我们将需要执行的 JavaScript 代码写在 greet 方法中,并将 greet 方法绑定到点击事件上。以此来实现,当点击按钮时,弹出一个弹出层。

内联处理器中的方法

我们除了像上述示例中,直接绑定到一个方法。也可以在内联 JavaScript 语句中调用方法,并且在事件触发的时候给方法传递一些参数。

示例:
<div id="app">
    <h3>打招呼的方式:</h3>
    <button @click="say('Hello,xkd!')">方式一</button>
    <button @click="say('你好,侠课岛!')">方式二</button>
</div>
Vue.createApp({
  methods: {
    say(message) {
      alert(message)
    }
  }
}).mount('#app')

在浏览器中的演示效果:

有时我们也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法:

<div id="app">
    <button @click="warn('表单尚未提交。', $event)">提交</button>
</div>
Vue.createApp({
  methods: {
    warn(message, event) {
      if (event) {
        event.preventDefault()
      }
      alert(message)
    }
  }
}).mount('#app')

上述代码中,我们定义了事件函数 warn, 在按钮点击事件中,我们将 $event 对象传递给函数,因此在函数 warn 中可以访问到原生事件对象。

如果事件处理程序中有多个方法,则这些方法需要通过逗号运算符分隔。

事件修饰符

在事件处理程序中调用 event.preventDefault()event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点,但更好的方式是:方法只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。

为了解决这个问题,Vue.jsv-on 提供了事件修饰符。实现方法就是在事件名称后面以后缀的形式添加指定的修饰符。

  • .stop:阻止单击事件继续传播。
  • .prevent:只有修饰符,提交事件不再重载页面。
  • .capture:添加事件监听器时使用事件捕获模式,即元素自身触发的事件先在自身处理,然后交由内部元素进行处理。
  • .self:只有在 event.target 是当前元素自身时触发处理函数,即事件不是从内部元素触发的。
  • .once:点击事件将只触发一次。
  • .passive:滚动事件会立即触发,不会等待其他串联事件。即 prevent 会失效。
<!-- 阻止单击事件继续传播 -->
<a @click.stop="doThis"></a>

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

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

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

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理,然后才交由内部元素进行处理 -->
<div @click.capture="doThis">...</div>

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

提示:使用修饰符时,顺序很重要。相应的代码会以同样的顺序产生。因此,用 v-on:click.prevent.self 会阻止所有的点击,而 v-on:click.self.prevent 只会阻止对元素自身的点击。

按键修饰符

在监听键盘事件时,我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符:

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

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

<input @keyup.page-down="onPageDown" />

在上述示例中,处理函数只会在 $event.key 等于 'PageDown' 时被调用。

为了在必要的情况下支持旧浏览器,Vue 为最常用的键提供了别名:

  • .enter:回车键。
  • .tab:TAB键。
  • .delete:删除和退格键。
  • .esc:只有在 event. 终止键;
  • .space:删除键。
  • .up:上方向键。
  • .down:下方向键。
  • .left: 左方向键。
  • .right:右方向键。

系统修饰键

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

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

注意:在 Mac 系统键盘上,meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。在 Sun 操作系统键盘上,meta 对应实心宝石键 (◆)。在其他特定键盘上,尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品,比如 Knight 键盘、space-cadet 键盘,meta 被标记为“META”。在 Symbolics 键盘上,meta 被标记为“META”或者“Meta”。

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

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

提示:请注意修饰键与常规按键不同,在和 keyup 事件一起用时,事件触发时修饰键必须处于按下状态。换句话说,只有在按住 ctrl 的情况下释放其它按键,才能触发 keyup.ctrl。而单单释放 ctrl 也不会触发事件。

Vue 提供了 .exact 修饰符来实现单独的系统按键的事件。

示例:
<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>

本教程图文或视频等内容版权归侠课岛所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、转贴或以其他方式复制发布或发表。

评价

17

本课评分:
  •     非常好
难易程度:
  •     适中的
|
教程
粉丝
主页

签到有礼

已签到2天,连续签到7天即可领取7天全站VIP

  • 1
    +2 金币
  • 2
    +3 金币
  • 3
    +5 金币
  • 6
    +7 金币
  • 5
    +6 金币
  • 4
    暖心福利
    自选分类VIP ×1天
  • 7
    惊喜大礼

    自选分类VIP ×3天 +20金币
  • 持续签到 +8 金币

金币可以用来做什么?