vue中的事件修饰符介绍和示例

当在 Vue 模板中使用事件处理函数时，我们可以添加事件修饰符，这些修饰符用来表示某个事件应该如何被处理。下面我们来详细了解 Vue 中事件修饰符的使用。

修饰符的语法

Vue中的事件修饰符通过添加点号来表示，例如：

<button v-on:click.prevent="submit">Submit</button>

在上面的示例中，事件修饰符 .prevent 用来阻止默认事件的发生。

常用的事件修饰符介绍

下面是 Vue 中常用的事件修饰符：

.stop

用来阻止事件的进一步传播，例如：

<div v-on:click="handleDivClicked">
  <button v-on:click.stop="handleButtonClick">Button</button>
</div>

在上面的代码中，按钮上的点击事件不会向上冒泡，也就不会调用 handleDivClicked 方法。

.prevent

用来阻止默认事件的发生，例如：

<form v-on:submit.prevent="handleSubmit">
  <button type="submit">Submit</button>
</form>

在上面的代码中，表单的默认提交行为被阻止，并调用 handleSubmit 方法来处理表单的提交。

.capture

用来监听事件的捕获阶段而非冒泡阶段，例如：

<div v-on:click.capture="handleDivClicked">
  <button v-on:click="handleButtonClick">Button</button>
</div>

在上面的代码中，监听 div 元素的点击事件，而不是监听按钮的点击事件。需要注意的是，无论是冒泡还是捕获，都会进行事件委托。

.self

只有在事件原件上的事件才会触发该事件，例如：

<div v-on:click.self="handleDivClicked">
  <button v-on:click="handleButtonClick">Button</button>
</div>

在上面的代码中，只有 div 元素上的点击事件才会触发 handleDivClicked 方法，按钮的点击事件将不会被触发。

.once

只会触发一次事件，例如：

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

在上面的代码中，按钮只会触发一次 handleButtonClick 方法。

事件修饰符示例

下面是两个示例，这两个示例都是使用Vue来实现的Todo List，一个使用了事件修饰符，一个没有使用。

使用事件修饰符的Todo List

<div id="app">
  <div>
    <input type="text" v-model="newTodo" v-on:keyup.enter="addTodo">
    <button v-on:click="addTodo">Add Todo</button>
  </div>
  <ul>
    <li v-for="(todo, index) in todos" :key="index" v-on:click="removeTodo(index)">
      {{ todo }}
    </li>
  </ul>
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      newTodo: '',
      todos: []
    },
    methods: {
      addTodo: function() {
        this.todos.push(this.newTodo);
        this.newTodo = '';
      },
      removeTodo: function(index) {
        this.todos.splice(index, 1);
      }
    }
  });
</script>

在上面的代码中，我们使用事件修饰符 .enter 来添加代办事项，使用 .click 来删除代办事项。

不使用事件修饰符的Todo List

<div id="app">
  <div>
    <input type="text" v-model="newTodo">
    <button v-on:click="addTodo">Add Todo</button>
  </div>
  <ul>
    <li v-for="(todo, index) in todos" :key="index">
      <span v-on:click="removeTodo">{{ todo }}</span>
    </li>
  </ul>
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      newTodo: '',
      todos: []
    },
    methods: {
      addTodo: function() {
        this.todos.push(this.newTodo);
        this.newTodo = '';
      },
      removeTodo: function(event) {
        var todo = event.target.innerText;
        var index = this.todos.indexOf(todo);
        this.todos.splice(index, 1);
      }
    }
  });
</script>

在上面的代码中，我们实现代办事项的添加和删除，但是需要手动获取到代办事项的文字然后再找出对应的下标，相对来说略显麻烦。如果使用了事件修饰符，代码就可以变得简洁易懂。