Event Handling trong VueJS 2

Trong bài viết này, mình sẽ tìm hiểu cú pháp, quy trình và tầm quan trọng của việc xử lý sự kiện trong VueJS 2. Bằng cách này, ta sẽ hiểu rõ hơn về cách sử dụng một trong những tính năng quan trọng nhất của VueJS 2 để xây dựng các ứng dụng web chất lượng cao. Hãy cùng bắt đầu tìm hiểu về Event Handling trong VueJS 2.

Event Handling là gì?

Event Handling là quá trình xử lý các sự kiện (events) trong lập trình, đặc biệt là trong việc phát hiện và đáp ứng các hành động hoặc tương tác từ người dùng hoặc từ hệ thống.

Event Handling đề cập đến việc xử lý các sự kiện trên trình duyệt web. Các sự kiện này có thể là nhấn chuột, gõ phím, di chuyển chuột, hoặc bất kỳ hành động tương tác nào mà người dùng thực hiện trên trình duyệt.

Khi một sự kiện xảy ra (ví dụ: người dùng nhấn chuột vào một nút), trình duyệt sẽ tạo ra một sự kiện tương ứng và gửi nó tới các phần tử HTML tương ứng. Event Handling cho phép lập trình viên xác định và gán các hành động cụ thể để xử lý các sự kiện này.

Bài viết này được đăng tại [free tuts .net]

Trong các framework và thư viện JavaScript như VueJS, React, hay Angular, Event Handling được sử dụng để lắng nghe và xử lý các sự kiện từ người dùng hoặc từ các thành phần khác trong ứng dụng. Điều này giúp ứng dụng có thể phản hồi linh hoạt và tương tác với người dùng một cách đáng kể.

Tại sao Event Handling trong VueJS 2 lại quan trọng?

Event Handling trong VueJS 2 đóng vai trò quan trọng vì nó cho phép ứng dụng tương tác một cách linh hoạt và đáng tin cậy với người dùng. Dưới đây là một số lý do cụ thể:

Tương tác người dùng:

• Phản hồi nhanh chóng: Xử lý sự kiện cho phép ứng dụng phản hồi ngay lập tức khi người dùng tương tác, tạo ra trải nghiệm tốt hơn.
• Tùy chỉnh hành vi: Sự kiện cho phép điều chỉnh hành vi của ứng dụng dựa trên các hành động cụ thể từ người dùng.

Quản lý dữ liệu và trạng thái:

• Cập nhật dữ liệu: Xử lý sự kiện cho phép cập nhật dữ liệu theo thời gian thực khi có sự kiện xảy ra.
• Thay đổi trạng thái giao diện: Dễ dàng thay đổi trạng thái hoặc giao diện của ứng dụng dựa trên các sự kiện từ người dùng.

Tích hợp thành phần:

• Tương tác giữa các thành phần: Event Handling cho phép các thành phần khác nhau trong ứng dụng giao tiếp và truyền dữ liệu cho nhau thông qua sự kiện tùy chỉnh.
• Tái sử dụng linh hoạt: Khi các thành phần có thể giao tiếp thông qua sự kiện, chúng trở nên dễ dàng tái sử dụng và linh hoạt hơn.

Kiểm soát luồng ứng dụng:

• Điều khiển hành vi: Event Handling cho phép kiểm soát luồng ứng dụng, điều này quan trọng để đảm bảo ứng dụng hoạt động theo cách mong muốn.

Sự quan trọng của Event Handling không chỉ giới hạn trong VueJS 2 mà còn là một khía cạnh quan trọng trong phát triển ứng dụng web nói chung. Đây là công cụ mạnh mẽ giúp ứng dụng tương tác một cách linh hoạt và hiệu quả với người dùng.

Cú pháp xử lý sự kiện trong VueJs 2

Directive v-on trong VueJS 2

Directive v-on được sử dụng để lắng nghe các sự kiện từ DOM và thực thi các hành động tương ứng khi sự kiện đó xảy ra. Ví dụ, để xử lý sự kiện click trên một nút:

<div id="app">
  <button v-on:click="handleClick">Click me</button>
</div>

Trong đoạn mã này, v-on:click là directive để lắng nghe sự kiện click trên nút và gọi phương thức handleClick khi sự kiện này xảy ra.

Phương thức xử lý sự kiện

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    methods: {
      handleClick: function() {
        // Thực hiện các hành động khi click vào nút
        console.log('Button clicked!');
        // Có thể thay đổi dữ liệu hoặc tương tác với DOM tại đây
      }
    }
  });
</script>

Trong phần script, mình khai báo một instance Vue với el trỏ đến phần tử có id là app. Bên trong methods, mình khai báo phương thức handleClick để xử lý sự kiện click. Trong ví dụ này, khi nút được click, thông điệp "Button clicked!" sẽ được log ra console.

Kết quả:

Khi bạn nhấn vào nút "Click me", thông điệp "Button clicked!" sẽ hiển thị trong console của trình duyệt.

