Công cụ sửa đổi sự kiện Vue
Công cụ sửa đổi sự kiện trong Vue sửa đổi cách các sự kiện kích hoạt việc chạy các phương thức và giúp chúng tôi xử lý các sự kiện theo cách hiệu quả và đơn giản hơn.
Công cụ sửa đổi sự kiện được sử dụng cùng với chỉ thị Vue v-on , ví dụ:
- Ngăn chặn hành vi gửi mặc định của biểu mẫu HTML (
v-on:submit.prevent) - Đảm bảo rằng sự kiện chỉ có thể chạy một lần sau khi trang được tải (
v-on:click.once) - Chỉ định phím bàn phím nào sẽ sử dụng làm sự kiện để chạy một phương thức (
v-on:keyup.enter)
Cách sửa đổi Chỉ thị v-on
Công cụ sửa đổi sự kiện được sử dụng để xác định cách phản ứng chi tiết hơn đối với một sự kiện.
Chúng tôi sử dụng công cụ sửa đổi sự kiện bằng cách trước tiên kết nối thẻ với một sự kiện như chúng tôi đã thấy trước đây:
<button v-on:click="createAlert">Create alert</button>
Bây giờ, để xác định cụ thể hơn rằng sự kiện nhấn nút chỉ được kích hoạt một lần sau khi tải trang, chúng ta có thể thêm công cụ sửa đổi .once , như sau:
<button v-on:click .once ="createAlert">Create alert</button>
Đây là một ví dụ với công cụ sửa đổi .once :
Ví dụ
Công cụ sửa đổi .once được sử dụng trên thẻ <button> để chỉ chạy phương thức trong lần đầu tiên xảy ra sự kiện 'click'.
<div id="app">
<p>Click the button to create an alert:</p>
<button v-on:click.once="creteAlert">Create Alert</button>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
methods: {
createAlert() {
alert("Alert created from button click")
}
}
})
app.mount('#app')
</script>
Hãy tự mình thử »Lưu ý: Cũng có thể xử lý một sự kiện bên trong phương thức thay vì sử dụng công cụ sửa đổi sự kiện, nhưng công cụ sửa đổi sự kiện giúp việc này dễ dàng hơn nhiều.
Các công cụ sửa đổi v-on khác nhau
Công cụ sửa đổi sự kiện được sử dụng trong các tình huống khác nhau. Chúng ta có thể sử dụng công cụ sửa đổi sự kiện khi nghe các sự kiện bàn phím, sự kiện nhấp chuột và thậm chí chúng ta có thể sử dụng công cụ sửa đổi sự kiện kết hợp với nhau.
Công cụ sửa đổi sự kiện .once có thể được sử dụng sau cả sự kiện nhấp chuột và bàn phím.
Công cụ sửa đổi sự kiện phím trên bàn phím
Chúng tôi có ba loại sự kiện bàn phím khác nhau keydown , keypress và keyup .
Với mỗi loại sự kiện quan trọng, chúng ta có thể chỉ định chính xác khóa nào sẽ nghe sau khi sự kiện quan trọng xảy ra. Chúng tôi có .space , .enter , .w và .up để kể tên một số.
Bạn có thể ghi sự kiện quan trọng vào trang web hoặc vào bảng điều khiển bằng console.log(event.key) để tự mình tìm giá trị của một khóa nhất định:
Ví dụ
Sự kiện bàn phím keydown sẽ kích hoạt phương thức 'getKey' và giá trị 'key' từ đối tượng sự kiện được ghi vào bảng điều khiển và trang web.
<input v-on:keydown="getKey">
<p> {{ keyValue }} </p>
data() {
return {
keyValue = ''
}
},
methods: {
getKey(evt) {
this.keyValue = evt.key
console.log(evt.key)
}
}
Hãy tự mình thử » Chúng tôi cũng có thể chọn giới hạn sự kiện chỉ xảy ra khi nhấp chuột hoặc nhấn phím xảy ra kết hợp với các phím sửa đổi hệ thống .alt , .ctrl , .shift hoặc .meta . Phím bổ trợ hệ thống .meta đại diện cho phím Windows trên máy tính Windows hoặc phím lệnh trên máy tính Apple.
| Công cụ sửa đổi phím | Chi tiết |
|---|---|
.[ Vue key alias ] | Các khóa phổ biến nhất có bí danh riêng trong Vue:
|
.[ letter ] | Chỉ định chữ cái xuất hiện khi bạn nhấn phím. Ví dụ: sử dụng công cụ sửa đổi phím .s để nghe phím 'S'. |
.[ system modifier key ] | .alt , .ctrl , .shift hoặc .meta . Các phím này có thể được sử dụng kết hợp với các phím khác hoặc kết hợp với thao tác click chuột. |
Ví dụ
Sử dụng công cụ sửa đổi .s để tạo cảnh báo khi người dùng viết 's' bên trong thẻ <textarea>.
<div id="app">
<p>Try pressing the 's' key:</p>
<textarea v-on:keyup.s="createAlert"></textarea>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
methods: {
createAlert() {
alert("You pressed the 'S' key!")
}
}
})
app.mount('#app')
</script>
Hãy tự mình thử »Kết hợp các công cụ sửa đổi sự kiện bàn phím
Các công cụ sửa đổi sự kiện cũng có thể được sử dụng kết hợp với nhau để có nhiều điều phải xảy ra đồng thời để phương thức được gọi.
Ví dụ
Sử dụng kết hợp các công cụ sửa đổi .s và .ctrl để tạo cảnh báo khi nhấn đồng thời 's' và 'ctrl' bên trong thẻ <textarea> .
<div id="app">
<p>Try pressing the 's' key:</p>
<textarea v-on:keydown.ctrl.s="createAlert"></textarea>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
methods: {
createAlert() {
alert("You pressed the 'S' and 'Ctrl' keys, in combination!")
}
}
})
app.mount('#app')
</script>
Hãy tự mình thử »Công cụ sửa đổi nút chuột
Để phản ứng khi nhấp chuột, chúng ta có thể viết v-on:click , nhưng để chỉ định nút chuột nào được nhấp, chúng ta có thể sử dụng các từ bổ nghĩa .left , .center hoặc .right .
Người dùng bàn di chuột: Bạn có thể cần nhấp bằng hai ngón tay hoặc ở phía dưới bên phải của bàn di chuột trên máy tính để tạo nhấp chuột phải.
Ví dụ
Thay đổi màu nền khi người dùng nhấp chuột phải vào phần tử <div> :
<div id="app">
<div v-on:click.right="changeColor"
v-bind:style="{backgroundColor:'hsl('+bgColor+',80%,80%)'}">
<p>Press right mouse button here.</p>
</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
bgColor: 0
}
},
methods: {
changeColor() {
this.bgColor+=50
}
}
})
app.mount('#app')
</script>
Hãy tự mình thử »Các sự kiện nút chuột cũng có thể hoạt động kết hợp với phím bổ trợ hệ thống.
Ví dụ
Thay đổi màu nền khi người dùng nhấp chuột phải vào phần tử <div> kết hợp với phím “ctrl”:
<div id="app">
<div v-on:click.right.ctrl="changeColor"
v-bind:style="{backgroundColor:'hsl('+bgColor+',80%,80%)'}">
<p>Press right mouse button here.</p>
</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
bgColor: 0
}
},
methods: {
changeColor() {
this.bgColor+=50
}
}
})
app.mount('#app')
</script>
Hãy tự mình thử » Công cụ sửa đổi sự kiện .prevent có thể được sử dụng cùng với công cụ sửa đổi .right để ngăn menu thả xuống mặc định xuất hiện khi chúng ta nhấp chuột phải.
Ví dụ
Menu thả xuống bị ngăn không cho xuất hiện khi bạn nhấp chuột phải để thay đổi màu nền của phần tử <div> :
<div id="app">
<div v-on:click.right.prevent="changeColor"
v-bind:style="{backgroundColor:'hsl('+bgColor+',80%,80%)'}">
<p>Press right mouse button here.</p>
</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
bgColor: 0
}
},
methods: {
changeColor() {
this.bgColor+=50
}
}
})
app.mount('#app')
</script>
Hãy tự mình thử » Có thể ngăn menu thả xuống xuất hiện sau khi nhấp chuột phải bằng cách sử dụng event.preventDefault() bên trong phương thức, nhưng với công cụ sửa đổi Vue .prevent , mã sẽ trở nên dễ đọc hơn và dễ bảo trì hơn.
Bạn cũng có thể phản ứng khi nhấp chuột vào nút trái kết hợp với các công cụ sửa đổi khác, như click.left.shift :
Ví dụ
Giữ phím bàn phím 'shift' và nhấn nút chuột trái vào thẻ <img> để thay đổi hình ảnh.
<div id="app">
<p>Hold 'Shift' key and press left mouse button:</p>
<img v-on:click.left.shift="changeImg" v-bind:src="imgUrl">
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
imgUrlIndex: 0,
imgUrl: 'img_tiger_square.jpeg',
imgages: [
'img_tiger_square.jpeg',
'img_moose_square.jpeg',
'img_kangaroo_square.jpeg'
]
}
},
methods: {
changeImg() {
this.imgUrlIndex++
if(this.imgUrlIndex>=3){
this.imgUrlIndex=0
}
this.imgUrl = this.images[this.imgUrlIndex]
}
}
})
app.mount('#app')
</script>
Hãy tự mình thử »