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 Scroll trong VueJs 2
Trong bài tập lần này, mình sẽ tìm hiểu cách VueJS 2 hỗ trợ xử lý sự kiện Scroll, một sự kiện quan trọng khi người dùng cuộn trang web.
Xử lý sự kiện Scroll trong VueJS 2
Yêu cầu
Mình sẽ tạo một phần tử và thay đổi nội dung khi trượt (scroll) trang web. Hãy sử dụng directive @scroll để bắt sự kiện khi trang web được cuộn và thực hiện các thay đổi mong muốn vào nội dung hoặc phần tử.
Ở đây mình sẽ sử dụng VueJS 2 để theo dõi sự kiện cuộn trang và thay đổi giao diện của phần tử dựa trên việc trang web đã được cuộn hay chưa.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Xử Lý Sự Kiện Scroll - VueJS 2</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<style>
/* CSS để tạo giao diện thân thiện hơn */
body {
font-family: Arial, sans-serif;
height: 200vh; /* Để tạo đủ chiều dài cho việc cuộn trang */
margin: 0;
}
#app {
text-align: center;
padding: 20px;
font-size: 18px;
background-color: #f0f0f0;
}
.scrolled {
background-color: #3498db;
color: #fff;
}
</style>
</head>
<body>
<div id="app">
<div
:class="{ 'scrolled': isScrolled }"
v-html="scrollMessage"
></div>
</div>
<script src="main.js"></script>
</body>
</html>
main.js
new Vue({
el: '#app',
data: {
isScrolled: false,
scrollMessage: 'Cuộn trang để xem sự thay đổi!'
},
mounted() {
window.addEventListener('scroll', this.handleScroll);
},
methods: {
handleScroll() {
// Kiểm tra xem trang đã được cuộn hay chưa
this.isScrolled = window.scrollY > 0;
// Thay đổi nội dung khi trang đã được cuộn
if (this.isScrolled) {
this.scrollMessage = 'Bạn đã cuộn trang!';
} else {
this.scrollMessage = 'Cuộn trang để xem sự thay đổi!';
}
}
},
beforeDestroy() {
// Lưu ý: Đảm bảo gỡ bỏ event listener để tránh memory leak
window.removeEventListener('scroll', this.handleScroll);
}
});
Trong đoạn mã này:
- Mình đã sử dụng
directive @scrollđể bắt sự kiện khi trang web được cuộn. - Sử dụng
directive :classđể thay đổi class của phần tử dựa trên giá trị củaisScrolled, từ đó thay đổi màu sắc của phần tử. - Sử dụng sự kiện
window.scrollđể kiểm tra xem trang đã được cuộn hay chưa, và thực hiện các thay đổi mong muốn vào nội dung.
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 trang web được cuộn.
Thông qua bài tập về xử lý sự kiện Scroll trong VueJS 2, mình đã thấy cách VueJS 2 giúp chúng ta dễ dàng theo dõi và phản ứng với sự kiện quan trọng này. Sự kết hợp giữa directive @scroll và các khả năng của VueJS 2 đã cho phép mình tạo ra trải nghiệm người dùng tương tác và động động dựa trên cách họ tương tác với trang web.
Điều này mở ra rất nhiều cơ hội sáng tạo khi xây dựng các ứng dụng web động và tương tác, giúp mình mang đến trải nghiệm người dùng tốt nhất. Hãy tiếp tục tìm hiểu và áp dụng những khái niệm này vào dự án của bạn!
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
