vue事件处理有哪些方法_Vue事件处理方法

vue事件处理有哪些方法

Often when we are developing user interfaces for the web we would like to customize the behavior of DOM events to provide a richer user experience. Form submissions, button clicks, and even scrolling all have associated DOM events that can be listened for and handled by our code. Whether we want to prevent or change the default behavior of these events, we need to listen to them and consume these events to achieve our desired behavior.

通常，当我们为Web开发用户界面时，我们希望自定义DOM事件的行为以提供更丰富的用户体验。 表单提交，按钮单击甚至滚动都具有关联的DOM事件，这些事件可以由我们的代码侦听和处理。 无论我们是要阻止还是更改这些事件的默认行为，我们都需要倾听它们并使用这些事件以实现我们想要的行为。

Vue provides the v-on directive which allows us to listen for and customize DOM events on our HTML elements by providing it with the name of the event. For example, v-on:click allows us to consume the click DOM event. Check out Mozilla’s full list of DOM events for more possibilities.

Vue提供了v-on指令，该指令允许我们通过为其提供事件名称来侦听和自定义HTML元素上的DOM事件。 例如， v-on:click允许我们使用click DOM event 。 查看Mozilla的DOM事件的完整列表，以获取更多可能性。

内联事件处理 (Inline Event Handling)

Using the v-on directive we can listen for the click event on a button and increment a simple counter that tracks the amount of clicks. By providing JavaScript code to the v-on directive, we’re able to have it executed in the context of our component whenever the click event is triggered.

使用v-on指令，我们可以监听button上的click事件，并增加一个简单的计数器来跟踪点击量。 通过向v-on指令提供JavaScript代码，无论何时触发click事件，我们都可以在组件的上下文中执行它。

InlineMethodComponent.vue

InlineMethodComponent.vue

<template>
  <div>
    <h2>InlineMethodComponent</h2>
    <button v-on:click="clicked += 1">
      Clicked {{ clicked }} times
    </button>
  </div>
</template>

<script>
export default {
  name: 'InlineMethodComponent',
  data: function () {
    return {
      clicked: 0
    }
  }
}
</script>

组成方法 (Component Methods)

Now that we’re able to handle DOM events, we’ll want to begin implementing logic that becomes more complex. It would be quite cumbersome and bad practice to add a bunch of complex logic inside the v-on directive. Luckily, Vue allows us to define event handling methods on the component. All we need to do is pass the name of the component’s method to the v-on directive:

现在我们已经能够处理DOM事件，我们将要开始实现变得更加复杂的逻辑。 在v-on指令内添加一堆复杂的逻辑将是非常繁琐的做法。 幸运的是， Vue允许我们在组件上定义事件处理方法 。 我们要做的就是将组件方法的名称传递给v-on指令：

SimpleMethodComponent.vue

SimpleMethodComponent.vue

<template>
  <div>
    <h2>SimpleMethodComponent</h2>
    <button v-on:click="log">
      Click Me
    </button>
  </div>
</template>

<script>
export default {
  name: 'SimpleMethodComponent',
  methods: {
    log() {
      console.log('Button clicked!');
    }
  }
}
</script>

内联方法调用 (Inline Method Calls)

Sometimes we want to be able to pass information to our method calls or even consume the DOM event itself. Instead of passing the name of a method to the v-on directive, we can instead pass a call to the method itself, passing in any information we desire. We can also use the special variable $event which contains the DOM event itself.

有时我们希望能够将信息传递给我们的方法调用，甚至消耗DOM事件本身。 除了将方法的名称传递给v-on指令之外，我们还可以传递对方法本身的调用，从而传递所需的任何信息。 我们还可以使用包含DOM事件本身的特殊变量$event 。

InlineMethodCallComponent.vue

InlineMethodCallComponent.vue

<template>
  <div>
    <h2>InlineMethodCallComponent</h2>
    <button v-on:click="log('clicked!', $event)">
      Click Me
    </button>
  </div>
</template>

