Trong Vue.js, xử lý sự kiện là một phần quan trọng để tương tác với người dùng và thay đổi trạng thái của ứng dụng. Vue.js cung cấp nhiều cách để xử lý sự kiện, bao gồm trình xử lý sự kiện nội tuyến, phương thức và bộ xử lý sự kiện.
Dưới đây là một số sự kiện phổ biến trong Vue.js
1. Sự kiện click
Sự kiện này được kích hoạt khi một phần tử có thể được nhấp chuột, như một nút hoặc một liên kết, được nhấp chuột. Thông thường, nó được sử dụng để thực hiện các hành động hoặc kích hoạt các hàm khi người dùng tương tác với phần tử đó.
<button v-on:click="handleClick">Click me</button>methods: {
handleClick() {
console.log('Button clicked!');
}
}
2. Sự kiện input
Sự kiện này được kích hoạt khi giá trị của một phần tử input thay đổi. Thông thường, nó được sử dụng với chỉ thị `v-model` để liên kết giá trị input với một thuộc tính dữ liệu trong thành phần Vue. Điều này cho phép bạn cập nhật và theo dõi thay đổi giá trị input theo cách phản ứng.
<input v-model="message" v-on:input="handleInput" />data() {
return {
message: ''
};
},
methods: {
handleInput() {
console.log('Input value:', this.message);
}
}
3. Sự kiện change
Sự kiện này được kích hoạt khi giá trị của một phần tử form, như một dropdown select hoặc checkbox, thay đổi. Thông thường, nó được sử dụng để thực hiện các hành động hoặc cập nhật dữ liệu dựa trên tùy chọn được chọn hoặc trạng thái được chọn của phần tử.
<select v-model="selectedOption" v-on:change="handleSelectChange">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>data() {
return {
selectedOption: ''
};
},
methods: {
handleSelectChange() {
console.log('Selected option:', this.selectedOption);
}
}
4. Sự kiện submit
Sự kiện này được kích hoạt khi một form được gửi đi, bằng cách nhấp vào nút submit hoặc nhấn Enter trong một trường input. Thông thường, nó được sử dụng để xử lý việc gửi form, xác nhận dữ liệu người dùng và thực hiện các hành động như tạo yêu cầu API hoặc lưu dữ liệu.
<form v-on:submit="handleSubmit">
<input type="text" v-model="name" />
<button type="submit">Submit</button>
</form>data() {
return {
name: ''
};
},
methods: {
handleSubmit(event) {
event.preventDefault();
console.log('Form submitted! Name:', this.name);
}
}
5. Sự kiện keyup
Sự kiện này được kích hoạt khi một phím được nhả ra sau khi đã được nhấn xuống. Thông thường, nó được sử dụng để thực hiện các hành động phản hồi vào đầu vào từ bàn phím, chẳng hạn như lọc danh sách các mục hoặc kích hoạt chức năng tìm kiếm.
<input v-model="message" v-on:keyup="handleKeyUp" />data() {
return {
message: ''
};
},
methods: {
handleKeyUp() {
console.log('Key up event triggered!');
}
}
6. Sự kiện keydown
Sự kiện này được kích hoạt khi một phím được nhấn xuống. Thông thường, nó được sử dụng để lắng nghe các kết hợp phím cụ thể hoặc thực hiện các hành động trong khi một phím đang được giữ xuống, chẳng hạn như điều hướng qua một bài trình diễn hoặc điều khiển một trò chơi.
<input v-model="message" v-on:keydown="handleKeyDown" />data() {
return {
message: ''
};
},
methods: {
handleKeyDown() {
console.log('Key down event triggered!');
}
}
7. Sự kiện mouseover
Sự kiện này được kích hoạt khi con trỏ chuột di chuyển qua một phần tử. Thông thường, nó được sử dụng để hiển thị thông tin bổ sung hoặc cung cấp phản hồi trực quan khi di chuột qua một phần tử.
<div v-on:mouseover="handleMouseOver">Hover over me</div>methods: {
handleMouseOver() {
console.log('Mouse over event triggered!');
}
}
8. Sự kiện mouseout
Sự kiện này được kích hoạt khi con trỏ chuột di chuyển ra khỏi một phần tử. Thông thường, nó được sử dụng để ẩn hoặc thay đổi các phần tử khi chuột không còn nằm trên đó.
<div v-on:mouseout="handleMouseOut">Move mouse out</div>methods: {
handleMouseOut() {
console.log('Mouse out event triggered!');
}
}
9. Sự kiện scroll
Sự kiện này được kích hoạt khi một phần tử được cuộn. Thông thường, nó được sử dụng để thực hiện các tính năng như cuộn vô hạn, tải trễ nội dung hoặc cập nhật các phần tử giao diện người dùngtiếp theo dựa trên vị trí cuộn.
<div v-on:scroll="handleScroll">Scroll me</div>methods: {
handleScroll() {
console.log('Scroll event triggered!');
}
}
10. Sự kiện focus
Sự kiện này được kích hoạt khi một phần tử nhận được trọng tâm, thường xảy ra khi được nhấp chuột hoặc khi người dùng điều hướng đến phần tử đó bằng bàn phím. Thông thường, nó được sử dụng để thực hiện các hành động hoặc cung cấp phản hồi trực quan khi một trường input hoặc phần tử nhận trọng tâm.
<input v-on:focus="handleFocus" />methods: {
handleFocus() {
console.log('Input focused!');
}
}
Đây chỉ là một số ví dụ về các sự kiện có sẵn trong Vue.js. Bạn có thể sử dụng những sự kiện này để tạo giao diện người dùng tương tác và động trong ứng dụng Vue.js của bạn.