Giới thiệu – Vue.js

By
-
0
458

Vuejs là gì

Lắng nghe các sự kiện

Chúng ta có thể sử dụng v-on để lắng nghe các sự kiện trong DOM và thực thi mã JavaScript khi các sự kiện đó xảy ra. Ví dụ:

<button v-on:click="sayHello">Click vào đây</button>

Kết quả:

Click vào đây

Xử lý sự kiện

Trong thực tế, xử lý logic của sự kiện thường phức tạp nên việc trực tiếp nhúng mã JavaScript vào giá trị của thuộc tính v-on không khả thi. Đó là lý do tại sao bạn có thể sử dụng tên của phương thức mà bạn muốn gọi trong v-on. Ví dụ:

<button v-on:click="sayHello">Click vào đây</button>

Kết quả:

Click vào đây

Gọi phương thức nội tuyến

Ngoài việc liên kết trực tiếp tên phương thức, chúng ta cũng có thể gọi phương thức trong mã JavaScript:

<button v-on:click="sayHello()">Click vào đây</button>

Kết quả:

Click vào đây

Đôi khi, chúng ta muốn truy cập các sự kiện DOM ban đầu từ mã JavaScript nội tuyến. Bạn có thể truyền sự kiện DOM cho các phương thức thông qua $event:

<button v-on:click="handleClick($event)">Click vào đây</button>

Công cụ sửa đổi sự kiện

Trong nhiều trường hợp, chúng ta cần gọi event.preventDefault() hoặc event.stopPropagation() trong phương thức xử lý sự kiện. Mặc dù điều này không khó, nhưng sẽ rất tốt nếu các phương thức chỉ phải xử lý logic dữ liệu thay vì sự kiện DOM.

Để giải quyết vấn đề này, Vue cung cấp công cụ sửa đổi sự kiện cho v-on. Các bổ ngữ sự kiện được đặt sau chỉ thị và được ký hiệu bằng dấu chấm.

  • .stop: ngừng sự kiện
  • .prevent: ngăn chặn sự kiện mặc định
  • .capture: bắt các sự kiện trong chiến dịch bắt đầu từ thành phần cha
  • .self: chỉ xử lý sự kiện khi sự kiện xảy ra trực tiếp trên thành phần đó
  • .once: chỉ xử lý sự kiện một lần

Khi sử dụng nhiều công cụ sửa đổi cùng một lúc, thứ tự nối rất quan trọng vì mã sẽ được tạo theo thứ tự đó. Ví dụ, @click.prevent.self sẽ ngăn tất cả các lần nhấp, trong khi @click.self.prevent chỉ ngăn các lần nhấp vào chính thành phần được đề cập.

Từ phiên bản 2.1.4, công cụ sửa đổi .once cũng có thể được sử dụng cho các sự kiện thành phần. Nếu bạn chưa đọc về các thành phần, bạn có thể bỏ qua và quay lại sau.

Từ phiên bản 2.3.0, Vue cũng cung cấp công cụ sửa đổi .passive, tương ứng với tùy chọn thụ động của addEventListener. Công cụ sửa đổi .passive đặc biệt hữu ích để cải thiện hiệu suất của ứng dụng trên thiết bị di động.

Lưu ý không sử dụng .passive và .prevent cùng nhau vì .prevent sẽ không có tác dụng và trình duyệt có thể bật lên cảnh báo. Hãy nhớ rằng .passive cho trình duyệt biết rằng bạn không muốn chặn hành vi mặc định của sự kiện.

Công cụ sửa đổi phím

Khi lắng nghe sự kiện bàn phím, chúng ta thường cần kiểm tra mã phím. Trong những trường hợp này, Vue hỗ trợ công cụ sửa đổi phím (keycode modifiers) cho v-on:

  • .enter
  • .tab
  • .delete (“xóa” và “←”)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right
  • .meta

Bạn cũng có thể tự xác định bí danh cho các công cụ sửa đổi phím bằng cách sử dụng đối tượng cấu hình chung config.keyCodes:

Vue.config.keyCodes.f1 = 112

Công cụ sửa đổi phím tự động

Từ phiên bản 2.5.0, bạn cũng có thể sử dụng bất kỳ tên phím hợp lệ nào làm công cụ sửa đổi bằng cách chuyển sang định dạng kebab-case (viết thường và ngăn cách bằng dấu gạch ngang):

<button v-on:keydown.page-down="onPageDown"></button>

Trong ví dụ trên, hàm onPageDown chỉ được gọi nếu $event.key === 'pagedown'.

Lưu ý rằng một số mã khóa nhỏ (như esc và mũi tên) có giá trị khóa không nhất quán trên IE9. Nếu bạn cần hỗ trợ IE9, bạn nên sử dụng bí danh như đã đề cập.

Công cụ sửa đổi hệ thống

Từ phiên bản 2.1.0, bạn chỉ có thể sử dụng các công cụ sửa đổi sau để kích hoạt xử lý sự kiện khi nhấn các phím bổ trợ tương ứng:

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

Trên bàn phím Macintosh, meta là phím Command (⌘). 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 bằng một viên kim cương (◆). Trên một số bàn phím như MIT và Lisp, meta được đánh dấu là “meta”. Trên bàn phím biểu tượng, meta được gắn nhãn “meta” hoặc “meta”.

Ví dụ:

<input v-on:keydown.ctrl.enter="onCtrlEnter">

Công cụ sửa đổi hoạt động khác với các phím thông thường. Khi được sử dụng với sự kiện keyup, công cụ sửa đổi phải được nhấn khi sự kiện được kích hoạt. Nếu bạn chỉ nhả phím ctrl, sự kiện này sẽ không kích hoạt.

Modifier.exact

Từ phiên bản 2.5.0, bạn có thể sử dụng công cụ sửa đổi .exact cùng với các công cụ sửa đổi khác để chỉ định rằng một trình xử lý sự kiện chỉ nên được thực thi khi nhấn tổ hợp phím/chuột chính xác.

Công cụ sửa đổi nút chuột

Từ phiên bản 2.2.0, Vue cung cấp công cụ sửa đổi nút chuột cho v-on:

  • .left
  • .right
  • .middle

Các công cụ sửa đổi này giới hạn việc xử lý các sự kiện được kích hoạt bởi các nút chuột cụ thể (trái, phải hoặc giữa).

Tại sao phải lắng nghe các sự kiện trong HTML?

Bạn có thể lo lắng rằng việc đặt toàn bộ xử lý sự kiện vào HTML để lắng nghe sự kiện như vậy vi phạm quy tắc “tách biệt các mối quan tâm”. Đừng lo lắng, vì tất cả các trình xử lý sự kiện và biểu thức của Vue đều được liên kết chặt chẽ với viewmodel nên sẽ không gặp khó khăn gì trong việc duy trì chúng. Thực tế, việc sử dụng v-on có những lợi ích sau:

  1. Dễ dàng duyệt qua mã HTML để tìm trình xử lý trong mã JavaScript.
  2. Mã trong chế độ xem mô hình trở nên hoàn toàn hợp lý, độc lập với DOM vì bạn không cần phải đính kèm trình xử lý sự kiện trong JavaScript theo cách thủ công. Điều này làm cho việc kiểm tra viết mã dễ dàng.
  3. Khi mô hình bị hủy, tất cả các trình xử lý sự kiện đính kèm sẽ tự động bị xóa và không cần phải dọn dẹp.