Vuejs教程-在Vue.js中，事件用于响应用户的操作。如果您使用Vue.js构建动态网站，您肯定希望它能够对事件做出响应，例如当用户点击按钮、提交表单或移动鼠标时，Vue.js网站应该做出相应的反应。

Vue.js事件处理

要在Vue.js中处理事件，我们需要向相关的DOM元素添加v-on指令。例如，如果您想要处理按钮元素的点击事件，可以在Vue模板中添加以下代码：

<!-- Syntax -->
<button v-on:click="clickHandler"></button>

<!-- Shorthand alternative using @ -->
<button @click="clickHandler"></button>

我们在v-on指令后添加一个参数，该参数是我们要处理的事件名称。在上面的例子中，我们处理的是点击事件（click事件）。然后，我们将一个表达式绑定到该指令，通常是一个要用于处理事件的方法。在这个例子中，我们称之为clickHandler。

可以处理的Vue.js事件类型

除了点击事件，Vue.js还可以处理许多其他类型的DOM事件，包括任何Web或移动原生事件，以及自定义事件。以下是通常用于处理的一些常见事件：

  • submit
  • keyup
  • drag
  • scroll
  • error
  • abort
  • mouseover
  • mouseout
  • load 等等

事件处理方法

让我们看一些简单的例子，演示如何使用Vue.js事件处理方法。

点击事件

以下是演示Vue.js中点击事件处理的例子：

Index.html 文件：

<!DOCTYPE html>
<html>
<head>
  <title>Vue.js Event Handling</title>
  <link rel="stylesheet" href="index.css">
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <button v-on:click="displayNumbers">Click Me to Add Numbers</button>
    <h2>Add Numbers 100 + 200 = {{ total }}</h2>
  </div>
  <script src="index.js"></script>
</body>
</html>

Index.js 文件：

var vm = new Vue({
  el: "#app",
  data: {
    num1: 100,
    num2: 200,
    total: '',
  },
  methods: {
    displayNumbers: function() {
      this.total = this.num1 + this.num2;
    }
  }
});

Output:

当您点击按钮时，它会将数字相加并显示在页面上。

鼠标移入和移出事件

现在，让我们来看两个名为mouseover和mouseout的新Vue.js事件。请参考以下例子：

Index.html 文件：

<!DOCTYPE html>
<html>
<head>
  <title>Vue.js Event Handling</title>
  <link rel="stylesheet" href="index.css">
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <div v-bind:style="styleObj" v-on:mouseover="changeBgColor" v-on:mouseout="restoreBgColor"></div>
  </div>
  <script src="index.js"></script>
</body>
</html>

Index.js 文件：

var vm = new Vue({
  el: "#app",
  data: {
    styleObj: {
      width: "100px",
      height: "100px",
      backgroundColor: "red"
    }
  },
  methods: {
    changeBgColor: function() {
      this.styleObj.backgroundColor = "blue";
    },
    restoreBgColor: function() {
      this.styleObj.backgroundColor = "brown";
    }
  }
});

Output:

在上面的输出中，初始状态下，div元素的背景颜色是红色。当您将鼠标指针移到该框上时，框的颜色将变为蓝色。当您将鼠标指针移出框时，背景颜色将变为棕色。

Vue.js事件修饰符

Vue.js提供了一些可以用于v-on属性的事件修饰符。使用事件修饰符，可以很容易地在事件处理程序中调用event.preventDefault()或event.stopPropagation()。下面是可用于v-on属性的一些常见修饰符列表：

  • .once
  • .prevent
  • .stop
  • .capture
  • .self
  • .passive

.once 事件修饰符

它允许事件仅执行一次。

语法：

<button v-on:click.once="buttonClicked">Click Me Once</button>

您必须使用点运算符调用修饰符，如上面的语法所示。

让我们通过一个简单的示例来理解.once事件修饰符的概念和工作原理：

Index.html 文件：

<!DOCTYPE html>
<html>
<head>
  <title>Vue.js Event Handling</title>
  <link rel="stylesheet" href="index.css">
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <button v-on:click.once="buttonClickedOnce" v-bind:style="styleObj">Click Me Once</button>
    <br><br>
    <button v-on:click="buttonClicked" v-bind:style="styleObj">Click Me Anytime</button>
  </div>
  <script src="index.js"></script>
</body>
</html>

Index.js 文件：

var vm = new Vue({
  el: "#app",
  data: {
    styleObj: {
      fontSize: "20px",
      padding: "10px 20px",
      cursor: "pointer"
    }
  },
  methods: {
    buttonClickedOnce: function() {
      alert("Button clicked only once!");
    },
    buttonClicked: function() {
      alert("Button clicked multiple times!");
    }
  }
});

Output:

在上面的输出中，当您点击"Click Me Once"按钮时，它会显示一个警告框，内容为"Button clicked only once!"。而当您点击"Click Me Anytime"按钮时，它将显示"Button clicked multiple times!"。

这是因为我们为第一个按钮使用了.once事件修饰符，所以它只会触发一次。而第二个按钮没有使用修饰符，因此可以多次触发。

.prevent 事件修饰符

.prevent事件修饰符是用于阻止默认事件的执行。当您在事件处理程序中使用.prevent修饰符时，它将调用event.preventDefault()，防止元素的默认行为。

语法：

<form v-on:submit.prevent="onSubmit">

在上面的例子中，表单的提交将不会刷新页面，因为我们使用了.prevent事件修饰符。

让我们通过一个简单的示例来理解.prevent事件修饰符的概念和工作原理：

