Vue v-on 指令
示例
使用 v-on 指令在单击按钮时更改 <div> 元素的背景颜色。
<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>
在下面查看更多示例。
定义和用法
将 v-on 指令放在元素上以附加事件监听器。
要使用 v-on 附加事件监听器，我们需要提供事件类型和任何修饰符以及在该事件发生时应运行的方法或表达式。
如果 v-on 放在普通的 HTML 标签上，我们可以定义的事件类型是常规事件，如 input、click 或 mouseover。
如果 v-on 放在自定义组件上，我们可以定义的事件类型是从该组件发出的自定义事件。
v-on: 的简写是 @。
修饰符
| 修饰符 | 细节 | |
|---|---|---|
.capture |
冒泡事件首先在设置了 .capture 修饰符的位置捕获。 |
运行示例 » |
.once |
事件只能在页面加载后触发一次。 | 运行示例 » |
.passive |
通过在 DOM 元素上设置 passive: true 将事件处理程序标记为被动。这意味着浏览器不需要等待查看是否调用了 event.preventDefault()，并且对于经常发生的事件，如滚动，将事件处理程序设置为被动可以提高性能。 |
运行示例 » |
.prevent |
阻止事件触发。可以用来例如阻止默认的表单提交事件。无法阻止所有事件。 | 运行示例 » |
.stop |
阻止冒泡事件进一步传播。调用 event.stopPropagation()。 |
运行示例 » |
.self |
默认情况下，事件会向上传播到父元素，因此一个事件可以触发多个事件监听器。 .self 修饰符只允许来自自身元素的事件触发事件监听器。 |
运行示例 » |
.{keyAlias} |
将事件处理程序限制为只对某些事件键做出反应，例如 v-on:click.right 或 v-on:keyup.s。我们甚至可以要求必须同时发生多个键才能使处理程序做出反应，例如： v-on:click.left.shift。 |
运行示例 » |
.left |
左键单击。 | |
.right |
右键单击。 | |
.middle |
中键单击。 |
更多示例
示例 1
使用 .capture 修饰符首先捕获父元素中的单击事件。
<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>
示例 2
使用 .stop 修饰符阻止事件进一步传播。
<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>
示例 3
使用 .passive 修饰符在滚动过程中提高性能。
<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>
示例 4
使用 .once 修饰符在滚动过程中提高性能。
<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>
示例 5
使用 .self 修饰符，使父元素只对发生在自己身上的单击事件做出反应。
<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>
示例 6
使用 .prevent 修饰符阻止右键单击时默认的下拉列表出现。
<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>
示例 7
使用 .left.shift 修饰符，在用户按下 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>
相关页面
Vue 教程：Vue 事件
Vue 教程：Vue v-on 指令
Vue 教程：Vue 方法
Vue 教程：Vue 事件修饰符
JavaScript 教程：JavaScript 事件
