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 Resize trong VueJs 2
Trong bài tập VueJS 2 lần này, mình sẽ tìm hiểu cách xử lý sự kiện Resize trong VueJS, nơi mà mình có thể thay đổi giao diện hoặc thực hiện các hành động khác khi cửa sổ trình duyệt thay đổi kích thước.
Xử lý sự kiện Resize trong VueJS 2
Yêu cầu
Mình sẽ sử dụng directive @resize để bắt sự kiện khi cửa sổ trình duyệt thay đổi kích thước. Khi sự kiện này xảy ra, mình sẽ thực hiện thay đổi giao diện hoặc hiển thị một thông báo thông báo cho người dùng.
Mình sẽ tận dụng sự kiện Resize để tạo ra một thông điệp hoặc thay đổi giao diện người dùng khi kích thước của cửa sổ trình duyệt thay đổi.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Xử Lý Sự Kiện Resize - VueJS 2</title>
<link rel="stylesheet" href="styles.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app" class="container">
<p v-if="resizeMessage" class="event-message">{{ resizeMessage }}</p>
</div>
<script src="main.js"></script>
</body>
</html>
main.js
new Vue({
el: '#app',
data: {
resizeMessage: ''
},
created() {
// Thêm sự kiện resize cho window khi Vue instance được tạo
window.addEventListener('resize', this.handleResize);
},
destroyed() {
// Gỡ bỏ sự kiện resize khi Vue instance bị hủy
window.removeEventListener('resize', this.handleResize);
},
methods: {
handleResize() {
this.resizeMessage = 'Cửa sổ trình duyệt đã thay đổi kích thước!';
}
}
});
styles.css
body {
font-family: 'Arial', sans-serif;
background-color: #f8f8f8;
margin: 0;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.event-message {
margin-top: 20px;
font-size: 18px;
color: #333;
}
Giải thích
Trong index.html, mình chỉ có một phần tử <div> với id là "app" để liên kết với Vue instance và hiển thị thông báo khi sự kiện resize xảy ra.
Trong main.js, chúng ta sử dụng directive @resize để bắt sự kiện khi cửa sổ trình duyệt thay đổi kích thước.
created()vàdestroyed()là các lifecycle hooks của Vue, được sử dụng để thêm và gỡ bỏ sự kiện resize khi Vue instance được tạo và hủy bỏ.handleResize()là phương thức xử lý sự kiện, hiển thị thông báo khi cửa sổ trình duyệt thay đổi kích thước.
Trong styles.css, mình chỉ có một số kiểu CSS để làm cho giao diện trở nên thân thiện và dễ đọc.
Trong bài tập này, mình đã thực hành cách xử lý sự kiện Resize trong VueJS. Sự kiện này có thể được sử dụng để tối ưu hóa trải nghiệm người dùng khi cửa sổ trình duyệt thay đổi kích thước. Hãy tiếp tục thực hành và kết hợp chúng vào các dự án thực tế để làm cho ứng dụng của bạn trở nên linh hoạt hơ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
