Các hàm xử lý chuỗi trong Javascript (cắt / tách / nối chuỗi ..) 
Chia lấy phần dư / chia lấy phần nguyên trong javascript 
Các cách khai báo biến trong Javascript 
Các sự kiện (Event) trong Javascript 
Hướng tạo thanh search bar bằng CSS 
Hàm array.slice() trong Javascript 
Tính tổng hai số bằng Javascript (cộng hai số) 
Cách khai báo biến trong PHP, các loại biến thường gặp 
Download và cài đặt Vertrigo Server 
Thẻ li trong HTML 
Thẻ article trong HTML5 
Cấu trúc HTML5: Cách tạo template HTML5 đầu tiên 
Cách dùng thẻ img trong HTML và các thuộc tính của img 
Thẻ a trong HTML và các thuộc tính của thẻ a thường dùng Xử lý sự kiện Keydown/Keyup trong VueJs 2
Trong bài tập này, mình sẽ tìm hiểu về xử lý sự kiện Keydown/Keyup trong VueJs 2. VueJS 2 cung cấp những công cụ mạnh mẽ để xử lý sự kiện Keydown/Keyup, mở ra khả năng tạo ra các ứng dụng linh hoạt và tương tác.
Xử lý sự kiện Keydown/Keyup trong VueJS 2
Yêu cầu
Mình sẽ tạo một ô input đơn giản và theo dõi mỗi khi người dùng gõ phím, hiển thị thông báo về phím vừa gõ. Mục tiêu là sử dụng directive @keydown để bắt sự kiện khi người dùng gõ phím và thực hiện hành động sau mỗi lần đó.
Để thực hiện bài tập này, mình sẽ tạo file index.html để hiển thị giao diện và file main.js để xử lý logic trong VueJS 2.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title>Xử Lý Sự Kiện Keydown/Keyup - VueJS 2</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
#app {
text-align: center;
}
input {
padding: 10px;
font-size: 16px;
border-radius: 4px;
border: 1px solid #ccc;
}
p {
margin-top: 20px;
font-size: 18px;
}
</style>
</head>
<body>
<div id="app">
<input
v-model="typedText"
@keyup="handleKeyUp"
placeholder="Gõ phím ở đây..."
/>
<p v-if="showMessage">Bạn vừa gõ phím: {{ lastTypedKey }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>
main.js
new Vue({
el: '#app',
data: {
typedText: '',
showMessage: false,
lastTypedKey: ''
},
methods: {
handleKeyUp() {
this.lastTypedKey = this.typedText.slice(-1);
this.showMessage = true;
}
}
});
Trong đoạn mã này:
- Mình đã tạo một ô input và sử dụng
directive v-modelđể liên kết dữ liệu từ ô input với biếntypedText. - Sử dụng
directive @keydownđể bắt sự kiện khi người dùng gõ phím và gọi methodhandleKeyDown. - Trong method
handleKeyDown, mình cập nhật biếnlastTypedKeyvới giá trị của phím vừa gõ và hiển thị thông báo bằng cách đặtshowMessagethành true.
Đây là một cách linh hoạt để xử lý sự kiện Keydown/Keyup trong VueJS 2 và có thể mở rộng để thực hiện các hành động phức tạp hơn sau mỗi lần người dùng gõ phím.
Trong bài viết này, mình đã tìm hiểu cách VueJS 2 cung cấp cho mình sự linh hoạt trong xử lý sự kiện Keydown/Keyup. Hi vong bạn cùng tạo một ứng dụng nhỏ để theo dõi mỗi khi người dùng gõ phím và hiển thị thông báo thú vị.
Bài giải
-------------------- ######## --------------------
Câu hỏi thường gặp liên quan:
- Xử lý sự kiện Click trong VueJs 2
- Xử lý sự kiện Input trong VueJs 2
- Xử lý sự kiện Submit Form trong VueJs 2
- Xử lý sự kiện Keydown/Keyup trong VueJs 2
- Xử lý sự kiện Mouseover/Mouseout trong VueJs 2
- Xử lý sự kiện Scroll trong VueJs 2
- Xử lý sự kiện Custom trong VueJs 2
- Xử lý sự kiện Time-related Events trong VueJs 2
- Xử lý sự kiện Resize trong VueJs 2
- Xử lý sự kiện Form Validation trong VueJs 2