<script>
export default {
  name: 'InlineMethodCallComponent',
  methods: {
    log(msg, event) {
      console.log(event.target.tagName, msg);
    }
  }
}
</script>

事件方法修饰符 (Event Method Modifiers)

There are times where we’d like to modify or even prevent the default behavior of DOM events. Vue provides us with some modifiers that we can chain to the name of the event that we provide to the v-on directive.

有时候我们想修改甚至阻止DOM事件的默认行为。 Vue为我们提供了一些修饰符，可以将它们链接到我们提供给v-on指令的事件的名称。

For example, if we had a form containing a button with type Submit, a user’s click would refresh the page. With single page applications (SPAs), we want to avoid full page reloads. To do this we could chain the .prevent modifier which prevents the event from reloading the page by calling event.preventDefault(). The .stop modifier also completely halts the default behavior of the DOM event by calling event.stopPropagation() which often needs to be called in custom event handlers.

例如，如果我们有一个包含带有类型为Submit的button的form ，那么用户的单击将刷新页面。 对于单页面应用程序(SPA)，我们希望避免重新加载整个页面。 为此，我们可以链接.prevent修饰符，以防止事件通过调用event.preventDefault()重新加载页面。 .stop修饰符还通过调用event.stopPropagation()来完全停止DOM事件的默认行为，该事件通常需要在自定义事件处理程序中调用。

MethodCallModifiersComponent.vue

MethodCallModifiersComponent.vue

<template>
  <div>
    <h2>MethodCallModifiersComponent</h2>
    <form
      v-on:submit.stop.prevent="log('clicked!', $event)">
      <button type="Submit">
        Click Me
      </button>
    </form>
  </div>
</template>

<script>
export default {
  name: 'MethodCallModifiersComponent',
  methods: {
    log(msg, event) {
      console.log(event.target.tagName, msg);
    }
  }
}
</script>

事件方法键修饰符 (Event Method Key Modifiers)

Sometimes we have DOM events that are triggered by keyboard presses. Vue provides us with event modifiers tailored for key-based events.

有时我们会发生由键盘按键触发的DOM事件 。 Vue为我们提供了针对基于键的事件量身定制的事件修饰符。

For example, if we had an input element, we could listen to key presses for both Enter and Esc. By customizing this behavior we could allow Enter to call our log() method and allow Escape to provide a quick way for the user to reset their input.

例如，如果我们有一个input元素，则可以收听Enter和Esc按键。 通过自定义此行为，我们可以允许Enter调用我们的log()方法，并允许Escape为用户提供一种快速的方法来重置其输入。

MethodCallKeyModifiersComponent.vue

MethodCallKeyModifiersComponent.vue

<template>
  <div>
    <h2>MethodCallKeyModifiersComponent</h2>
    <input
      placeholder="Press Enter"
      v-on:keyup.esc.stop="clear"
      v-on:keyup.enter.stop="log"
    />
  </div>
</template>

<script>
export default {
  name: 'MethodCallKeyModifiersComponent',
  methods: {
    log(event) {
      console.log(
        event.target.tagName,
        event.type,
        event.key,
        event.target.value
      );
    },
    clear(event) {
      event.target.value = '';
    }
  }
}
</script>

结语 (Wrapping Up)

Thanks to the v-on directive we’re able to intercept and customize the behavior of DOM events in a pain-free manner. Since these events are tied to an individual component we don’t have to worry to tell our event handlers to stop listening - they are destroyed when the component is destroyed. No clean-up!

多亏了v-on指令，我们可以轻松地拦截和自定义DOM事件的行为。 由于这些事件与单个组件相关联，因此我们不必担心告诉事件处理程序停止侦听-在销毁组件时销毁它们。 没有清理！

Make sure to check out the full reference for both event modifiers and key modifiers to discover the possibilities they allow!

确保检查出事件修饰符和键修饰符的完整参考，以发现它们允许的可能性！

翻译自: https://www.digitalocean.com/community/tutorials/vuejs-event-handling-methods

vue事件处理有哪些方法