Sự kiện Vue
Việc xử lý sự kiện trong Vue được thực hiện bằng chỉ thị v-on , để chúng ta có thể thực hiện điều gì đó xảy ra khi một nút được nhấp vào chẳng hạn.
Xử lý sự kiện là khi các phần tử HTML được thiết lập để chạy một mã nhất định khi một sự kiện nhất định xảy ra.
Các sự kiện trong Vue rất dễ sử dụng và sẽ giúp trang của chúng tôi phản hồi thực sự.
Phương thức Vue là mã có thể được thiết lập để chạy khi có sự kiện xảy ra.
Với từ bổ nghĩa v-on bạn có thể mô tả chi tiết hơn cách phản ứng với một sự kiện.
Bắt đầu với sự kiện
Hãy bắt đầu với một ví dụ cho thấy cách chúng ta có thể nhấp vào nút để đếm nai sừng tấm trong rừng.
Chúng tôi cần:
- Một nut bâm
-
v-ontrên thẻ <button> để nghe sự kiện 'click' - Mã để tăng số lượng nai sừng tấm
- Một thuộc tính (biến) trong phiên bản Vue để chứa số lượng nai sừng tấm
- Dấu ngoặc nhọn đôi
{{}}để hiển thị số lượng nai sừng tấm tăng lên
Ví dụ
Bấm vào nút để đếm thêm một con nai sừng tấm trong rừng. Thuộc tính count tăng mỗi lần nhấn nút.
<div id="app">
<img src="img_moose.jpg">
<p>{{ "Moose count: " + count }}</p>
<button v-on:click="count++">Count moose</button>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
count: 0
}
}
})
app.mount('#app')
</script>
Hãy tự mình thử »Lưu ý: Một lợi ích đi kèm với Vue là số lượng nai sừng tấm trong thẻ <p> được cập nhật tự động. Với JavaScript đơn giản, chúng tôi sẽ cần cập nhật số mà người dùng nhìn thấy bằng một dòng mã bổ sung.
Sự kiện
Có rất nhiều sự kiện mà chúng ta có thể sử dụng làm trình kích hoạt để chạy mã, trong số những sự kiện phổ biến nhất là: 'nhấp chuột', 'di chuột qua', 'di chuột', 'nhấn phím' và 'đầu vào'.
Để có danh sách đầy đủ các sự kiện cần sử dụng, bạn có thể truy cập trang Sự kiện HTML DOM của chúng tôi.
'v-trên'
Lệnh v-on cho phép chúng ta tạo các trang phản hồi những gì người dùng thực hiện.
Vue v-on hoạt động bằng cách cho trình duyệt biết sự kiện nào cần nghe và phải làm gì khi sự kiện đó xảy ra.
phương pháp
Nếu muốn chạy mã phức tạp hơn khi một sự kiện xảy ra, chúng ta có thể đặt mã vào phương thức Vue và tham chiếu đến phương thức này từ thuộc tính HTML, như sau:
<p v-on:click="changeColor">Click me</p>
Công cụ sửa đổi sự kiện
Ngoài các phương thức v-on và Vue, chúng ta có thể sử dụng thứ gọi là công cụ sửa đổi sự kiện để sửa đổi một sự kiện, chẳng hạn như nó chỉ xảy ra một lần sau khi trang được tải hoặc sửa đổi một sự kiện như 'gửi' để ngăn việc gửi biểu mẫu.
Tìm hiểu thêm
Như chúng ta có thể thấy, có ba kỹ thuật chúng ta cần tìm hiểu để sử dụng các sự kiện trong Vue:
- Chỉ thị Vue
v-on - Phương thức Vue
- Công cụ sửa đổi Vue
v-on
Nhấp vào 'Tiếp theo' để tiếp tục hướng dẫn này và tìm hiểu thêm về các kỹ thuật xử lý sự kiện này.
