Vue基础修饰符学习2

一、事件修饰符

修饰符是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>