文章目录
一、事件修饰符
修饰符是vue功能的拓展,是对vue事件或者系统操作等进行功能的补充。
1 .stop修饰符
事件冒泡
当有多层嵌套标签并且都绑定了监听事件时,触发最内层事件时是内层标签事件首先触发,然后依次向外层冒泡触发事件,直到最外层。
如何阻止事件冒泡?
<div class="outer" @click="outer">
<div class="center" @click="center">
<div class="inner" @click.stop="inner"></div>
</div>
</div>
类似原生Javascript的stopPropagation()方法
inner(event){
event.stopPropagation();
console.log("内层");
}
2 .self修饰符
作用是只有点击元素本身的时候才能触发事件,不接受冒泡上来的事件,同时也不能阻止事件的冒泡
<div class="outer" @click.self="outer">
<div class="center" @click.self="center">
<div class="inner" @click.self="inner"></div>
</div>
</div>
3 .prevent修饰符
当标签本身具有功能时(如a标签),倘若不想给让他使用原有标签,重新给其赋予事件,可以使用…prevent
<div id="app">
<a href="www.baidu.com" @click.prevent="alertDialog">
</div>
var vue = new Vue({
el:"#app",
methods:{
alertDialog(event){
alert('我是超链接')
}
}
})
和原生Javascript方法preventDefault()类似
event.preventDefault();
4 .capture修饰符
capture修饰符是对事件捕获的监听,vue的事件监听默认都是获取冒泡阶段的,所以用capture去监听捕获阶段的事件。
<div class="outer" @click.capture="outer">
<div class="center" @click.capture="center">
<div class="inner" @click.capture="inner"></div>
</div>
</div>
5 .once修饰符
once修饰符是使事件只触发一次。
二、按键修饰符
在原生Javascript中有onkeydown和onkeyup按键的事件监听,在vue中有对应的事件修饰符。
基本使用方法:
<input type="text" @keyup.space="add">
<!--add的方法在methods中随便写-->
.space是vue封装的keyCode别名,和下面代码表示内容相同。
<input type="text" @keyup.32="add">
常用keyCode别名:
keyCode值 | 别名 |
---|---|
13 | .enter |
32 | .space |
37 | .left |
38 | .up |
39 | .right |
40 | .down |
9 | .tab |
46或8 | . delete |
1、系统修饰符
通过规定的按键配合鼠标点击或键盘事件进行事件监听。
比如.ctrl系统修饰符的使用
<button @click.ctrl="add"></button>
此时按住键盘ctrl键然后鼠标点击,才能实现add加1。
常用系统修饰符:
修饰符名称 | 对应键盘键名称 |
---|---|
.ctrl | ctrl |
.alt | alt |
.shift | shift |
meta | windows系统:logo键;ios:common |
此时,如果设置了系统修饰符,并不希望有其他的按键组合事件,如设置了ctrl修饰符,此时按住ctrl和任意按键,都会触发事件监听。所以使用其他修饰符来设置精确匹配,如下修饰符。
2、.exact修饰符
对其他修饰符进行精确匹配。
<button @click.ctrl.exact="add"></button>
方法为在对应的修饰符后面进行连续打点。
三、鼠标修饰符
修饰鼠标的左、滚轮、右键
例:.prevent清除默认右键事件监听
<p>{{a}}</p>
<button @click.right.prevent="add">按我加1</button>
例:按下滚轮键触发事件
<p>{{a}}</p>
<button @click.middle="add">按我加1</button>
四、表单修饰符
表单修饰符一共三个.lazy .number .trim,均为修饰v-model
.lazy
.lazy将Input输入框的数据绑定v-model从实时监听的状态变为change状态。
<div id="app">
<input type="text" v-model.lazy="a">
<p>{{a}}</p>
</div>
当鼠标的光标失去焦点后,再进行数据的更新。
.number
.number将输入的string内容转换为number类型,会将非数字内容过滤,若全不是数字,则得到NaN。
<div id="app">
<input type="text" v-model.number="a">
<p>{{a}}</p>
</div>
.trim
.trim过滤用户输入的首尾空格
<div id="app">
<input type="text" v-model.trim="a">
<p>{{a}}</p>
</div>