Vue修饰符

修饰符

修饰符是由点开头的指令后缀来表示的。

事件修饰符

• .stop
• .prevent
• .capture
• .self
• .once
• .passive

<!-- .stop修饰符可以阻止事件继续传播下去 -->
<a v-on:click.stop="Click">这是a标签</a>

<!-- .prevent修饰符可以阻止提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

修饰符也可以串联使用

<!---->
<a v-on:click.stop.prevent="Click">这是a标签</a>

<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 是当前元素自身时触发处理函数,即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

修饰符的使用顺序是非常的重要，什么顺序决定了你的代码的功能。

<a v-on:click.prevent.self="doThat"></a>

上面的代码会阻止所有的点击事件

<a v-on:click.self.prevent="doThat"></a>

调换顺序后，这里只会阻止自身的点击事件。

按键修饰符

在监听键盘事件时，我们经常需要检查详细的按键。所以Vue就允许v-on在监听键盘事件中添加按键修饰符。

<input v-on:keyup.enter="submit"/>
<!-- 只有在key值为enter或者说在按下enter键时才会调用.submit(). -->

按键码

• .enter
• .tab
• .delete (捕获“删除”和“退格”键)
• .esc
• .space
• .up
• .down
• .left
• .right

keyCode事件的用法已经被废弃了，有可能不会被最新的浏览器所支持。

在知道键盘码的情况下也可以使用这样的形式来使用：

<input v-on:keyup.13="submit" />

还可以通过全局对象来自定义按键修饰符别名:

Vue.config.keyCodes.f1 = 112

系统修饰符

• .ctrl
• .alt
• .shift
• .meta

例：

<!-- Alt + c -->
<input v-on:keyup.alt.67="clear" / >

<!-- Ctrl + Click -->
<button v-on:click.ctrl="Click">这是按钮</button>

.exact 修饰符

.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

<!-- 这时候的按键即使Alt按键被一同按下事件一样会被触发 -->
<button v-on:click.ctrl="Click">这是按钮</button>

加上.exact修饰符后

<!-- 有且只有按下Ctrl的时候才可以触发事件，其他按键一起按下后事件就不会触发了。 -->
<button v-on:click.ctrl.exact="Click">这是按钮</button>

去除系统修饰符的效果

<!-- 只有在没有任何的系统修饰符被按下的情况下点击才可以触发事件 -->
<button v-on:click.exact="Click">这是按钮</button>

.exact修饰符可以使事件更加的方便和精准的触发。

鼠标按钮修饰符

• .left
• .right
• .middle

这些修饰符会限制处理函数仅响应特定的鼠标按钮。