
Contents
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