Event Handling và Methods trong Vue.
Trong Vue.js, việc xử lý sự kiện là một phần quan trọng giúp ứng dụng phản hồi với tương tác của người dùng.
- v-on (@) – Bắt sự kiện người dùng: Click, input, keydown, mouseover, v.v.
- Truyền tham số trong sự kiện ($event): Cách xử lý dữ liệu từ sự kiện.
- Methods trong Vue.js: Tổ chức và gọi function trong Vue.
- Thực hành: Xây dựng bộ đếm số lần nhấn nút.
Event Handling và Methods
1. v-on (@) – Bắt sự kiện người dùng
v-on (viết tắt là @) giúp bắt sự kiện từ người dùng và kích hoạt function tương ứng.
Ví dụ: Bắt sự kiện click trên nút
<button v-on:click="sayHello">Nhấn vào tôi</button>
<button @click="sayHello">Viết tắt của v-on</button>
methods: {
sayHello() {
alert("Xin chào từ Vue.js!");
}
}
- Khi nhấn nút, Vue sẽ gọi function
sayHello().
2. Truyền tham số trong sự kiện ($event)
Vue cho phép truyền tham số vào function trong sự kiện.
Ví dụ: Truyền tham số vào phương thức
<button @click="greet('Nguyễn An')">Chào</button>
methods: {
greet(name) {
alert(`Xin chào, ${name}!`);
}
}
- Khi nhấn nút, hộp thoại sẽ hiển thị: "Xin chào, Nguyễn An!".
Sử dụng $event để truyền toàn bộ sự kiện
<input type="text" @input="logEvent($event)">
methods: {
logEvent(event) {
console.log("Sự kiện:", event);
}
}
- Khi người dùng nhập, thông tin sự kiện sẽ được hiển thị trong console.
3. Methods trong Vue.js – Tổ chức và gọi function
Vue khuyến khích tách logic xử lý ra khỏi template bằng cách sử dụng methods.
Ví dụ: Sử dụng methods để tính tổng hai số
<p>Tổng: {{ addNumbers(5, 3) }}</p>
methods: {
addNumbers(a, b) {
return a + b;
}
}
-
addNumbers(5, 3)sẽ trả về 8.
Methods thường được dùng khi cần gọi lại nhiều lần hoặc có logic phức tạp.
Thực hành: Xây dựng bộ đếm số lần nhấn nút
Mục tiêu:
- Xây dựng một nút nhấn tăng số lần click.
- Hiển thị số lần nhấn lên giao diện.
- Reset bộ đếm về 0 khi nhấn nút reset.
Bước 1: Tạo file index.html
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bộ đếm với Vue.js</title>
</head>
<body>
<div id="app">
<h2>Bộ đếm số lần nhấn nút</h2>
<p>Số lần nhấn: {{ count }}</p>
<button @click="increaseCount">Nhấn để tăng</button>
<button @click="resetCount">Reset</button>
</div>
<script type="module" src="main.js"></script>
</body>
</html>
Bước 2: Tạo file main.js
import { createApp } from "vue";
const app = createApp({
data() {
return {
count: 0
};
},
methods: {
increaseCount() {
this.count++;
},
resetCount() {
this.count = 0;
}
}
});
app.mount("#app");
Kết quả:
- Nhấn vào nút "Nhấn để tăng", số lần nhấn sẽ tăng lên.
- Nhấn vào nút "Reset", bộ đếm sẽ về 0.
Kết luận
Tóm tắt kiến thức quan trọng:
-
v-on(@) giúp bắt sự kiện người dùng. - Có thể truyền tham số vào function, sử dụng
$eventđể lấy dữ liệu sự kiện. - Methods giúp tổ chức và gọi function để tái sử dụng logic.
- Thực hành: Xây dựng bộ đếm số lần nhấn nút giúp hiểu rõ cách dùng events và methods.
Với hơn 10 năm kinh nghiệm lập trình web và từng làm việc với nhiều framework, ngôn ngữ như PHP, JavaScript, React, jQuery, CSS, HTML, CakePHP, Laravel..., tôi hy vọng những kiến thức được chia sẻ tại đây sẽ hữu ích và thiết thực cho các bạn.
Xem thêm
Chào, tôi là Vũ. Đây là blog hướng dẫn lập trình của tôi.
Liên hệ công việc qua email dưới đây.
lhvuctu@gmail.com