Event Modifiers trong Vue.js là một tính năng mạnh mẽ cho phép bạn tùy chỉnh hành vi của các sự kiện DOM một cách linh hoạt và tiện lợi. Khi xây dựng các ứng dụng web, việc xử lý các sự kiện như click chuột, gửi biểu mẫu, hay scroll là rất phổ biến. Tuy nhiên, đôi khi bạn có thể muốn kiểm soát cách các sự kiện này hoạt động, và đó là nơi mà Event Modifiers của Vue.js xuất hiện.

Bằng cách sử dụng Event Modifiers, bạn có thể dễ dàng thực hiện các tác vụ như ngăn chặn sự kiện lan truyền, ngăn chặn hành động mặc định của sự kiện, xử lý sự kiện ở chế độ capture thay vì bubble, chỉ kích hoạt sự kiện từ chính phần tử mà nó được gắn vào, hay thậm chí là đánh dấu sự kiện là passive để cải thiện hiệu suất cuộc gọi back scroll.

Trong bài viết này, chúng ta sẽ khám phá sâu hơn về các Event Modifiers phổ biến và cách sử dụng chúng để tạo ra các trải nghiệm người dùng tốt hơn trong ứng dụng Vue.js của bạn.

Để mình lấy một ví dụ cho các bạn dễ hiểu như bình thường khi chúng ta submit một form thì ngay lập tức nó reload lại trang đúng không, để mà ngăn chặn việc load lại trang theo mặc định của browser chúng ta có thể sử dụng attribute prevent vào sau directive v-on. or có thể sử dụng ngắn gọn @submit.prevent.

<form @submit.prevent="handleSubmit">
  <!-- Form fields -->
  <button type="submit">Submit</button>
</form>

Như vậy các Event Modifiers được sử dụng bằng cách thêm tiền tố . vào sau directive v-on.

Một ví dụ nữa, mình có một input để user có thể nhập dữ liệu, sau khi nhập xong user cần phải nhấn enter để dữ liệu này được hiển thi, chúng ta có thể áp dụng Event Modifiers như sau:

<section id="event">
  <input type="text" v-on:input="getContent" v-on:keyup.enter="confirmContent">
  <p>Content: {{ showTextContent }}</p>
</section>

const app = Vue.createApp({
    data() {
        return {
            name: "",
            showTextContent: "",
        }
    },
    methods: {
        getContent(event) {
            this.name = event.target.value;
        },
        confirmContent() {
            this.showTextContent = this.name
        },
    },
})
app.mount('#event');

Và đó là cách mà chúng ta sử dụng với Event Modifiers, để mình lấy thêm một ví dụ nữa, có những trường hợp bạn muốn một phần tử hoặc thành phần của Vue.js chỉ được render một lần và không được cập nhật nữa, chung Vue cũng hỗ trợ cho chúng ta làm điều này đó là directive v-once, Đây là một ví dụ đơn giản:

<div id="app">
  <p v-once>{{ message }}</p>
  <button @click="updateMessage">Cập nhật Message</button>
</div>

new Vue({
  el: '#app',
  data: {
    message: 'Chào mừng bạn đến với Vue.js!'
  },
  methods: {
    updateMessage: function() {
      this.message = 'Message đã được cập nhật!';
    }
  }
});

Trong ví dụ này, <p> sử dụng v-once để render nội dung message. Khi bạn nhấn vào nút "Cập nhật Message", dữ liệu message sẽ được cập nhật, nhưng văn bản trong <p> không thay đổi vì đã sử dụng v-once.

Ngoài ra nó còn rất nhiều loại khác nữa để mình liệt kê cho chúng ta cùng tham khảo và áp dụng vào dự án.

1. .stop: Ngăn chặn sự kiện lan truyền qua các phần tử con.

   Ví dụ:

   <div @click.stop="handleClick">Click here</div>​

2. .prevent: Ngăn chặn hành động mặc định của sự kiện.

   Ví dụ:

   <form @submit.prevent="handleSubmit">Submit form</form>​

3. .capture: Xử lý sự kiện ở chế độ capture thay vì bubble.

   Ví dụ:

   <div @click.capture="handleClick">Click here</div>​

4. .self: Chỉ kích hoạt sự kiện từ chính phần tử mà không phải từ các phần tử con.

   Ví dụ:

   <div @click.self="handleClick">Click here</div>​

5. .once: Sự kiện chỉ được kích hoạt một lần.

   Ví dụ:

   <button @click.once="handleClick">Click here</button>​

6. .passive: Đánh dấu sự kiện là passive, giúp cải thiện hiệu suất cuộc cuộc gọi back scroll.

   Ví dụ:

   <div @scroll.passive="handleScroll">Scroll here</div>​

Trong các ví dụ trên, handleClick và handleSubmit là các phương thức xử lý sự kiện được định nghĩa trong phần methods của Vue component. Event Modifiers được sử dụng để thay đổi hành vi của các sự kiện DOM tương ứng.