Chỉ thị Vue v-on
Ví dụ
Sử dụng lệnh v-on để thay đổi màu nền của phần tử <div> khi nhấp vào nút.
<template>
<h1>v-on Example</h1>
<div v-bind:class="{ yelClass: bgColor }">
<p>Click the button to change background color of this DIV box.</p>
<button v-on:click="bgColor = !bgColor">Click</button>
<p>bgColor property: "{{ bgColor }}"</p>
</div>
</template>
Chạy ví dụ »Xem thêm ví dụ dưới đây.
Định nghĩa và cách sử dụng
Lệnh v-on được đặt trên một phần tử để đính kèm trình xử lý sự kiện.
Để đính kèm trình xử lý sự kiện bằng v-on chúng ta cần cung cấp loại sự kiện, bất kỳ công cụ sửa đổi nào cũng như một phương thức hoặc biểu thức sẽ chạy khi sự kiện đó xảy ra.
Nếu v-on được đặt trên thẻ HTML thông thường, các loại sự kiện mà chúng ta có thể xác định để lắng nghe là các sự kiện thông thường như input , click hoặc mouseover .
Nếu v-on được đặt trên một thành phần tùy chỉnh, các loại sự kiện mà chúng ta có thể xác định để lắng nghe là các sự kiện tùy chỉnh được phát ra từ thành phần đó.
Viết tắt của v-on: là @ .
sửa đổi
| bổ nghĩa | Chi tiết | |
|---|---|---|
.capture | Sự kiện sủi bọt được ghi lại trước tiên khi đặt công cụ sửa đổi .capture . | Chạy ví dụ » |
.once | Sự kiện chỉ có thể kích hoạt một lần sau khi tải trang. | Chạy ví dụ » |
.passive | Đánh dấu trình xử lý sự kiện là thụ động bằng cách đặt passive: true trên phần tử DOM. Điều này có nghĩa là trình duyệt không phải chờ xem liệu event.preventDefault() có được gọi hay không và đối với các sự kiện xảy ra rất thường xuyên, như cuộn, việc đặt trình xử lý sự kiện thành thụ động có thể nâng cao hiệu suất. | Chạy ví dụ » |
.prevent | Sự kiện này bị ngăn không cho bắn. Có thể được sử dụng để ngăn chặn sự kiện gửi biểu mẫu mặc định. Không thể ngăn chặn tất cả các sự kiện. | Chạy ví dụ » |
.stop | Một sự kiện sủi bọt sẽ bị ngừng lan truyền thêm nữa. event.stopPropagation() được gọi. | Chạy ví dụ » |
.self | Theo mặc định, các sự kiện sẽ truyền lên các phần tử gốc và do đó một sự kiện có thể kích hoạt nhiều trình xử lý sự kiện. Công cụ sửa đổi .self chỉ cho phép các sự kiện từ phần tử của chính nó kích hoạt trình xử lý sự kiện. | Chạy ví dụ » |
.{keyAlias} | Giới hạn trình xử lý sự kiện chỉ phản ứng với một số khóa sự kiện nhất định, ví dụ v-on:click .right hoặc v-on:keyup .s . Chúng ta thậm chí có thể yêu cầu nhiều hơn một phím xảy ra đồng thời để trình xử lý phản ứng, như sau: v-on:click .left.shift . | Chạy ví dụ » |
.left | Bấm chuột vào nút trái. | |
.right | Bấm chuột phải vào nút. | |
.middle | Bấm chuột vào nút giữa. |
Thêm ví dụ
ví dụ 1
Trước tiên, hãy sử dụng công cụ sửa đổi .capture để ghi lại sự kiện nhấp chuột trong phần tử gốc.
<template>
<h1>v-on Example</h1>
<p>When the '.capture' modifier is used on the parent DIV element, the event is captured first in the parent element when the child element is clicked.</p>
<p>If the '.capture' modifier is removed from this code, the child element will capture the click event first. This is the default behavior, that the event bubbles up, first in child element, then to the parent.</p>
<div v-on:click.capture="this.msg.push('parent')" id="parent">
<p>This is the parent element.</p>
<div v-on:click="this.msg.push('child')">
<p>This is the child element. CLICK HERE!</p>
</div>
</div>
<p>The order of when and where the event is captured.</p>
<ol>
<li v-for="x in msg">{{ x }}</li>
</ol>
</template>
<script>
export default {
data() {
return {
msg: []
};
}
}
</script>
<style scoped>
div {
margin: 10px;
padding: 10px;
border: dashed black 1px;
}
#parent {
width: 250px;
background-color: lightpink;
}
#parent > div {
cursor: pointer;
background-color: lightgreen;
}
</style>
Chạy ví dụ »Ví dụ 2
Sử dụng công cụ sửa đổi .stop để ngăn sự kiện lan truyền thêm.
<template>
<h1>v-on Example</h1>
<p>The '.stop' modifier stops the click event from propagating any further.</p>
<p>If the '.stop' modifier is removed from this code, the parent element will also capture the click event on the child element.</p>
<div v-on:click="this.msg.push('parent')" id="parent">
<p>This is the parent element.</p>
<div v-on:click.stop="this.msg.push('child')">
<p>This is the child element. CLICK HERE!</p>
</div>
</div>
<p>The order of when and where the event is captured.</p>
<ol>
<li v-for="x in msg">{{ x }}</li>
</ol>
</template>
<script>
export default {
data() {
return {
msg: []
};
}
}
</script>
<style scoped>
div {
margin: 10px;
padding: 10px;
border: dashed black 1px;
}
#parent {
width: 250px;
background-color: lightpink;
}
#parent > div {
cursor: pointer;
background-color: lightgreen;
}
</style>
Chạy ví dụ »Ví dụ 3
Sử dụng công cụ sửa đổi .passive để nâng cao hiệu suất trong quá trình cuộn.
<template>
<h1>v-on Example</h1>
<p>The '.passive' modifier sets the event handler as passive, and this can enhance performance.</p>
<div v-on:scroll.passive="this.scrollTimes++" id="parent">
<p>Scroll here.</p>
<p>Bladi-bladi-bladi</p>
<p>potato potato</p>
<p>Scroll-scroll-scroll</p>
<p>Scroll more...</p>
</div>
<p>Scroll happended {{ scrollTimes }} times.</p>
</template>
<script>
export default {
data() {
return {
scrollTimes: 0
};
}
}
</script>
<style scoped>
div {
margin: 10px;
padding: 10px;
border: dashed black 1px;
width: 200px;
height: 50px;
overflow: scroll;
background-color: lightcoral;
}
</style>
Chạy ví dụ »Ví dụ 4
Sử dụng công cụ sửa đổi .once để nâng cao hiệu suất trong quá trình cuộn.
<template>
<h1>v-on Example</h1>
<p>The '.once' modifier prevents the event from happening more than once.</p>
<button v-on:click.once="clickTimes++">Click</button>
<p>Click event happened {{ clickTimes }} times.</p>
</template>
<script>
export default {
data() {
return {
clickTimes: 0
};
}
}
</script>
Chạy ví dụ »Ví dụ 5
Sử dụng công cụ sửa đổi .self để phần tử gốc chỉ phản ứng với các sự kiện nhấp chuột xảy ra với chính nó.
<template>
<h1>v-on Example</h1>
<p>The '.self' modifier is set on the parent element. </p>
<p>Click on the child element and see how the event propagates past the parent element because the parent click event only reacts to click on the element itself.</p>
<div v-on:click="addMsg('grandParent')" id="grandParent">
Grandparent element
<div v-on:click.self="addMsg('parent')">
Parent element.
<div v-on:click="addMsg('child')">
Child element. CLICK HERE!
</div>
</div>
</div>
<p>The order of when and where the event is captured.</p>
<ol>
<li v-for="x in msg">{{ x }}</li>
</ol>
</template>
<script>
export default {
data() {
return {
msg: []
};
},
methods: {
addMsg(txt) {
this.msg.push(txt);
}
}
}
</script>
<style scoped>
div {
margin: 10px;
padding: 10px;
border: dashed black 1px;
cursor: pointer;
}
#grandParent {
width: 250px;
background-color: lightpink;
}
#grandParent > div {
background-color: lightgreen;
}
#grandParent > div > div {
background-color: lightskyblue;
}
</style>
Chạy ví dụ »Ví dụ 6
Sử dụng công cụ sửa đổi .prevent để ngăn danh sách thả xuống mặc định xuất hiện khi nhấp chuột phải.
<template>
<h1>v-on Example</h1>
<p>The '.prevent' modifier is set to prevent the drop down menu to appear when the user does a right mouse button click.</p>
<div
v-on:click.right.prevent="changeColor"
v-bind:style="{ backgroundColor: 'hsl(' + bgColor + ',80%,80%)' }">
<p>Press right mouse button here.</p>
</div>
</template>
<script>
export default {
data() {
return {
bgColor: 0
}
},
methods: {
changeColor() {
this.bgColor += 50
}
}
}
</script>
<style scoped>
div {
margin: 10px;
padding: 10px;
border: dashed black 1px;
width: 200px;
}
</style>
Chạy ví dụ »Ví dụ 7
Sử dụng công cụ sửa đổi .left.shift để thay đổi hình ảnh khi người dùng nhấp chuột trái trong khi giữ phím shift.
<template>
<h1>v-on Example</h1>
<p>Hold 'Shift' key and press left mouse button on the image:</p>
<img v-on:click.left.shift="changeImg" v-bind:src="imgUrl">
</template>
<script>
export default {
data() {
return {
imgFish: true,
imgUrl: 'img_fish.svg'
}
},
methods: {
changeImg() {
this.imgFish = !this.imgFish;
if (this.imgFish) {
this.imgUrl = 'img_fish.svg'
}
else {
this.imgUrl = 'img_tiger.svg'
}
}
}
}
</script>
<style scoped>
img {
width: 200px;
}
</style>
Chạy ví dụ »Trang liên quan
Hướng dẫn Vue: Sự kiện Vue
Hướng dẫn Vue: Chỉ thị Vue v-on
Hướng dẫn Vue: Phương thức Vue
Hướng dẫn Vue: Công cụ sửa đổi sự kiện Vue
Hướng dẫn JavaScript: Sự kiện JavaScript