Đây là cách sử dụng v-on directive và phương thức xử lý sự kiện trong VueJS 2 để lắng nghe và xử lý các sự kiện từ người dùng.

Binding dữ liệu và sự kiện trong VueJs 2

Liên kết dữ liệu từ sự kiện

<div id="app">
  <button v-on:click="increaseCounter">Click me</button>
  <p>Counter: {{ counter }}</p>
</div>

new Vue({
  el: '#app',
  data: {
    counter: 0
  },
  methods: {
    increaseCounter: function() {
      this.counter++; // Tăng giá trị của counter khi nút được click
    }
  }
});

Trong đoạn mã này, một biến counter được khai báo trong data. Khi nút được click, sự kiện click sẽ gọi phương thức increaseCounter, và biến counter sẽ được tăng lên mỗi khi nút được click. Dữ liệu này được binding vào phần hiển thị {{ counter }}, và giá trị của counter sẽ được cập nhật trên giao diện người dùng mỗi khi thay đổi.

Truyền tham số qua sự kiện

<div id="app">
  <button v-on:click="sayHello('Hi')">Say Hi</button>
  <button v-on:click="sayHello('Hello')">Say Hello</button>
</div>

new Vue({
  el: '#app',
  methods: {
    sayHello: function(greeting) {
      console.log(greeting); // Hi hoặc Hello sẽ được log ra console tùy thuộc vào nút được click
    }
  }
});

Trong ví dụ này, khi bạn click vào nút "Say Hi" hoặc "Say Hello", phương thức sayHello sẽ được gọi và tham số greeting sẽ nhận giá trị tương ứng ("Hi" hoặc "Hello"). Điều này cho phép mình truyền các tham số khác nhau khi xử lý sự kiện và thực hiện các hành động cụ thể dựa trên tham số đó.

Sự kiện tự tạo (Custom Events) trong VueJs 2

Tạo và phát ra sự kiện tùy chỉnh

<div id="app">
  <button v-on:click="sendCustomEvent">Send Custom Event</button>
  <child-component v-on:custom-event="handleCustomEvent"></child-component>
</div>

// Child Component
Vue.component('child-component', {
  template: '<div></div>',
  mounted() {
    this.$emit('custom-event', 'Custom event data');
  }
});

// Vue Instance
new Vue({
  el: '#app',
  methods: {
    sendCustomEvent() {
      // Phương thức này có thể gửi sự kiện tùy chỉnh tới các thành phần khác trong ứng dụng
      this.$emit('custom-event', 'Custom event data');
    },
    handleCustomEvent(data) {
      // Xử lý sự kiện tùy chỉnh được gửi từ child component hoặc từ button
      console.log('Received custom event with data:', data);
    }
  }
});

Trong đoạn mã trên, child-component được sử dụng làm ví dụ. Khi component này được mounted, nó phát ra sự kiện tùy chỉnh custom-event thông qua this.$emit.

Khi nút "Send Custom Event" được click, phương thức sendCustomEvent trong Vue instance cũng phát ra sự kiện tùy chỉnh tương tự. Cả hai đều gọi phương thức handleCustomEvent để xử lý sự kiện.

Thực hành Event Handling VueJs 2

Trong một ứng dụng đơn giản quản lý danh sách công việc, ta có thể áp dụng xử lý sự kiện để thêm và xóa các công việc từ danh sách.

<div id="app">
  <input v-model="newTask" @keyup.enter="addTask">
  <ul>
    <li v-for="(task, index) in tasks" :key="index">
      {{ task }}
      <span @click="removeTask(index)">❌</span>
    </li>
  </ul>
</div>

new Vue({
  el: '#app',
  data: {
    tasks: ['Task 1', 'Task 2', 'Task 3'],
    newTask: ''
  },
  methods: {
    addTask() {
      if (this.newTask.trim() !== '') {
        this.tasks.push(this.newTask);
        this.newTask = '';
      }
    },
    removeTask(index) {
      this.tasks.splice(index, 1);
    }
  }
});

Trong ví dụ này, mình sử dụng v-model để liên kết dữ liệu từ input với biến newTask. Sự kiện @keyup.enter được sử dụng để thêm công việc mới khi nhấn phím Enter.

Mỗi công việc được hiển thị trong một danh sách <ul> và cho phép người dùng click vào biểu tượng ❌ để xóa công việc tương ứng.

Kết bài

Việc thực hành trên giúp củng cố kiến thức về xử lý sự kiện trong VueJS 2. Bằng cách áp dụng xử lý sự kiện vào các tình huống thực tế như quản lý danh sách công việc, bạn có thể nắm vững cách sử dụng và áp dụng chúng vào ứng dụng của mình.

Tóm lại, việc thực hành và thử nghiệm là cách tốt nhất để nắm vững kiến thức về xử lý sự kiện trong VueJS 2, và từ đó cải thiện kỹ năng xây dựng ứng dụng của bạn.