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 sự kiện (Event) trong Javascript 
Các cách khai báo biến trong Javascript 
Hướng tạo thanh search bar bằng CSS 
Bắt sự kiện click trong Javascript 
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 Mouseover/Mouseout trong VueJs 2
Trong bài tập lần này, mình sẽ tìm hiểu cách VueJS 2 giúp mình xử lý sự kiện mouseover và mouseout - những sự kiện xảy ra khi con trỏ chuột đi qua và rời khỏi một phần tử.
Xử lý sự kiện Mouseover/Mouseout trong VueJS 2
Yêu cầu
Mình sẽ tạo một phần tử đơn giản và thay đổi màu sắc hoặc hiển thị thông báo khi con trỏ chuột đi qua hoặc rời khỏi phần tử.
Ở đây sử dụng directive @mouseover và @mouseout để bắt sự kiện khi con trỏ chuột vào và rời khỏi phần tử. Dưới đây là mã nguồn và hướng dẫn chi tiết.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Xử Lý Sự Kiện Mouseover/Mouseout - VueJS 2</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
#app {
text-align: center;
}
.hover-element {
padding: 20px;
font-size: 18px;
border: 2px solid #3498db;
border-radius: 8px;
cursor: pointer;
}
.hovered {
background-color: #3498db;
color: #fff;
}
</style>
</head>
<body>
<div id="app">
<div
class="hover-element"
@mouseover="handleMouseOver"
@mouseout="handleMouseOut"
:class="{ 'hovered': isHovered }"
>
Di chuyển chuột qua đây
</div>
<p v-if="isHovered">Chuột đã đi qua phần tử!</p>
</div>
<script src="main.js"></script>
</body>
</html>
main.js
new Vue({
el: '#app',
data: {
isHovered: false
},
methods: {
handleMouseOver() {
this.isHovered = true;
},
handleMouseOut() {
this.isHovered = false;
}
}
});
Trong đoạn mã này:
- Mình đã tạo một phần tử có
class hover-elementvà sử dụng directive@mouseovervà@mouseoutđể bắt sự kiện khi con trỏ chuột vào và rời khỏi phần tử. - Sử dụng
directive :classđể điều khiển việc thêmclass hoveredkhiisHoveredlà true, từ đó thay đổi màu sắc của phần tử. - Sử dụng các
method handleMouseOvervàhandleMouseOutđể thay đổi giá trị củaisHoveredkhi sự kiện xảy ra.
Bạn có thể thí nghiệm và mở rộng đoạn mã này để thực hiện các hành động khác khi con trỏ chuột vào và rời khỏi phần tử.
Qua bài tập này, mình đã thấy cách VueJS 2 làm cho việc xử lý sự kiện trở nên đơn giản và linh hoạt. Sự kết hợp giữa directive @mouseover và @mouseout cùng với khả năng quản lý trạng thái của VueJS 2 cho phép mình thực hiện nhanh chóng các tương tác thú vị khi con trỏ chuột tương tác với các phần tử trong ứng dụng của mình. Điều này làm tăng trải nghiệm người dùng và mở ra nhiều cơ hội sáng tạo trong phát triển ứng dụng web.
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
