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 Click trong VueJs 2
Trong bài viết này, mình sẽ tập trung vào việc sử dụng VueJS 2 để xử lý sự kiện click - một trong những sự kiện cơ bản nhưng quan trọng nhất khi phát triển ứng dụng web.
Xử lý sự kiện Click bằng VueJS 2
Yêu cầu
Mình sẽ tạo một button đơn giản và hiển thị một thông báo khi người dùng click vào button đó. Để làm điều này, mình sẽ sử dụng của VueJS để gọi một method khi button được click. Trong method đó, mình sẽ hiển thị thông báo hoặc thực hiện hành động mong muốn.
Để bắt đầu,mình cần tạo một file index.html để chứa giao diện người dùng và file main.js để xử lý logic của ứng dụng.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Xử Lý Sự Kiện Click - 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;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #3498db;
color: white;
border: none;
border-radius: 4px;
}
button:hover {
background-color: #2980b9;
}
p {
margin-top: 20px;
font-size: 18px;
}
</style>
</head>
<body>
<div id="app">
<button @click="showMessage">Click me!</button>
<p v-if="message">{{ message }}</p>
</div>
<script src="main.js"></script>
</body>
</html>
main.js
new Vue({
el: '#app',
data: {
message: '' // Khởi tạo message ban đầu là rỗng
},
methods: {
showMessage() {
this.message = 'Bạn đã click vào nút!'; // Đặt thông báo khi click vào nút
}
}
});
Trong đoạn mã trên, mình có một button được tạo ra trong index.html với directive @click để gọi phương thức showMessage() khi nút được click. Trong main.js,mình khởi tạo một Vue instance, và trong data có một thuộc tính message ban đầu là rỗng. Phương thức showMessage() được định nghĩa để thay đổi giá trị của message thành "Bạn đã click vào nút!" khi nút được click.
Khi bạn mở trình duyệt và chạy file index.html, khi click vào nút "Click me!", một thông báo sẽ hiển thị ngay phía dưới nút.
Trong bài viết này, mình sẽ đi sâu vào từng phần của mã nguồn để hiểu cách VueJS 2 xử lý sự kiện click và làm thế nào mìnhcó thể tận dụng tính linh hoạt của nó để tương tác với người dùng.
Hãy cùng bắt đầu với một cách cơ bản để xử lý sự kiện click trong VueJS 2 và tìm hiểu thêm các khả năng mở rộng và tối ưu hóa trong quá trình 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
