Vue.js là một thư viện rất mạnh mẽ, dễ học và dễ tiếp cận mà với kiến thức về HTML, CSS và Javascript, chúng ta có thể bắt đầu xây dựng các ứng dụng web trong đó. Vue.js được xây dựng bằng cách kết hợp các tính năng tốt nhất từ các Khung phản ứng và Angular hiện có. Đây là một khung Javascript phản ứng và tiến bộ được sử dụng để xây dựng UI (Giao diện người dùng) và SPA (Ứng dụng một trang), đó là lý do tại sao các nhà phát triển thích viết mã và cảm thấy tự do và thoải mái khi phát triển các ứng dụng trong Vue.js. hãy xem phần Nghe và xử lý sự kiện trong Vue.js., chúng ta sẽ biết rằng nó cung cấp chỉ thị v-on để lắng nghe và xử lý các sự kiện. Chúng ta có thể sử dụng chỉ thị v-on để lắng nghe DOM và thực hiện các tác vụ cần thiết. Nó cũng cung cấp nhiều trình xử lý sự kiện. Tuy nhiên, trong bài viết này, chúng ta sẽ chỉ tìm hiểu và tập trung vào các sự kiện nhấp chuột. Vậy hãy bắt đầu!
Cũng giống như sự kiện onClick của Javascript, Vue.js cung cấp v-on: click để nghe các sự kiện.
Cú pháp của v-on: click event sẽ như sau:
< cái nút v-on: nhấp chuột='Tên chức năng'>Nhấp chuột</ cái nút >
Vue.js cung cấp tốc ký @ thay vì sử dụng v-on.
< cái nút @nhấp chuột='Tên chức năng'> Nhấp vào</ cái nút >
Vue.js không chỉ dừng lại ở việc lắng nghe sự kiện nhấp chuột và gọi hàm. Nó cũng sẽ cho phép chúng tôi viết trực tiếp bất kỳ phép toán số học nào hoặc bất kỳ thứ gì liên quan đến Javascript bên trong dấu ngoặc kép. Chỉ như thế này:
< cái nút @nhấp chuột='num + = 1'> Thêm</ cái nút >
Vue.js cung cấp cho chúng ta cách gọi phương thức hoặc hàm trong một câu lệnh Javascript nội tuyến, như được hiển thị bên dưới:
< cái nút @nhấp chuột='message (' Xin chào ')'> Hiển thị</ cái nút >Sử dụng trình xử lý sự kiện của Vue.js, chúng tôi cũng có thể truy cập sự kiện DOM bằng cách sử dụng câu lệnh nội tuyến, bằng cách chuyển biến sự kiện $ được cung cấp đặc biệt của Vue.js vào đối số của phương thức, giống như ví dụ bên dưới:
< cái nút @nhấp chuột='message (' Xin chào ', $ event)'> Gửi</ cái nút >
Vue.js cũng cung cấp cho chúng ta cách gọi nhiều hàm hoặc nhiều phương thức. Chúng ta có thể gọi nhiều hơn một hàm và phân tách chúng bằng dấu phẩy, như ví dụ sau:
< cái nút @nhấp chuột='đầu tiên (' Xin chào '), thứ hai (' Xin chào ', $ event)'> Gửi</ cái nút >Vue.js cũng cung cấp các công cụ sửa đổi sự kiện.
Công cụ sửa đổi sự kiện
Chúng ta thường cần gọi các bổ ngữ cùng với các sự kiện. Vì vậy, Vue.js cung cấp một số công cụ sửa đổi sau:
.ngừng lại
Nó sẽ ngừng truyền sự kiện nhấp chuột.
< đến @ click.stop='làm cái này'></ đến >.ngăn ngừa
Nó sẽ ngăn trang tải lại hoặc chuyển hướng.
< mẫu đơn @ submit.prevent='onSubmit'></ mẫu đơn >.Một lần
Nó sẽ kích hoạt sự kiện nhấp chuột chỉ một lần.
< đến @ click.once='làm cái này'></ đến >.chiếm lấy
Nó chủ yếu được sử dụng để thêm trình nghe sự kiện.
< div @ click.capture='làm cái này'> ...</ div >Chúng ta cũng có thể xâu chuỗi các bổ ngữ. Tuy nhiên, hãy nhớ rằng thứ tự của các bổ ngữ rất quan trọng và nó sẽ ảnh hưởng đến kết quả.
< đến @ click.stop.prevent='làm điều đó'></ đến >Phần kết luận
Trong bài viết này, chúng tôi đã đề cập đến toàn bộ các khái niệm xử lý sự kiện Click từ cấp noob đến cấp ninja. Chúng ta đã tìm hiểu về các cú pháp khác nhau của việc viết các sự kiện nhấp chuột và các cách khác nhau để sử dụng v-on:click chỉ thị được cung cấp bởi Vue.js để dễ dàng cho các nhà phát triển và các công cụ sửa đổi sự kiện khác nhau. Để biết thêm nội dung hữu ích như thế này, liên quan đến Vue.js, hãy tiếp tục truy cập linuxhint.com.