深入研究Vue的事件处理

尼耳多
327 阅读5分钟

当建立一个动态网站时，你需要监听不同类型的事件。为了驱动我们的网站或网络应用的这些类型的互动，我们可以使用事件处理。

在Vue中，有几种不同的方法来处理事件，但最好的解决方案取决于你要监听的事件类型，你想对该事件做出怎样的反应，以及你希望通过该事件实现什么。

例如，如果用户点击了一个按钮，提交了一个表单，甚至只是移动了一下鼠标，你可以添加一个反应，比如显示一个动画或调用一个函数。添加这些类型的事件为终端用户提供了丰富的用户体验。

在这篇文章中，我们将介绍Vue中处理事件的基础知识，我们将学习如何在一个真实世界的应用中应用事件处理。我们将学习如何通过监听事件、拦截事件以及使用下面描述的方法处理事件来改变或阻止一个元素的行为。

要理解本教程，你应该熟悉JavaScript中的事件。让我们开始吧!

创建内联事件

首先，让我们看看Vue中事件处理的一个常见用例，创建内联事件。通过Vue的本地指令v-on ，你可以监听浏览器的本地DOM事件。在下面的代码块中，我们将监听一个按钮的点击事件，然后改变按钮的文本。

<template>
  <div>
<button v-on:click='text="Clicked!"'>{text}</button>
</div>  
</template>
<script>
export default {
  name: 'InlineEvent',
  data: function () {
    return {
      text: "Click Me"
    }
  }
}
</script>

另外，我们可以使用v-on 指令调用一个函数来显示一个警报。

<template>
  <div>
<button v-on:click='showAlert'>Show alert</button>
</div>  
</template>
<script>
export default {
  name: 'InlineEvent',

  methods:{
  showAlert: ()=>{
    alert("Hola, buenos dia")
  }
  }
}
</script>

在上面的两个例子中，我们将v-on 指令添加到DOM元素中，以拦截其事件。

<button v-on:click="eventHandler"></button>

我们还向v-on 指令添加了一个参数，这是我们要处理的事件的名称。在我们的例子中，这个参数是click 。

接下来，我们将为指令绑定一个表达式，这通常是一个你想用来处理事件的方法。我们把我们的称为eventHandler ，并使用了v-on 指令的速记法。

<button @click="eventHandler"></button>

Vue中的常见事件

在我们到目前为止的例子中，我们已经监听了发生在onclick 的事件。让我们回顾一下其他一些流行的事件类型。

鼠标事件

  • onclick
  • ondragstart
  • ondrop
  • dblclick
  • onmousedown
  • onmouseup
  • mouseover

键盘事件

  • onkeydown
  • onkeypress
  • onkeyup

HTML表单和对象事件

  • onchange
  • onsubmit
  • onreset
  • onscroll
  • onerror

在Vue文档中还有更多的事件描述，你可以在设计你的应用程序时选择。你应该回顾并尝试使用这些事件，以确保你的设计对用户来说是尽可能直观的。

调用元素v-on

在Vue中，你可以使用在元素的v-on 指令上调用的方法，这些方法将包含复杂的逻辑，只要事件被触发就会执行。例如，让我们考虑一个警报发射onclick 。

<template>
  <div>
<button v-on:click='showAlert("Hello, good morning")'>Show alert</button>
</div>  
</template>
<script>
export default {
  name: 'InlineEvent',
  methods:{
  showAlert: (message)=>{
    alert(message)
  }
  }
}
</script>

在上面的代码块中，我们直接从v-on 指令中向showAlert 方法传递了一个消息。然而，我们可以通过给函数添加更多的上下文来改进这段代码。在下面的代码块中，我们将通过将Hello 与showAlert 函数中传递的任何文本相连接来更新showAlert 显示的消息。

<template>
  <div>
<button v-on:click='showAlert("Good Morning!")'>Show alert</button>
</div>  
</template>
<script>
export default {
  name: 'InlineEvent',

  methods:{
  showAlert: (message)=>{
    alert(`Hello, ${message}`)
  }
  }
}
</script>

现在我们知道了如何拦截和创建一个新的事件，让我们来学习如何改变和阻止一个事件的默认行为。

修改和阻止事件

