[Vue] Use basic event handling in Vue

最新推荐文章于 2025-09-12 16:56:45 发布

weixin_30791095

最新推荐文章于 2025-09-12 16:56:45 发布

阅读量52

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Answer1215/p/6308722.html

本文介绍Vue.js中如何使用事件修饰符来实现复杂的功能，包括按钮点击计数、表单提交拦截、键盘组合键监听等。通过实例展示了Vue事件处理的灵活性。

Let's use a range of events and their modifiers to look at the cool ways we can deal with event handlers in Vue.

<template>
  <div>
    <button @mouseenter="counter += 1">Increment the counter!</button>
    <button @click="increment">Increment using a method!</button>
    <div v-text="counter"></div>
    <form @submit.prevent="logName">
      <input @keyup.ctrl.alt.shift.down="keyHandler" v-model="firstName" placeholder="First name..." />
    </form>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        counter: 0,
        firstName: ''
      }
    },

    methods: {
      increment() {
        console.log('counter incremented!')
        this.counter += 1
      },

      logName() {
        console.log('firstName:', this.firstName)
      },

      keyHandler() {
        this.firstName = 'Evan'
      }
    }
  }
</script>

Using '@' replace 'v-on'
@submit.prevent -> preventDefault
@submit.stop
@submit.once
@keyup.ctrl.alt.shift.down --> "ctrl + alt + shift + down" 4 keys click together

转载于:https://www.cnblogs.com/Answer1215/p/6308722.html