Vue事件处理

监听事件

我们可以使用v-on指令来监听 DOM 事件并在它们被触发时运行一些 JavaScript。

例如：

<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
  }
})

结果：

方法事件处理程序

但是，许多事件处理程序的逻辑会更复杂，因此将 JavaScript 保留在v-on属性值中是不可行的。这就是为什么v-on也可以接受您想要调用的方法的名称。

例如：

<div id="example-2">
  <!-- `greet` is the name of a method defined below -->
  <button v-on:click="greet">Greet</button>
</div>

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

结果：

内联处理程序中的方法

除了直接绑定到方法名称之外，我们还可以在内联 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)
    }
  }
})

结果：

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

<button v-on:click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>

// ...
methods: {
  warn: function (message, event) {
    // now we have access to the native event
    if (event) {
      event.preventDefault()
    }
    alert(message)
  }
}

事件修饰符

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

为了解决这个问题，Vue公司提供事件修饰符的v-on。回想一下，修饰符是由点表示的指令后缀。

.stop

.prevent

.capture

.self

.once

.passive

<!-- 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"></a>
<!-- just the modifier -->
<form v-on:submit.prevent></form>
<!-- use capture mode when adding the event listener -->
<!-- i.e. an event targeting an inner element is handled here before being handled by that element -->
<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>

使用修饰符时顺序很重要，因为相关代码是以相同的顺序生成的。因此 usingv-on:click.prevent.self将阻止所有点击，而v-on:click.self.prevent只会阻止点击元素本身。

键修饰符

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

<!-- only call `vm.submit()` when the `key` is `Enter` -->
<input v-on:keyup.enter="submit">

您可以KeyboardEvent.key通过将它们转换为 kebab-case来直接使用通过修饰符公开的任何有效键名。

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

在上面的例子中，只有在$event.key等于时才会调用处理程序'PageDown'。如果您想了解更多相关知识，不妨来关注一下极悦的Vue.js视频教程，课程内容详细，通俗易懂，适合小白学习，希望对大家能够有所帮助。