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 Two-way binding và xử lý sự kiện trong VueJS 2
Bài tập hôm nay, mình sẽ mở rộng tìm hiểu bằng cách kết hợp Two-way binding trong VueJS 2 với xử lý sự kiện, tạo ra một trải nghiệm tương tác và đáng nhớ. Hãy cùng nhau tìm hiểu cách VueJS 2 làm cho quá trình này trở nên dễ dàng và hiệu quả.
Two-way Binding và xử lý sự kiện trong VueJS 2
Mình sẽ bắt đầu bằng việc tạo một ô input và kết hợp Two-way binding với sự kiện @input. Điều này giúp mình theo dõi và xử lý mỗi lần giá trị của ô input thay đổi.
File index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Two-way Binding và Xử lý Sự kiện</title>
<!-- Thêm đoạn CSS -->
<style>
body {
font-family: 'Arial', sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
background-color: #f4f4f4;
}
#app {
text-align: center;
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
input {
width: 200px;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 3px;
}
p {
font-size: 16px;
color: #333;
}
</style>
</head>
<body>
<div id="app">
<h1>Two-way Binding và Xử lý Sự kiện trong VueJS 2</h1>
<input type="text" v-model="inputValue" @input="updateValue">
<p>Giá trị của ô input: {{ inputValue }}</p>
</div>
<!-- VueJS -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<!-- Main JavaScript file -->
<script src="main.js"></script>
</body>
</html>
File main.js:
// Tạo một Vue instance
var app = new Vue({
el: '#app',
data: {
inputValue: '' // Biến để lưu trữ giá trị của ô input
},
methods: {
updateValue: function() {
// Phương thức này sẽ được gọi khi giá trị của ô input thay đổi
console.log('Giá trị đã thay đổi:', this.inputValue);
}
}
});
Trong đoạn mã trên:
- Sử dụng directive
v-modelđể liên kết giá trị của ô input với biếninputValuetrong Vue instance. - Sử dụng sự kiện
@inputđể theo dõi sự thay đổi giá trị của ô input và gọi phương thứcupdateValuekhi đó. - Phương thức
updateValuesẽ hiển thị thông điệp trong console, bạn có thể thay đổi nó để thực hiện các xử lý khác tùy thuộc vào yêu cầu của bạn.
Bây giờ, bạn đã tạo một ô input và kết hợp Two-way binding với xử lý sự kiện trong VueJS 2. Khi giá trị của ô input thay đổi, phương thức updateValue sẽ được gọi và hiển thị thông điệp trong console.
Với Two-way binding và xử lý sự kiện trong VueJS 2, mình đã trải nghiệm sức mạnh của khả năng linh hoạt và dễ sử dụng của thư viện này. VueJS không chỉ giúp quản lý trạng thái ứng dụng một cách thuận lợi mà còn mang lại khả năng tương tác tốt. Hãy tiếp tục áp dụng những kiến thức này vào dự án của bạn để tạo ra các ứng dụng web động và tương tác.
Bài giải
-------------------- ######## --------------------
Câu hỏi thường gặp liên quan:
- Two-way binding với v-model trong VueJS 2
- Two-way binding với Checkbox trong VueJS 2
- Two-way binding với Dropdown trong VueJS 2
- Two-way binding với Textarea trong VueJS 2
- Two-way binding với Radio Buttons trong VueJS 2
- Two-way binding với Number Input trong VueJS 2
- Two-way binding và xử lý sự kiện trong VueJS 2
- Two-way binding và Form Submission trong VueJS 2
- Two-way binding và sự kiện Change trong VueJS 2
