Vue中的事件修饰符，按键修饰符

Posted 2021-08-11 叶卡捷琳堡

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue中的事件修饰符，按键修饰符相关的知识，希望对你有一定的参考价值。

文章目录

- - 修饰符
  - - 1.事件修饰符
    - 2.按键修饰符

修饰符

1.事件修饰符

vue中提供的事件修饰符一共有4种

.stop：用来阻止事件冒泡（防止事件向父标签传递）
.prevent：用来阻止标签的默认行为
.self：只监听自身标签触发的事件
.once：该事件只触发一次

语法：

@事件名.事件修饰符=“事件处理函数”

例：@click.stop=“test”，给click加了一个stop修饰的事件

具体代码内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件修饰符</title>
	</head>
	<body>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<div id="app">
			<h1>{{message}}</h1>
			<input type="button" value="弹出test" @click="test" />
			<br><br>
			<h3>stop修饰符</h3>
			<!-- 演示.stop事件修饰符 -->
			<div id="p" style="width: 100px;height: 100px; background-color: #FF0000;" @click="parent">
				<div id="c" style="width: 50px; height: 50px; background-color: aquamarine;" @click.stop="child">
					
				</div>
			</div>
			<h3>prevent修饰符</h3>
			<!-- 
				演示.prevent事件修饰符
				使其不触发默认行为，只触发一个方法
			-->
			<a href="http://www.baidu.com" @click.prevent="testa">点我</a>
			
			<h3>self修饰符</h3>
			<!-- .self修饰符，只触发自身的修饰符 -->
			<!-- 给parent加修饰符，使其只监听parent，不监听传上来的事件 -->
			<div id="p" style="width: 100px;height: 100px; background-color: #FF0000;" @click.self="parent">
				<div id="c" style="width: 50px; height: 50px; background-color: aquamarine;" @click="child">
					
				</div>
			</div>
			<h3>once修饰符</h3>
			<input type="button" value="事件只触发一次" @click.once="test" />
		</div>
		<script type="text/javascript">
			var vue = new Vue({
				el:"#app",
				data:{
					message:"事件修饰符"
				},
				methods:
				{
					test(){
						alert("test")
					},
					parent(){
						alert("parent")
					},
					child(){
						alert("child")
					},
					testa(){
						alert("testa")
					}
				},
				
			})
		</script>
	</body>
	
</html>

2.按键修饰符

事件修饰符可以对所有事件进行修饰

按键修饰符用于对键盘事件进行修饰

键盘事件：比如keyup，keydown等等

vue中的键盘修饰符

.enter：对回车键修饰
.tab：对tab键修饰
.delete（捕获删除和退格键）
.esc：对esc修饰
.space：对空格修饰
.up：对上
.down：对下
.left：对左
.right：对右

只有在按下某些键时才触发事件

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>按键修饰符</title>
	</head>
	<body>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<div id="app">
			<h3>{{message}}</h3>
			<!-- 在删除和回车的时候触发 -->
			<input type="text" v-model="name" @keyup.enter.delete="keyup" />
		</div>
		<script type="text/javascript">
			var vue = new Vue({
				el:"#app",
				data:{
					message:"按键修饰符",
					name:""
				},
				methods:
				{
					keyup(){
						alert(this.name)
					}
				}
			})
		</script>
	</body>
</html>

以上是关于Vue中的事件修饰符，按键修饰符的主要内容，如果未能解决你的问题，请参考以下文章

键盘事件、事件修饰符

vue01----虚拟DOM指令事件修饰符按键修饰符双向数据绑定v-if和v-show的区别

Vue之@click事件修饰符@click.stop与@click.prevent按键修饰符@keyup.enter

vue 自定义全局按键修饰符