Index.html 文件：

<!DOCTYPE html>
<html>
<head>
  <title>Vue.js Event Handling</title>
  <link rel="stylesheet" href="index.css">
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <form v-on:submit.prevent="onSubmit">
      <label for="inputText">Enter your name: </label>
      <input type="text" id="inputText" v-model="name">
      <button type="submit">Submit</button>
    </form>
    <p>Your name: {{ name }}</p>
  </div>
  <script src="index.js"></script>
</body>
</html>

Index.js 文件：

var vm = new Vue({
  el: "#app",
  data: {
    name: ""
  },
  methods: {
    onSubmit: function() {
      alert("Form submitted!");
      // 在这里您可以执行其他表单提交相关的操作
    }
  }
});

Output:

在上面的输出中，当您在文本框中输入文本并点击提交按钮时，它将显示一个警告框，内容为"Form submitted!"。但是，页面不会刷新，因为我们使用了.prevent事件修饰符。

.stop 事件修饰符

.stop事件修饰符用于阻止事件冒泡。当您在事件处理程序中使用.stop修饰符时，它将调用event.stopPropagation()，从而阻止事件继续传播到父元素。

语法：

<div v-on:click="parentClicked">
  <button v-on:click.stop="childClicked">Child Button</button>
</div>

在上面的例子中，当点击子按钮时，事件不会传播到父元素的点击处理程序。

让我们通过一个简单的示例来理解.stop事件修饰符的概念和工作原理：

Index.html 文件：

<!DOCTYPE html>
<html>
<head>
  <title>Vue.js Event Handling</title>
  <link rel="stylesheet" href="index.css">
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <div v-on:click="parentClicked" style="border: 1px solid #ccc; padding: 20px;">
      <button v-on:click.stop="childClicked">Child Button</button>
    </div>
  </div>
  <script src="index.js"></script>
</body>
</html>

Index.js 文件：

var vm = new Vue({
  el: "#app",
  methods: {
    parentClicked: function() {
      alert("Parent Element Clicked!");
    },
    childClicked: function() {
      alert("Child Element Clicked!");
    }
  }
});

Output:

在上面的输出中，当您点击"Child Button"时，它会显示一个警告框，内容为"Child Element Clicked!"。但是，不会触发父元素的点击处理程序，因为我们使用了.stop事件修饰符。

.capture 事件修饰符

.capture事件修饰符用于添加一个事件监听器，该监听器在捕获阶段处理事件，而不是在冒泡阶段处理事件。通常，事件处理程序是在冒泡阶段处理的。

语法：

<div v-on:click.capture="captureHandler">Capturing Event</div>

在上面的例子中，当点击<div>元素时，它会在捕获阶段触发captureHandler方法。

.self 事件修饰符

.self事件修饰符用于限制事件处理程序只能由元素自身触发，而不是由子元素触发。

语法：

<div v-on:click.self="handler">Event will trigger only if the div itself is clicked, not its children.</div>

在上面的例子中，当您点击<div>元素本身时，它会触发事件处理程序。但是，如果您点击<div>的子元素，则不会触发处理程序。

.passive 事件修饰符

.passive事件修饰符用于告知浏览器事件监听器不会调用event.preventDefault()。这可以提高事件处理的性能。

语法：

<div v-on:scroll.passive="handler">Scrolling Div</div>

在上面的例子中，当滚动<div>元素时，浏览器将知道不需要等待事件监听器是否调用了event.preventDefault()，从而提高性能。

自定义事件

除了处理DOM事件，Vue.js还允许您创建和触发自定义事件。这对于跨组件通信非常有用。要创建自定义事件，可以使用Vue实例的$emit方法，并指定事件名称。

以下是创建和触发自定义事件的示例：

Index.html 文件：

<!DOCTYPE html>
<html>
<head>
  <title>Vue.js Event Handling</title>
  <link rel="stylesheet" href="index.css">
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <button v-on:click="triggerCustomEvent">Trigger Custom Event</button>
    <child-component v-on:custom-event="onCustomEvent"></child-component>
  </div>
  <script src="index.js"></script>
</body>
</html>

Index.js 文件：

Vue.component('child-component', {
  template: '<div><button v-on:click="triggerEvent">Trigger Event in Child</button></div>',
  methods: {
    triggerEvent: function() {
      this.$emit('custom-event', 'Hello from child component!');
    }
  }
});

var vm = new Vue({
  el: "#app",
  methods: {
    triggerCustomEvent: function() {
      this.$emit('custom-event', 'Hello from parent component!');
    },
    onCustomEvent: function(data) {
      alert(data);
    }
  }
});

Output:

在上面的示例中，当您点击"Trigger Custom Event"按钮时，它会触发来自父组件的自定义事件并显示警告框，内容为"Hello from parent component!"。同时，当您在子组件中点击"Trigger Event in Child"按钮时，它会触发来自子组件的自定义事件并再次显示警告框，内容为"Hello from child component!"。

这样，我们就通过自定义事件实现了父子组件之间的通信。

结论

Vue.js中的事件处理非常重要，它使您可以与用户的交互作出反应，并提供了许多选项来管理事件处理程序的行为。在构建Vue.js应用程序时，您将频繁使用事件处理功能。希望本文对您有所帮助，并加深您对Vue.js事件的理解。

标签: vue, vuejs, vue框架, vue教程, vue学习, vue入门, vue入门教程, vue进阶, vue开发, vue框架使用, vue框架教程, vue框架编程, vue框架学习, vue框架进阶, vue框架学习教程