在Vue中，我们可以使用事件修改器来改变一个事件的行为或阻止默认的事件。

例如，假设我们有一个包含一个按钮的表单。默认情况下，如果用户点击按钮或按下回车键，表单将被提交，页面将被刷新。在单页应用程序中，我们希望避免完全重载页面，所以我们将使用AJAX来提交表单。

阻止默认行为

为了防止事件的默认行为，我们可以在Vue中调用.prevent 修改器，它可以调用本地的event.preventDefault() 方法。这一系列的步骤可以防止事件在表单提交后重新加载页面。

另一方面，.stop 修改器通过调用event.stopPropagation() ，完全停止了DOM事件的默认行为。例如，在下面的代码中，我们在submit 上使用了.stop 和.submit 修改器，对v-on 指令。

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

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

这两个方法执行类似的任务，并一起使用。你可以使用.prevent 来拦截表单的默认行为，使用.stop 来防止父元素上的事件冒泡。

改变默认行为

要改变默认行为，让我们看一下下面代码块中的例子。默认情况下，当用户点击Click Me 链接时，他们会看到一个警报。然后，谷歌将在一个新的标签页中打开。

<a href = "http://www.google.com" v-on:click = "alert('Hola, buenos dias')">Click Me</a>

然而，如果我们不想在显示警报后打开链接，我们可以使用.prevent 修改器，如下图所示。

<a href = "http://www.google.com" v-on:click.prevent = "alert('Hola, buenos dias')">Click Me</a>

.prevent 修饰符可以阻止链接打开，并且只执行分配给该标签的方法。现在，点击按钮将发送一条警报信息而不打开链接。

其他事件修改器

在我们的例子中，我们使用了Vue中的.prevent 修改器。让我们来看看其他几个流行的修饰符和它们的功能。

  • .self: 只有当event.target 是元素本身时才会触发事件
  • .once ：防止事件执行超过一次
  • .keyup ：监听键盘事件
  • .capture ：在处理触发事件的元素之前处理针对内部元素的事件

关键事件修改器

Vue的按键事件修改器为监听键盘提供了广泛的支持。例如，我们可以使用按键修改器来监听特定按键被按下的事件。请注意，有多个单词的键名通常是用kebab大小写的。

在下面的例子中，我们监听的是enter 键事件。

<input type = "text" v-on:keyup.enter = "alert('Hola, buenos dias!')" />

当上面的输入元素被聚焦时，按下回车键将触发警报功能。

键事件修改器遵循的结构是v-on.keyevent.keyname 。你也可以嵌套多个键名，如v-on.keyup.ctrl.enter 。

创建自定义事件

在Vue中，父组件可以通过prop属性将数据传递给它的子组件，然而，子组件不能向父组件发送数据。然而，我们可以使用$emit ，使父组件监听子组件，并允许子组件向父组件传递数据。

在下面的例子中，包含父组件的App.vue ，正在监听子组件的Child.vue 。

//App.vue (parent component)
<template>
  <div>
    <child @show-alert="updateAlert"> </child>
  </div>
</template>
<script>
import Child from "@/components/Child.vue";
export default {
  components: {
    Child,
  },
  methods: {
    updateAlert(item) {
      alert(item);
    },
  },
};
</script>

//Child.vue (child component)

<template>
  <div>
    <button class="Button" @click="emitAlert('Hello world')">Show alert</button>
  </div>
</template>
<script>
export default {
  methods: {
    emitAlert(item) {
      this.$emit("show-alert", item);
    },
    updateAlert(item) {
      alert(item);
    },
  },
};
</script>

结论

尽管事件处理看起来很简单，但一个不正确或不完整的事件处理程序可能会使你的代码混乱，甚至破坏你的应用程序。在本教程中，我们了解了在Vue应用程序中处理事件的几种不同方法。

我们涵盖了用v-on 指令添加内联事件，并回顾了一些不同类型的事件，我们可以用它们来定制我们的应用程序。我们还学习了如何使用修改器来防止或改变事件的默认行为。最后，我们介绍了如何使用$emit 来改变子组件和父组件之间的通信。

深入了解Vue的事件处理》一文首次出现在LogRocket博客上。

avatar
文章
阅读
粉丝