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>当在父 DIV 元素上使用".capture"修饰符时，当单击子元素时，将首先在父元素中捕获事件。</p>
<p>如果从此代码中删除".capture"修饰符，则子元素将首先捕获单击事件。 这是默认行为，事件首先在子元素中冒泡，然后到父元素。</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>捕获事件的时间和地点的顺序。</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>".stop"修饰符可阻止单击事件进一步传播。</p>
<p>如果从此代码中删除".stop"修饰符，父元素还将捕获子元素上的单击事件。</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>这是子元素。 点击这里！</p>
</div>
</div>
<p>捕获事件的时间和地点的顺序。</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>'.passive' 修饰符将事件处理程序设置为被动，这可以提高性能。</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>".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>'.self' 修饰符设置在父元素上。</p>
<p>单击子元素并查看事件如何传播经过父元素，因为父单击事件仅对元素本身的单击做出反应。</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>捕获事件的时间和地点的顺序。</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>".prevent"修饰符设置为防止用户单击鼠标右键时出现下拉菜单。</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
当用户在按住 Shift 键的同时单击鼠标左键时，使用 .left.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 事件
