拼搏30天VUE.js之v-on（Part11）-优快云博客

本文详细介绍了Vue.js中的v-on指令，包括其用于监听原生DOM事件和自定义组件事件的方式，以及各种事件修饰符的使用，如.stop、.prevent等。文章通过实例展示了事件处理方法和内联处理器，还提到了新增的事件修饰符，如.once和修饰符，以及针对键盘和鼠标事件的修饰符。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天跟著大漠老師的《Vue 2.0学习笔记：v-on》一文和VUE官網來學習，v-on指令的應用總結。

`v-on`

語義：

支持不带参数绑定一个事件/监听器键值对的对象。注意当使用对象语法时，是不支持任何修饰器的。
用在普通元素上时，只能监听 原生DOM事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。
在监听原生DOM事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个$event属性：v-on:click="handle('ok', $event)"。

官網栗子：

<div id="example-1">
  <button v-on:click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>

var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})

結果：當add1按鈕,下面的The button above has been clicked XXX times.中的XXX數字則會相應增加。

栗子二：

<!-- Template --> 
<div id="app"> 
<h1 v-on:click="clickMe">点击我</h1> 
</div> // JavaScript 
var app = new Vue({
 el: '#app', 
methods: { 
clickMe: function() { 
alert("点击我，我就出来了!(^_^)") 
} 
}, 
data: { } 
})

效果：

在Vue的模板中，我们使用了v-on，并且绑定了一个click事件（v-on:click），然后给这个click事件绑定了一个事件clickMe。而这个clickMe在Vue中，我们一般是放在methods: {}中，也就是说clickMe这个函数写在methods中。

看到v-on:click="clickMe"，大家可能会看到我们在HTML中的onclock="clickEvent"。是不是非常的相似。从外表现象看，他们写法不一样，但是起到的结果是一致的。在Vue中，我们还可以使用@click来替代v-on:click。那么他们起到的作用是一样的。

事件处理方法

然而许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。

示例：

<div id="example-2">
  <!-- `greet` 是在下面定义的方法名 -->
  <button v-on:click="greet">Greet</button>
</div>

var example2 = new Vue({
  el: '#example-2',
  data: {
    name: 'Vue.js'
  },
  // 在 `methods` 对象中定义方法
  methods: {
    greet: function (event) {
      // `this` 在方法里指向当前 Vue 实例
      alert('Hello ' + this.name + '!')
      // `event` 是原生 DOM 事件
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})

// 也可以用 JavaScript 直接调用方法
example2.greet() // => 'Hello Vue.js!'

點擊后彈出第一個alert結果為：

點擊后彈出第二個alert結果為：

内联处理器中的方法

除了直接绑定到一个方法，也可以在内联 JavaScript 语句中调用方法：

<div id="example-3">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>

new Vue({
  el: '#example-3',
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})

點擊第一個button結果為：

點擊第二個button結果為：

在Vue中，对于v-on的使用方式，除了上面的示例展示之外，还有下面这些使用方式：

<!-- 方法处理器 -->
<button v-on:click="clickMe"></button>

<!-- 对象语法 （v2.4.0版本以上才支持） -->
<button v-on="{ mousedown: doThis, mouseup: doThat}"></button>

<!-- 内联语句 -->
<button v-on:click="doThat('Hello', $event)"></button>

<!-- 缩写 -->
<button @click="doThis"></button>

<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>

<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>

<!-- 阻止默认行为， 没有表达式 -->
<form @submit.prevent></form>

<!-- 串联修饰符 -->
<button @click.stop.prevent="doThis"></button>

<!-- 键修饰符， 键别名 -->
<input @keyup.13="onEnter" />

<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>

在子组件上监听自定义事件（当子组件触发my-event时将调用事件处理器）：

<my-component @my-event="handleThis"></my-component>
<!-- 内联语句 -->
<my-component @my-event="handleThis(123, $event)"></my-component>
<!-- 组件中的原生事件 -->
<my-component @click.native="onClick"></my-component>

事件修饰符：

.stop：调用event.stopPropagation()
.prevent：调用event.preventDefault()
.capture：添加事件侦听器时使用capture模式
.self：只当事件是从侦听器绑定的元素本身触发时才触发回调
.{keyCode | keyAlias}：只当事件是从特定键触发时才触发回调
.native：监听组件根元素的原生事件
.once：只触发一次回调
.left：只当点击鼠标左键时触发，（v2.2.0+ 才具有）
.right：只当点击鼠标右键时触发，（v2.2.0+ 才具有）
.middle：只当点击鼠标中键时触发，（v2.2.0+ 才具有）
.passive：以{passive: true}模式添加侦听器，（v2.3.0+ 才具有）

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

------------------------------------------------------------------------------------------------------------------------------------------------------------------------

2.1.4 新增.once（点击事件将只会触发一次）

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

不像其它只能对原生的 DOM 事件起作用的修饰符，.once 修饰符还能被用到自定义的组件事件上。

2.3.0 新增

Vue 还对应 addEventListener 中的 passive 选项提供了 .passive 修饰符。

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

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

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

按键修饰符

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

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

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

<input v-on:keyup.page-down="onPageDown">

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

系统修饰键

2.1.0 新增

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

.ctrl
.alt
.shift
.meta

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

例如：

<!-- Alt + C -->
<input @keyup.alt.67="clear">

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

请注意修饰键与常规按键不同，在和 keyup 事件一起用时，事件触发时修饰键必须处于按下状态。换句话说，只有在按住 ctrl 的情况下释放其它按键，才能触发 keyup.ctrl。而单单释放 ctrl 也不会触发事件。如果你想要这样的行为，请为 ctrl 换用 keyCode：keyup.17。

.exact 修饰符

2.5.0 新增

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

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

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

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

鼠标按钮修饰符