[Series-Vue-05] – Event Handling là gì ? Xử lý sự kiện trong Vue JS

Mở đầu

Các bạn dùng Javascript và jQuery rồi thì cũng lạ gì cái Event nữa, trong Vue JS cũng vậy, nó là các hành động, sự kiện mà người dùng tương tác với DOM. Chúng ta sử dụng v-on để lắng nghe sự kiện (listening to event).

Tổng quan

Event Handling đơn giản như cái tên của nó vậy, xử lý những sự kiện mà người dùng tương tác với DOM, Vue JS cung cấp directive v-on để xử lý các sự kiện, ví dụ như :

v-on:click – xử lý khi click chuột

<button v-on:click="click">Anh ấn vào đây đi</button>

v-on:submit – dùng để xử lý khi submit form

<form v-on:submit.prevent="onSubmit"></form>

v-on:change – xử lý khi thay đổi giá trị

<select v-on:change="changeColor">
    <option value="1">Màu đỏ</option>
    <option value="2">Màu vàng</option>
    <option value="3">Màu xanh</option>
</select>

v-on:keypess, v-on:keyup… – xử lý các sự kiện với bàn phím

<input type="text" v-on:keypress="enter" />

Ví dụ cụ thể

Ví dụ 1

Ở file app.js ta sẽ viết một methods có function thongbao(), khi click vào button sẽ gọi tới thongbao() và alert ra nội dung của notification (trong methods, gọi tới giá trị Event Handling là gì ?data bằng cách dùng this và trỏ tới data mà ta cần)

var app = new Vue({
    el: "#app",
    data() {
        return {
            notification : 'các bạn vừa click'
        }
    },
    methods: {
        thongbao() {
            alert(this.notification)
        }
    }
})

Quay sang file index.html, tạo một button và sử dụng v-on:click để gọi tới function thongbao()

<div id="app">
    <button type="button" class="btn btn-primary" v-on:click="thongbao">Click vào đây</button>
</div>

F5 trình duyệt và click vào nút button xem sao nhé, kết quả nó sẽ alert ra nội dung của data

Ví dụ 2

app.js, tạo một counter với giá trị ban đầu là 0

var app = new Vue({
    el: "#app",
    data() {
        return {
            counter : 0
        }
    }
})

index.html, khởi tạo 2 button và hiển thị ra counter như sau

<div id="app">
    <button type="button" class="btn btn-primary" v-on:click="counter++">+</button>
    <button type="button" class="btn btn-primary" v-on:click="counter--">-</button>
    <span class="badge">{{ counter }}</span>
</div>

Bây giờ hãy click vào button và sẽ thấy giá trị counter thay đổi, ta cũng có thể dùng v-on:click để gọi tới một function nào đó, trong đó sẽ thực thi code để thay đổi counter.

Ví dụ 3

Trong ví dụ này, mình sẽ demo sự kiện v-on:change, thay đổi giá trị khi sử dụng select option

app.js, tạo data course với giá trị rỗng, và trong function select(), ta gọi tới this.course

var app = new Vue({
    el: "#app",
    data() {
        return {
            course : ''
        }
    },
    methods: {
        select() {
            var msg = 'Bạn chọn khóa học ' + this.course
            alert(msg)
        }
    }
})

index. html, tạo ra một thẻ select với v-on:change="select" và giá trị v-model="course"

<label for="sel1">Select list:</label>
<select class="form-control" v-on:change="select" v-model="course">
    <option value="">Chọn</option>
    <option value="PHP">PHP</option>
    <option value="VueJS">VueJS</option>
    <option value="Bootstrap">Bootstrap</option>
</select>

Bây giờ mở trình duyệt lên và chọn select một giá trị, bạn sẽ thấy nó alert lên thông báo tương ứng.

Tổng kết

Qua các ví dụ trên các bạn có thể hiểu được cách sử dụng và xử lý các sự kiện trong VueJS