方法和事件处理

方法处理程序

我们可以使用 v-on 指令来监听 DOM 事件

<div id="example">
  <button v-on:click="greet">Greet</button>
</div>

我们将一个点击事件监听器绑定到一个名为 greet 的方法。以下是我们在 Vue 实例中定义该方法的方法

var vm = new Vue({
  el: '#example',
  data: {
    name: 'Vue.js'
  },
  // define methods under the `methods` object
  methods: {
    greet: function (event) {
      // `this` inside methods point to the Vue instance
      alert('Hello ' + this.name + '!')
      // `event` is the native DOM event
      alert(event.target.tagName)
    }
  }
})
// you can invoke methods in JavaScript too
vm.greet() // -> 'Hello Vue.js!'

自己测试一下

内联语句处理程序

除了直接绑定到方法名之外，我们还可以使用内联 JavaScript 语句

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

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

结果

与内联表达式的限制类似，事件处理程序仅限于 **一个语句**。

有时我们还需要在内联语句处理程序中访问原始 DOM 事件。您可以使用特殊的 $event 变量将其传递给方法

<button v-on:click="say('hello!', $event)">Submit</button>

// ...
methods: {
  say: function (msg, event) {
    // now we have access to the native event
    event.preventDefault()
  }
}

事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是一个非常常见的需求。虽然我们可以在方法中轻松地做到这一点，但如果方法可以纯粹地关于数据逻辑，而不是处理 DOM 事件细节，那会更好。

为了解决这个问题，Vue.js 为 v-on 提供了两个 **事件修饰符**：.prevent 和 .stop。回想一下，修饰符是指令的后缀，用点号表示

<!-- the click event's propagation will be stopped -->
<a v-on:click.stop="doThis"></a>
<!-- the submit event will no longer reload the page -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- modifiers can be chained -->
<a v-on:click.stop.prevent="doThat">
<!-- just the modifier -->
<form v-on:submit.prevent></form>

在 1.0.16 中，引入了两个额外的修饰符

<!-- use capture mode when adding the event listener -->
<div v-on:click.capture="doThis">...</div>
<!-- only trigger handler if event.target is the element itself -->
<!-- i.e. not from a child element -->
<div v-on:click.self="doThat">...</div>

键修饰符

在监听键盘事件时，我们经常需要检查常见的键码。Vue.js 还允许在监听键盘事件时为 v-on 添加键修饰符

<!-- only call vm.submit() when the keyCode is 13 -->
<input v-on:keyup.13="submit">

记住所有键码很麻烦，所以 Vue.js 为大多数常用的键提供了别名

<!-- same as above -->
<input v-on:keyup.enter="submit">
<!-- also works for shorthand -->
<input @keyup.enter="submit">

以下是键修饰符别名的完整列表

enter
tab
delete（捕获“Delete”和，如果键盘有的话，“Backspace”）
esc
space
up
down
left
right

**1.0.8+：** 也支持单字母键别名。

**1.0.17+：** 您还可以定义自定义键修饰符别名

// enable @keyup.f1
Vue.directive('on').keyCodes.f1 = 112

为什么在 HTML 中监听？

您可能担心这种事件监听方法违反了关于“关注点分离”的良好旧规则。请放心 - 由于所有 Vue.js 处理程序函数和表达式都严格绑定到处理当前视图的 ViewModel，因此不会造成任何维护困难。实际上，在使用 v-on 时有几个好处

通过简单地浏览 HTML 模板，可以更容易地找到 JS 代码中的处理程序函数实现。
由于您不必在 JS 中手动附加事件监听器，因此您的 ViewModel 代码可以是纯粹的逻辑，并且与 DOM 无关。这使得测试更容易。
当 ViewModel 被销毁时，所有事件监听器都会自动删除。您无需担心自己清理它。

← 列表渲染表单输入绑定 →