修饰符
修饰符是由点开头的指令后缀来表示的。
事件修饰符
.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" />
有一些按键码在不同版本的IE浏览器中可能有所不同,使用按键的别名是最好的选择。
还可以通过全局对象来自定义按键修饰符别名:
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>
修饰符和其他的常规的按键不一样,在和
keyup
事件一起使用时,事件触发时按键修饰符必须处于按下的状态。按住修饰符的同时释放其他的相匹配的按键才可以触发事件,只是单纯的按下其中的任何一个按键都不会触发事件。
.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
这些修饰符会限制处理函数仅响应特定的鼠标按钮。
这只是简单的说明。