Bài 14: Event handling với VueJS

Chào mừng các bạn quay trở lại với series học VueJS với Laravel của mình, ở bài trước mình đã hướng dẫn các bạn về cách binding form input, bài này chúng ta sẽ cùng tìm hiểu cách xử lý các sự kiện khi người dùng tương tác như click hay bấm các phím trong VueJS nhé.

Để bắt các sự kiện này ta dùng v-on hoặc mình thường dùng kiểu short-hand là @ (trong bài này mình dùng cách viết shorthand nhé). Ở bài này ta tạo ra một file mới EventHandling.vue sau đó khai báo component này trong app.js và welcome.blade.php. Nhớ chạy php artisan serve và npm run watch nhé mọi người.

Ở bài này nội dung khá là đơn giản và mình nghĩ nó cũng khá dễ hiểu cho các bạn, nên chúng ta sẽ chủ yếu làm qua các ví dụ để hiểu nhé.

Xét ví dụ sau:

<template>
    <div class="event-handling">
        <div>Current Number: {{ counter }}</div>
        <button @click="counter++">CLick</button>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                counter: 0
            }
        }
    }
</script>

<style lang="scss" scoped>
</style>

Ở đây ta thiết lập sự kiện khi người dùng click vào button thì tăng giá trị của counter lên 1 bằng cách dùng @click như hình, và chúng ta in giá trị của counter ra ngoài màn hình. Các bạn có thể load lại trang và thử bằng cách click vào button để xem giá trị của counter thay đổi như thế nào nhé.

Bên cạnh đó một cách thường dùng là ta click để thực hiện gọi một phương thức nào đó, để làm như vậy ta xem ví dụ sau nhé:

<template>
    <div class="event-handling">
        <div>Current Number: {{ counter }}</div>
        <button @click="increaseCounter">CLick</button>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                counter: 0
            }
        },
        methods: {
            increaseCounter() {
                this.counter += 10
            }
        }
    }
</script>

<style lang="scss" scoped>
</style>

Ở trên mỗi khi người dùng click vào button thì phương thức increaseCounter được gọi và tăng giá trị của counter lên 10, load lại trang và thử lại nhé các bạn