Phương thức Vue

Thuộc tính 'phương thức' của Vue

Chúng ta đã sử dụng một thuộc tính Vue trong hướng dẫn này, thuộc tính 'data', nơi chúng ta có thể lưu trữ các giá trị.

Có một thuộc tính Vue khác gọi là 'phương thức' nơi chúng ta có thể lưu trữ các hàm thuộc về phiên bản Vue. Một phương thức có thể được lưu trữ trong phiên bản Vue như thế này:

Để gọi phương thức 'writeText' khi chúng ta nhấp vào phần tử <div> , chúng ta có thể viết mã bên dưới:

Ví dụ trông như thế này:

Gọi một phương thức với đối tượng sự kiện

Khi một sự kiện xảy ra khiến một phương thức được gọi, đối tượng sự kiện sẽ được truyền cùng với phương thức đó theo mặc định. Điều này rất thuận tiện vì đối tượng sự kiện chứa nhiều dữ liệu hữu ích, ví dụ như đối tượng mục tiêu, loại sự kiện hoặc vị trí chuột khi xảy ra sự kiện 'click' hoặc 'mousemove'.

Nếu mở rộng ví dụ trên chỉ bằng một dòng, chúng ta cũng có thể thay đổi màu nền dựa trên vị trí con trỏ chuột theo hướng x. Điều duy nhất chúng ta cần thêm là v-bind để thay đổi màu nền trong thuộc tính style:

Trong ví dụ bên dưới, đối tượng sự kiện mang một văn bản từ thẻ <textarea> để làm cho nó trông giống như chúng ta đang viết bên trong một cuốn sổ tay.

Truyền đối số

Đôi khi chúng ta muốn truyền một đối số bằng phương thức khi một sự kiện xảy ra.

Giả sử bạn làm công việc kiểm lâm và bạn muốn đếm số lần nhìn thấy nai sừng tấm. Đôi khi người ta nhìn thấy một hoặc hai con nai sừng tấm, đôi khi có thể nhìn thấy hơn 10 con nai sừng tấm trong một ngày. Chúng tôi thêm các nút để đếm số lần nhìn thấy '+1' và '+5' và nút '-1' trong trường hợp chúng tôi đã đếm quá nhiều.

Trong trường hợp này, chúng ta có thể sử dụng cùng một phương thức cho cả ba nút và chỉ cần gọi phương thức đó với một số khác làm đối số từ các nút khác nhau. Đây là cách chúng ta có thể gọi một phương thức có đối số:

Và đây là cách phương thức 'addMoose' trông như thế nào:

Hãy xem cách truyền đối số bằng một phương thức hoạt động như thế nào trong một ví dụ đầy đủ.

Truyền cả Đối số và Đối tượng Sự kiện

Nếu chúng ta muốn truyền cả đối tượng sự kiện và đối số khác, thì có một tên dành riêng ' $event ' chúng ta có thể sử dụng khi phương thức được gọi, như sau:

Và đây là cách phương thức trong phiên bản Vue trông như thế nào:

Bây giờ chúng ta hãy xem một ví dụ để biết cách truyền cả đối tượng sự kiện và đối số khác bằng một phương thức.

Ví dụ lớn hơn

Trong ví dụ này, chúng ta thấy rằng chỉ có thể sử dụng một phương pháp để đếm ba con vật khác nhau với ba số gia khác nhau cho mỗi con vật. Chúng tôi đạt được điều này bằng cách chuyển cả đối tượng sự kiện và số gia tăng:

<div id="ứng dụng">
  <p>Nhấp vào ô bên dưới:</p>
  <div = >
    {{ chữ }}
  </div>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<kịch bản>
  const ứng dụng = Vue.createApp({
    dữ liệu() {
      trở lại {
        chữ: ''
      }
    },
    : {
      writeText() {
        cái này. = 'Xin chào thế giới!'
      }
    }
  })
  app.mount('#app')
</script>