Cách xử lý các sự kiện trong Vue
Lắng nghe các sự kiện của người dùng là một phần không thể thiếu của bất kỳ ứng dụng web phản hồi nào và ứng dụng Vue cũng không ngoại lệ. Vue được xây dựng với một cách đơn giản và hiệu quả để xử lý các sự kiện với chỉ thị v-on của nó.
Mục Lục
Liên kết sự kiện trong Vue là gì?
Liên kết sự kiện là một tính năng của Vue.js cho phép bạn đính kèm trình xử lý sự kiện vào phần tử Mô hình đối tượng tài liệu (DOM). Khi một sự kiện xảy ra, trình xử lý sự kiện sẽ kích hoạt một hành động hoặc phản hồi trong ứng dụng Vue của bạn.
Bạn có thể đạt được liên kết sự kiện trong Vue với v-on chỉ thị. Lệnh này cho phép ứng dụng của bạn lắng nghe các sự kiện của người dùng như các sự kiện nhấp, nhập hoặc nhập.
Để đính kèm một trình lắng nghe sự kiện vào một phần tử bằng cách sử dụng v-onhãy thêm tên sự kiện làm tham số cho lệnh:
<html>
<head>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="counter++">Click me</button>
<p>{{ counter}}</p>
</div>
<script>
const app = Vue.createApp({
data() {
return {
text: 'Vue is awesome!',
counter: 0
}
}
}) app.mount('#app')
</script>
</body>
</html>
Khối mã ở trên hiển thị một ví dụ về ứng dụng Vue lắng nghe nhấp chuột sự kiện. Khối mã sử dụng một cái nút để tăng quầy tính tiền giá trị trong thuộc tính dữ liệu của phiên bản Vue bằng một.
Khối mã trên liên kết biểu thức JavaScript quầy ++ đến nút nhấp chuột sự kiện với v-on chỉ thị. Vue sử dụng @ ký tự như một tốc ký thay cho v-on chỉ thị do v-oncách sử dụng thường xuyên của:
<button @click="counter++">Click me</button>
Liên kết sự kiện trong Vue không giới hạn ở các sự kiện nhấp chuột. Vue xử lý các sự kiện khác, như sự kiện nhấn phím, sự kiện di chuột qua, v.v.
Để ràng buộc bất kỳ sự kiện nào trong số này với v-on chỉ thị, thay thế nhấp chuột sự kiện với tên của sự kiện mong muốn:
<button @keydown.enter="counter++">Click me</button>
Đoạn mã trên thiết lập một trình lắng nghe sự kiện trên cái nút mà lắng nghe cho phím tắt sự kiện. Khi bất kỳ phím nào được nhấn trong khi nút có tiêu điểm, Vue sẽ đánh giá quầy ++ sự biểu lộ.
Liên kết các sự kiện với các phương thức trong Vue
Trong hầu hết các ứng dụng Vue, bạn có thể xử lý logic phức tạp hơn dựa trên các sự kiện cụ thể xảy ra. Các sự kiện và phương pháp phối hợp với nhau để thực hiện các hành động ứng dụng dựa trên một sự kiện.
Thuộc tính phương thức trong Đối tượng tùy chọn của Vue chứa các chức năng quan trọng mà ứng dụng Vue của bạn cần để tăng cường khả năng phản ứng. Với thuộc tính phương thức trong Vue, bạn có thể xử lý logic phức tạp dựa trên các sự kiện.
Đây là một ví dụ về ứng dụng Vue hiển thị các sự kiện được xử lý bởi thuộc tính phương thức:
<html>
<head>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<button @click="increment">Add 1</button>
<button @click="reduce">reduce 1</button>
<p>{{ counter }}</p>
</div>
<script>
const app = Vue.createApp({
data() {
return {
text: 'Vue is awesome!',
counter: 0
}
},
methods: {
increment(){
this.counter = this.counter + 1
},
reduce() {
this.counter = this.counter - 1
}
}
})
app.mount('#app')
</script>
</body>
</html>
Ứng dụng Vue ở trên mô tả cách liên kết các sự kiện với các phương thức. Ứng dụng này có hai nút mà người dùng có thể nhấp để tăng hoặc giảm giá trị bộ đếm trong thuộc tính dữ liệu.
Ứng dụng đạt được điều này với @nhấp chuột chỉ thị. Các @nhấp chuột chỉ thị trỏ đến các hàm trong thuộc tính phương thức để thao tác giá trị bộ đếm.
Khi liên kết một đối số với sự kiện nhấp chuột, bạn có thể tùy chỉnh các phương thức tăng và giảm để thêm hoặc giảm giá trị bộ đếm dựa trên đối số mà bạn chuyển đến phương thức.
Như vậy:
<body>
<div id="app">
<button @click="increment(5)">Add 5</button>
<button @click="reduce(3)">reduce 3</button>
<p>{{ counter }}</p>
</div>
<script>
const app = Vue.createApp({
data() {
return {
text: 'Vue is awesome!',
counter: 0
}
},
methods: {
increment(num){
this.counter = this.counter + num
},
reduce(num) {
this.counter = this.counter - num
}
}
})
app.mount('#app')
</script>
</body>
Khối mã này mở rộng trên ứng dụng Vue trước đó để cho phép truyền đối số cho các phương thức được liên kết với trình xử lý sự kiện nhấp trên nút.
Các phương thức tăng và giảm trong đối tượng Vue lấy một đối số num để tăng hoặc giảm thuộc tính bộ đếm.
Ví dụ này cho thấy cách bạn có thể làm việc với các đối số khi liên kết các phương thức với các sự kiện trong Vue. Liên kết các phương thức với các sự kiện có thể giúp làm cho các ứng dụng Vue tương tác hơn.
Khám phá các công cụ sửa đổi ngăn chặn và dừng trong Vue
Công cụ sửa đổi sự kiện trong Vue cho phép bạn tạo trình xử lý sự kiện tốt hơn phục vụ cho các nhu cầu cụ thể của ứng dụng của bạn. Để sử dụng các công cụ sửa đổi sự kiện này, bạn xâu chuỗi các công cụ sửa đổi với các sự kiện trong Vue.
Ví dụ:
<form @submit.prevent="handleSubmit">
<input type="text" v-model="text">
<button type="submit">Submit</button>
</form>
Khối mã ở trên xâu chuỗi các ngăn chặn công cụ sửa đổi cho sự kiện gửi. Các ngăn chặn công cụ sửa đổi thường được sử dụng khi làm việc với các biểu mẫu trong Vue.
Các ngăn chặn mục đích của công cụ sửa đổi là ngăn chặn hành vi mặc định của việc gửi biểu mẫu, đó là tải lại trang. sử dụng ngăn chặnVue có thể tiếp tục các tiến trình của nó trong khi xử lýGửi phương thức chăm sóc việc gửi biểu mẫu.
Một ví dụ khác về một công cụ sửa đổi rất hữu ích là dừng lại công cụ sửa đổi sự kiện. Các dừng lại công cụ sửa đổi sự kiện ngăn một sự kiện lan truyền xa hơn trên cây DOM.
Thông thường, sự kiện của phần tử con HTML nổi lên thông qua cây DOM, kích hoạt bất kỳ trình lắng nghe sự kiện nào được gắn với phần tử cha. Bạn có thể ngăn chặn sự lan truyền sự kiện này với dừng lại công cụ sửa đổi và ngăn sự kiện kích hoạt thêm trình xử lý sự kiện.
Để hiểu làm thế nào các dừng lại công cụ sửa đổi dừng việc lan truyền các sự kiện xa hơn trên cây DOM, hãy xem xét khối mã bên dưới:
<body>
<div id="app">
<div @click="outerClick" class="outer">
<div @click.stop="innerClick" class="inner">
<button @click="buttonClick" class="button">Click me</button>
</div>
</div>
</div>
<script>
const app = Vue.createApp({
methods: {
outerClick() {
console.log('Outer click')
},
innerClick() {
console.log('Inner click')
},
buttonClick() {
console.log('Button click')
}
}
}); app.mount("#app");
</script>
</body>
Khối mã ở trên có ba trình xử lý sự kiện được gắn với ba phần tử khác nhau. Các cái nút phần tử nằm trong div với bên trong lớp, trong khi div với bên trong lớp nằm trong div với bên ngoài lớp học.
Mỗi một trong ba yếu tố lắng nghe một nhấp chuột sự kiện và nhật ký vào bảng điều khiển, tên của phần tử HTML được nhấp. Dưới đây là kiểu CSS lớp bổ sung để làm cho khối mã trên dễ hiểu hơn:
<head>
<style>
.outer {
padding: 20px;
background-color: black;
}
.inner {
padding: 20px;
background-color: gray;
}
button {
padding: 10px;
background-color: white;
border: 2px solid black;
font-size: 16px;
font-weight: bold;
cursor: pointer;
}
</style>
</head>
Khi chạy chương trình, ứng dụng Vue đã tạo sẽ trông như thế này:
Lưu ý rằng khi bạn nhấp vào nút, chương trình sẽ gọi nút bấm phương thức và ghi một thông báo vào bàn điều khiển. Chương trình cũng gọi các nhấp chuột bên trong phương pháp.
Tuy nhiên, chương trình không gọi nhấp chuột bên ngoài phương thức vì khối mã đã thêm một dừng lại công cụ sửa đổi thành nhấp chuột bên trong người nghe sự kiện. Điều này ngăn sự kiện lan truyền xa hơn lên cây DOM.
không có dừng lại sửa đổi, chương trình sẽ gọi nút bấm phương thức khi bạn nhấp vào nút và sự kiện sẽ tiếp tục truyền lên cây, đạt đến nhấp chuột bên trong phương pháp và sau đó nhấp chuột bên ngoài phương pháp.
Xử lý sự kiện trong ứng dụng web
Bạn đã học cách sử dụng liên kết sự kiện trong Vue để đính kèm trình xử lý sự kiện vào các phần tử và cách gọi phương thức khi sự kiện xảy ra. Bạn cũng đã hiểu cách sử dụng công cụ sửa đổi sự kiện để tùy chỉnh hành vi sự kiện.
Các ứng dụng web dựa vào một số dạng sự kiện của người dùng để thực hiện các chức năng. JavaScript được tích hợp sẵn rất nhiều phương thức để nắm bắt và xử lý nhiều loại sự kiện này. Những sự kiện này giúp xây dựng các ứng dụng tương tác.