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 Custom trong VueJs 2
Trong bài tập này, mình sẽ tìm hiểu một khía cạnh quan trọng của xử lý sự kiện trong VueJS 2 - đó là sự kiện custom. Sự kiện custom giúp mình tạo ra các giao tiếp linh hoạt giữa các thành phần của ứng dụng, mở ra nhiều cơ hội sáng tạo.
Xử lý sự kiện Custom trong VueJS 2
Yêu cầu
Mình sẽ tạo một sự kiện custom và xử lý nó trong VueJS. Bài tập này sẽ giúp bạn hiểu cách sử dụng $emit để kích hoạt sự kiện và $on để bắt và xử lý nó.
Mình sẽ định nghĩa một sự kiện custom có tên là ten-sukien và kích hoạt nó khi người dùng click vào một button. Sau đó, mình sẽ bắt và xử lý sự kiện này để cập nhật giao diện người dùng.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Xử Lý Sự Kiện Custom - 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;
background-color: #f8f8f8;
margin: 0;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.custom-button {
padding: 10px 20px;
font-size: 16px;
background-color: #3498db;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
}
.custom-button:hover {
background-color: #2980b9;
}
.event-message {
margin-top: 20px;
font-size: 18px;
color: #333;
}
</style>
</head>
<body>
<div id="app" class="container">
<button @click="triggerCustomEvent" class="custom-button">
Kích hoạt Sự kiện Custom
</button>
<p v-if="customEventMessage" class="event-message">
{{ customEventMessage }}
</p>
</div>
<script src="main.js"></script>
</body>
</html>
main.js
new Vue({
el: '#app',
data: {
customEventMessage: ''
},
methods: {
triggerCustomEvent() {
// Kích hoạt sự kiện custom và truyền thông điệp
this.$emit('ten-sukien', 'Sự kiện custom đã được kích hoạt!');
}
},
mounted() {
// Bắt sự kiện custom và xử lý trong Vue instance
this.$on('ten-sukien', (message) => {
this.customEventMessage = message;
});
}
});
Trong đoạn mã này:
- Mình đã sử dụng
this.$emitđể định nghĩa và kích hoạt một sự kiện custom có tên làten-sukien. Chúng ta truyền một thông điệp với sự kiện. - Sử dụng
directive @clickđể gọi phương thứctriggerCustomEventkhi button được click. - Trong phương thức
triggerCustomEvent, mình gọithis.$emit('ten-sukien', 'Sự kiện custom đã được kích hoạt!'). - Trong phương thức
mounted, mình sử dụngthis.$onđể bắt sự kiện custom ten-sukien và xử lý nó bằng cách cập nhậtcustomEventMessagevới thông điệp được truyền.
Bài tập này giúp bạn hiểu cách sử dụng sự kiện custom để tương tác giữa các thành phần VueJS khác nhau trong ứng dụng của bạn.
Qua bài tập này, mình đã nắm vững cách sử dụng sự kiện custom trong VueJS 2 để tạo ra cách giao tiếp động giữa các thành phần khác nhau trong ứng dụng. Việc sử dụng $emit để kích hoạt sự kiện và $on để bắt và xử lý nó mở ra nhiều khả năng linh hoạt trong quá trình phát triển ứng dụng.
Hãy tiếp tục thực hành và áp dụng những khái niệm này vào dự án của bạn để tạo ra ứng dụng VueJS mạnh mẽ và tương tác!
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
