Chào mừng bạn đến với Cafedev – nơi chia sẻ kiến thức và kinh nghiệm về công nghệ! Trong chủ đề Vue.js với Xử lý Sự kiện, chúng ta sẽ khám phá cách Vue.js giải quyết xử lý sự kiện một cách linh hoạt và hiệu quả. Từ các sự kiện cơ bản như click và hover đến các kỹ thuật xử lý sự kiện phức tạp hơn, chúng ta sẽ tìm hiểu cách sử dụng Vue.js để tạo ra các ứng dụng web động với trải nghiệm người dùng tốt nhất. Hãy cùng khám phá và học hỏi cùng Cafedev!
Nội dung chính
1. Nghe Sự kiện
Chúng ta có thể sử dụng chỉ đạo v-on, thường được viết tắt thành ký tự @, để lắng nghe các sự kiện DOM và thực thi một số mã JavaScript khi chúng được kích hoạt. Sử dụng sẽ là v-on:click="handler" hoặc với cách viết tắt là @click="handler".
Giá trị của handler có thể là một trong những thứ sau:
- Bộ xử lý nội tuyến: JavaScript nội tuyến sẽ được thực thi khi sự kiện được kích hoạt (tương tự như thuộc tính
onclickgốc). - Bộ xử lý phương thức: Tên thuộc tính hoặc đường dẫn chỉ đến một phương thức được định nghĩa trên thành phần.
2. Bộ Xử lý Nội Tuyến
Bộ xử lý nội tuyến thường được sử dụng trong các trường hợp đơn giản, ví dụ:
const count = ref(0)<button @click="count++">Add 1</button>
<p>Count is: {{ count }}</p>3. Bộ Xử lý Phương Thức
Tuy nhiên, logic cho nhiều bộ xử lý sự kiện sẽ phức tạp hơn và có thể không khả thi với các bộ xử lý nội tuyến. Đó 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 của thành phần mà bạn muốn gọi.
Ví dụ:
const name = ref('Vue.js')
function greet(event) {
alert(`Hello ${name.value}!`)
// `event` is the native DOM event
if (event) {
alert(event.target.tagName)
}
}<!-- `greet` is the name of the method defined above -->
<button @click="greet">Greet</button>Thử nghiệm trong Playground
Một bộ xử lý phương thức tự động nhận đối tượng Sự kiện DOM gốc kích hoạt nó – trong ví dụ trên, chúng ta có thể truy cập phần tử phát sự kiện qua event.target.tagName.
Xem thêm: Bộ xử lý Sự kiện Gõ
3.1 Phát hiện Phương thức so với Nội tuyến
Trình biên dịch mẫu phát hiện các bộ xử lý phương thức bằng cách kiểm tra xem chuỗi giá trị v-on có là một định danh JavaScript hợp lệ hoặc đường dẫn truy cập thuộc tính không. Ví dụ, foo, foo.bar và foo['bar'] được xử lý như các bộ xử lý phương thức, trong khi foo() và count++ được xử lý như các bộ xử lý nội tuyến.
4.Gọi Phương Thức trong Bộ Xử lý Nội Tuyến
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 bộ xử lý nội tuyến. Điều này cho phép chúng ta truyền các đối số tùy chỉnh vào phương thức thay vì sự kiện gốc:
function say(message) {
alert(message)
}<button @click="say('hello')">Say hello</button>
<button @click="say('bye')">Say bye</button>5. Truy cập Đối số Sự kiện trong Bộ Xử lý Nội Tuyến
Đôi khi chúng ta cũng cần truy cập vào sự kiện DOM gốc trong một bộ xử lý nội tuyến. Bạn có thể truyền nó vào một phương thức bằng cách sử dụng biến $event đặc biệt, hoặc sử dụng một hàm mũi tên nội tuyến:
<!-- using $event special variable -->
<button @click="warn('Form cannot be submitted yet.', $event)">
Submit
</button>
<!-- using inline arrow function -->
<button @click="(event) => warn('Form cannot be submitted yet.', event)">
Submit
</button>function warn(message, event) {
// now we have access to the native event
if (event) {
event.preventDefault()
}
alert(message)
}6. Bộ Xử lý Sự kiện Điều Chỉnh
Thường xuyên cần gọi event.preventDefault() hoặc event.stopPropagation() bên trong các bộ xử lý sự kiện. Mặc dù chúng ta có thể làm điều này dễ dàng trong các phương thức, nhưng sẽ tốt hơn nếu các phương thức chỉ đơn giản về logic dữ liệu thay vì phải xử lý chi tiết sự kiện DOM.
Để giải quyết vấn đề này, Vue cung cấp bộ điều chỉnh sự kiện cho v-on. Hãy nhớ rằng các bộ điều chỉnh là hậu tố chỉ đạo được biểu thị bằng một dấu chấm.
-
.stop -
.prevent .self.capture.once.passive
<!-- the click event's propagation will be stopped -->
<a @click.stop="doThis"></a>
<!-- the submit event will no longer reload the page -->
<form @submit.prevent="onSubmit"></form>
<!-- modifiers can be chained -->
<a @click.stop.prevent="doThat"></a>
<!-- just the modifier -->
<form @submit.prevent></form>
<!-- only trigger handler if event.target is the element itself -->
<!-- i.e. not from a child element -->
<div @click.self="doThat">...</div>Tips: Một gợi ý quan trọng là thứ tự của các modifiers có ý nghĩa vì mã tương ứng được tạo ra theo thứ tự đó. Do đó, việc sử dụng @click.prevent.self sẽ ngăn chặn hành động mặc định của sự kiện click trên chính phần tử và các phần tử con của nó, trong khi @click.self.prevent chỉ ngăn chặn hành động mặc định của sự kiện click trên phần tử đó.
Các modifiers .capture, .once và .passive phản ánh các tùy chọn của phương thức native addEventListener:
<!-- use capture mode when adding the event listener -->
<!-- i.e. an event targeting an inner element is handled -->
<!-- here before being handled by that element -->
<div @click.capture="doThis">...</div>
<!-- the click event will be triggered at most once -->
<a @click.once="doThis"></a>
<!-- the scroll event's default behavior (scrolling) will happen -->
<!-- immediately, instead of waiting for `onScroll` to complete -->
<!-- in case it contains `event.preventDefault()` -->
<div @scroll.passive="onScroll">...</div>Bộ điều chỉnh .passive thường được sử dụng với các trình nghe sự kiện cảm ứng để tăng hiệu suất trên thiết bị di động.
Ghi chú Không sử dụng .passive và .prevent cùng nhau, vì .passive đã chỉ ra cho trình duyệt rằng bạn không có ý định ngăn chặn hành vi mặc định của sự kiện, và bạn có thể sẽ thấy một cảnh báo từ trình duyệt nếu làm như vậy.
7. Bộ Điều chỉnh Phím
Khi lắng nghe các 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 các bộ điều chỉnh phím cho v-on hoặc @ khi lắng nghe các sự kiện phím:
<!-- only call `submit` when the `key` is `Enter` -->
<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 tiết lộ qua KeyboardEvent.key như các bộ điều chỉnh bằng cách chuyển chúng thành dạng kebab-case.
<input @keyup.page-down="onPageDown" />Trong ví dụ trên, bộ xử lý chỉ sẽ được gọi nếu $event.key bằng 'PageDown'.
7.1 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 nhất:
– .enter
– .tab
– .delete (bắt cả hai phím “Delete” và “Backspace”)
– .esc
– .space
– .up
– .down
– .left
– .right
7.2 Các Phím Điều Chỉnh Hệ Thống
Bạn có thể sử dụng các bộ điều chỉnh sau để kích hoạt trình nghe sự kiện chuột hoặc bàn phím chỉ khi phím điều chỉnh tương ứng được nhấn:
– .ctrl
– .alt
– .shift
– .meta
Ghi chú Trên bàn phím Macintosh, meta là phím lệnh (⌘). Trên bàn phím Windows, meta là phím Windows (⊞). Trên bàn phím của Sun Microsystems, meta được đánh dấu là một hình thoi đậm (◆). Trên một số bàn phím cụ thể, cụ thể là bàn phím MIT và máy Lisp và các máy kế nhiệm, như bàn phím Knight, bàn phím space-cadet, meta được đánh dấu là “META”. Trên bàn phím của Symbolics, meta được đánh dấu là “META” hoặc “Meta”.
Ví dụ:
<!-- Alt + Enter -->
<input @keyup.alt.enter="clear" />
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>Lưu ý rằng các phím sửa đổi khác biệt so với các phím thông thường và khi được sử dụng với các sự kiện keyup, chúng phải được nhấn khi sự kiện được phát ra. Nói cách khác, keyup.ctrl chỉ sẽ kích hoạt nếu bạn thả một phím trong khi giữ ctrl. Nó sẽ không kích hoạt nếu bạn thả phím ctrl một mình.
7.3 Modifier .exact
Modifier .exact cho phép kiểm soát sự kết hợp chính xác của các sửa đổi hệ thống cần thiết để kích hoạt một sự kiện.
<!-- this will fire even if Alt or Shift is also pressed -->
<button @click.ctrl="onClick">A</button>
<!-- this will only fire when Ctrl and no other keys are pressed -->
<button @click.ctrl.exact="onCtrlClick">A</button>
<!-- this will only fire when no system modifiers are pressed -->
<button @click.exact="onClick">A</button>Hãy tiếp tục theo dõi những bài viết mới nhất trên Cafedev để không bỏ lỡ bất kỳ thông tin hay kiến thức mới nào về Vue.js và các chủ đề công nghệ khác. Chúng tôi hy vọng rằng những hướng dẫn về xử lý sự kiện trong Vue.js sẽ giúp bạn xây dựng các ứng dụng web mạnh mẽ và linh hoạt hơn. Cảm ơn bạn đã đồng hành và ủng hộ Cafedev. Đừng quên ghé thăm trang web của chúng tôi thường xuyên để cập nhật những thông tin mới nhất!
Các nguồn kiến thức MIỄN PHÍ VÔ GIÁ từ cafedev tại đây
Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của CafeDev để nhận được nhiều hơn nữa:
Chào thân ái và quyết thắng!
Các Sửa Đổi Nút Chuột
.left.right.middle
Các sửa đổi này hạn chế trình xử lý đến các sự kiện được kích hoạt bởi một nút chuột cụ thể.”
