Chỉ thị Vue v-on
Giống như việc xử lý sự kiện trong JavaScript đơn giản, lệnh v-on
trong Vue sẽ thông báo cho trình duyệt:
- sự kiện nào cần nghe ('click', 'keydown', 'mouseover', v.v.)
- phải làm gì khi sự kiện đó xảy ra
Ví dụ sử dụng v-on
Chúng ta hãy xem một số ví dụ để biết cách sử dụng v-on
với các sự kiện khác nhau và mã khác nhau để chạy khi những sự kiện này xảy ra.
Lưu ý: Để chạy mã nâng cao hơn khi xảy ra sự kiện, chúng tôi cần giới thiệu các phương thức Vue. Tìm hiểu về các phương thức Vue ở trang tiếp theo trong hướng dẫn này.
sự kiện onclick
Lệnh v-on cho phép chúng ta thực hiện các hành động dựa trên các sự kiện được chỉ định.
Sử dụng v-on:click
để thực hiện hành động khi phần tử được nhấp vào.
Ví dụ
Lệnh v-on
được sử dụng trên thẻ <button> để nghe sự kiện 'click'. Khi sự kiện 'click' xảy ra, thuộc tính dữ liệu 'lightOn' được chuyển đổi giữa 'true' và 'false', làm cho <div> màu vàng phía sau bóng đèn hiển thị/ẩn.
<div id="app">
<div id="lightDiv">
<div v-show="lightOn"></div>
<img src="img_lightBulb.svg">
</div>
<button v-on:click="lightOn = !lightOn">Switch light</button>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
lightOn: false
}
}
})
app.mount('#app')
</script>
Hãy tự mình thử »sự kiện đầu vào
Sử dụng v-on:input
để thực hiện hành động khi phần tử nhận được đầu vào, giống như thao tác nhấn phím bên trong trường văn bản.
Ví dụ
Đếm số lần nhấn phím cho trường văn bản đầu vào:
<div id="app">
<input v-on:input="inpCount++">
<p>{{ 'Input events occured: ' + inpCount }}</p>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
inpCount: 0
}
}
})
app.mount('#app')
</script>
Hãy tự mình thử »Sự kiện di chuyển chuột
Sử dụng v-on:mousemove
để thực hiện hành động khi con trỏ chuột di chuyển qua một phần tử.
Ví dụ
Thay đổi màu nền của phần tử <div> bất cứ khi nào con trỏ chuột di chuyển qua phần tử đó:
<div id="app">
<p>Move the mouse pointer over the box below</p>
<div v-on:mousemove="colorVal=Math.floor(Math.random()*360)"
v-bind:style="{backgroundColor:'hsl('+colorVal+',80%,80%)'}">
</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
colorVal: 50
}
}
})
app.mount('#app')
</script>
Hãy tự mình thử »Sử dụng v-on trong vòng lặp v-for
Bạn cũng có thể sử dụng lệnh v-on
bên trong vòng lặp v-for
.
Các mục của mảng có sẵn cho mỗi lần lặp bên trong giá trị v-on
.
Ví dụ
Hiển thị danh sách dựa trên mảng thực phẩm và thêm sự kiện nhấp chuột cho từng mục sẽ sử dụng giá trị từ mục mảng để thay đổi nguồn của hình ảnh.
<div id="app">
<img v-bind:src="imgUrl">
<ol>
<li v-for="food in manyFoods" v-on:click="imgUrl=food.url">
{{ food.name }}
</li>
</ol>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
imgUrl: 'img_salad.svg',
manyFoods: [
{name: 'Burrito', url: 'img_burrito.svg'},
{name: 'Salad', url: 'img_salad.svg'},
{name: 'Cake', url: 'img_cake.svg'},
{name: 'Soup', url: 'img_soup.svg'}
]
}
}
})
app.mount('#app')
</script>
Hãy tự mình thử » Viết tắt của v-on
Cách viết tắt của ' v-on
' chỉ đơn giản là ' @
'.
Ví dụ
Ở đây chúng ta chỉ viết ' @
' thay vì ' v-on
':
<button @:click ="lightOn = !lightOn">Switch light</button>
Hãy tự mình thử » Chúng ta sẽ bắt đầu sử dụng cú pháp @
sau trong hướng dẫn này.