Please enable JavaScript.
Coggle requires JavaScript to display documents.
Xử lí sự kiện (Event modifier (Để giải quyết vấn đề này, Vue cung cấp các…
Xử lí sự kiện
Event modifier
Không như các modifier khác, vốn chỉ dùng được cho các sự kiện DOM native, modifier .once cũng có thể dùng cho các sự kiện component. Nếu bạn chưa đọc về component, có thể bỏ qua và quay lại sau.
Khi sử dụng nhiều modifier cùng lúc, thứ tự nối là rất quan trọng, vì code sẽ được tạo ra theo đúng thứ tự đó. Ví dụ, @click.prevent.selfsẽ ngăn **toàn bộ click** còn@click.self.prevent chỉ ngăn các click trên chính phần tử đang được nhắc đến.
Để giải quyết vấn đề này, Vue cung cấp các event modifier cho v-on. Event modfier là một hậu tố (postfix) cho directive, được biểu thị bằng một dấu chấm.
-
-
-
-
-
Trong rất nhiều trường hợp, chúng ta cần gọi event.preventDefault() hoặc event.stopPropagation() bên trong một phương thức xử lí sự kiện. Tuy việc này không có gì khó, sẽ tốt hơn nếu các phương thức chỉ phải tập trung giải quyết logic dữ liệu thay vì cáng đáng các sự kiện DOM.
Vue cũng cung cấp modifier .passive, tương ứng với tùy chọn passive cho addEventListener.
-
Đừng dùng .passive và .prevent cùng nhau, vì .prevent sẽ không có hiệu lực, và trình duyệt có thể sẽ bật cảnh báo. Nên nhớ rằng .passive thông báo cho trình duyệt biết rằng bạn không muốn ngăn chặn hành vi mặc định của sự kiện.
Key modifier
Khi lắng nghe các sự kiện bàn phím (keyboard event), chúng ta thường phải kiểm tra mã phím (key code). Vue hỗ trợ thêm key modifier (modifer cho mã phím) cho v-on trong các trường hợp này:
Tất nhiên nếu phải nhớ toàn bộ các mã phím thì rất mệt mỏi, nên Vue cung cấp alias (bí danh) cho các phím thông dụng nhất:
-
-
-
-
-
-
-
-
-
-
Key modifier tự động
Bạn cũng có thể sử dụng bất kì tên phím hợp lệ nào để làm modifier bằng cách chuyển sang kebab-case:
Trong ví dụ trên, hàm onPageDown chỉ được gọi nếu $event.key === 'PageDown'
Một số ít phím (esc và các phím mũi tên) có giá trị key không thống nhất trên IE9. Nếu cần hỗ trợ IE9, bạn nên dùng các alias như trên đây.
-
-
Lắng nghe sự kiện
Chúng ta có thể dùng directive v-on để lắng nghe các sự kiện DOM và thực thi JavaScript khi những sự kiện này được kích hoạt.
Gọi phương thức inline
Thay vì bind trực tiếp tên phương thức, ta cũng có thể gọi phương thức trong một câu lệnh JavaScript:
-