修饰符
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>
<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>
<a href="http://www.baidu.com" @click.prevent="testa">点我</a>
<h3>self修饰符</h3>
<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>
|