Xử lý sự kiện ​

Lắng Nghe Sự Kiện ​

Chúng ta có thể sử dụng chỉ thị v-on, thường được viết tắt thành biểu tượng @, để lắng nghe sự kiện từ DOM và thực thi mã JavaScript khi chúng được kích hoạt. Cách sử dụng sẽ là v-on:click="handler" hoặc với cách viết tắt, @click="handler".

Giá trị của handler có thể là một trong những loại sau:

1. Các Xử Lý Inline: JavaScript nằm trong dòng sẽ được thực thi khi sự kiện được kích hoạt (tương tự như thuộc tính onclick nguyên bản).

2. Các trình xử lý phương thức: Một tên hoặc đường dẫn của thuộc tính trỏ đến một phương thức được định nghĩa trong component.

Xử Lý Inline ​

Xử Lý Inline thường được sử dụng trong các trường hợp đơn giản, ví dụ:

const count = ref(0)

data() {
  return {
    count: 0
  }
}

<button @click="count++">Thêm 1</button>
<p>Số lượng là: {{ count }}</p>

Trình Xử Lý Phương Thức ​

Logic của nhiều trình xử lý sự kiện thường phức tạp hơn và thường không thể thực hiện được với các Xử Lý Inline. Đó là lý do tại sao v-on cũng có thể chấp nhận tên hoặc đường dẫn của một phương thức trong component bạn muốn gọi.

Ví dụ:

const name = ref('Vue.js')

function greet(event) {
  alert(`Xin chào ${name.value}!`)
  // `event` là đối tượng sự kiện DOM nguyên bản
  if (event) {
    alert(event.target.tagName)
  }
}

data() {
  return {
    name: 'Vue.js'
  }
},
methods: {
  greet(event) {
    // `this` bên trong phương thức trỏ đến instance hoạt động hiện tại
    alert(`Xin chào ${this.name}!`)
    // `event` là đối tượng sự kiện DOM nguyên bản
    if (event) {
      alert(event.target.tagName)
    }
  }
}

<!-- `greet` là tên của phương thức được định nghĩa ở trên -->
<button @click="greet">Chào</button>

Một trình xử lý phương thức tự động nhận đối tượng Sự Kiện DOM nguyên bản mà kích hoạt nó - trong ví dụ trên, chúng ta có thể truy cập phần tử kích hoạt sự kiện thông qua event.target.tagName.

Phương Thức vs. Phát Hiện Nằm Trong Dòng ​

Bộ biên dịch mẫu (template compiler) phát hiện trình xử lý phương thức bằng cách kiểm tra xem chuỗi giá trị v-on có phải là một định danh JavaScript hợp lệ hay một đường dẫn truy cập thuộc tính không. Ví dụ, foo, foo.bar và foo['bar'] được xem xét là trình xử lý phương thức, trong khi foo() và count++ được xem xét là Xử Lý Inline.

Gọi Phương Thức trong Xử Lý Inline ​

Thay vì ràng buộc trực tiếp vào tên phương thức, chúng ta cũng có thể gọi phương thức trong một Xử Lý Inline. Điều này cho phép chúng ta truyền đối số tùy chỉnh vào phương thức thay vì sự kiện nguyên bản:

function say(message) {
  alert(message)
}

methods: {
  say(message) {
    alert(message)
  }
}

<button @click="say('xin chào')">Nói xin chào</button>
<button @click="say('tạm biệt')">Nói tạm biệt</button>

Truy Cập Đối Số Sự Kiện trong Xử Lý Inline ​

Đôi khi, chúng ta cũng cần truy cập sự kiện DOM nguyên bản trong một Xử Lý Inline. Bạn có thể truyền nó vào một phương thức bằng cách sử dụng biến đặc biệt $event, hoặc sử dụng hàm mũi tên trong dòng:

<!-- sự kiện click sẽ không lan tỏa nữa -->
<a @click.stop="handleEvent"></a>

<!-- sự kiện submit sẽ không làm tải lại trang nữa -->
<form @submit.prevent="handleEvent"></form>

<!-- có thể chặn kết hợp các modifier -->
<a @click.stop.prevent="handleEvent"></a>

<!-- chỉ là modifier -->
<form @submit.prevent></form>

<!-- chỉ kích hoạt xử lý nếu sự kiện.target là chính phần tử đó -->
<!-- tức là không từ một phần tử con -->
<div @click.self="handleEvent">...</div>

Key Modifiers ​

Khi lắng nghe sự kiện bàn phím, chúng ta thường cần kiểm tra các phím cụ thể. Vue cho phép thêm key modifiers cho v-on hoặc @ khi lắng nghe sự kiện từ bàn phím:

<!-- chỉ gọi hàm `submit` khi phím `Enter` được nhấn -->
<input @keyup.enter="submit" />

Bạn có thể trực tiếp sử dụng bất kỳ tên phím hợp lệ nào được hiển thị thông qua KeyboardEvent.key như là modifiers bằng cách chuyển chúng thành kebab-case.

<input @keyup.page-down="onPageDown" />

Trong ví dụ trên, trình xử lý chỉ được gọi nếu $event.key bằng 'PageDown'.

Bí Danh của Phím ​

Vue cung cấp các bí danh cho các phím được sử dụng phổ biến:

• .enter
• .tab
• .delete (bắt cả phím "Delete" và "Backspace")
• .esc
• .space
• .up
• .down
• .left
• .right

Các Phím Chỉnh Sửa Hệ Thống ​

Bạn có thể sử dụng các modifier sau để kích hoạt lắng nghe sự kiện chuột hoặc bàn phím chỉ khi phím chỉnh sửa tương ứng được nhấn:

• .ctrl
• .alt
• .shift
• .meta

Ví dụ:

<!-- Alt + Enter -->
<input @keyup.alt.enter="clear" />

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Làm một điều gì đó</div>

Modifier .exact ​

Modifier .exact cho phép kiểm soát sự kết hợp chính xác của các phím chỉnh sửa hệ thống cần thiết để kích hoạt một sự kiện.

<!-- điều này sẽ kích hoạt ngay cả khi Alt hoặc Shift cũng được nhấn -->
<button @click.ctrl="onClick">A</button>

<!-- điều này chỉ sẽ kích hoạt khi Ctrl và không có phím nào khác được nhấn -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- điều này chỉ sẽ kích hoạt khi không có phím chỉnh sửa hệ thống nào được nhấn -->
<button @click.exact="onClick">A</button>

Modifier Phím Chuột ​

• .left
• .right
• .middle

Các modifier này hạn chế trình xử lý chỉ hoạt động với sự kiện được kích hoạt bởi một nút chuột cụ thể.