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 事件
