5.2.2　修饰符

修饰符分为两种：一种为事件修饰符；另一种为键值修饰符。下面将会介绍这两种修饰符的作用。

1．事件修饰符

事件修饰符：在事件处理程序中调用event.preventDefault()或event.stopPropagation()，是非常常见的需求。尽管可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理DOM事件细节。

（1）.stop：调用event.stopPropagation()。阻止单击事件继续传播，代码如下：

    <a v-on:click.stop="vue"></a>

（2）.prevent：调用event.preventDefault()。

    <!-- 提交事件不再重载页面 -->
    <form v-on:submit.prevent="Submit"></form>
    <!-- 修饰符可以串联 -->
    <a v-on:click.stop.prevent="doThat"></a>
    <!-- 只有修饰符 -->
    <form v-on:submit.prevent></form>

（3）.caputure：使用capture模式添加事件监听器。添加事件监听器时使用事件捕获模式，即元素自身触发的事件先在此处理，然后才交由内部元素进行处理。

    <div v-on:click.capture="vue">…</div>

（4）.self：只当事件是从监听元素本身触发时才触发调回，即事件不是从内部元素触发的。

    <div v-on:click.self="vue">…</div>

（5）.once：单击事件将只会触发一次。

    <a v-on:click.once="vue"></a>

（6）.passive：滚动事件的默认行为（即滚动行为）将会立即触发，而不会等待onScroll完成，这其中包含event.preventDefault()的情况。

    <div v-on:scroll.passive="onScroll">…</div>

使用修饰符时，顺序很重要，相应的代码会以同样的顺序产生。因此，用@click.prevent.self会阻止所有的单击，而@click.self.prevent只会阻止元素上的单击。

2．键值修饰符

在监听键盘事件时，我们经常需要检测keyCode。Vue.js允许为v-on添加按键修饰符。

    <!-- 只有在keyCode为20时调用 vm.submit() -->
    <input v-on:keyup.20="submit">

记住所有的keyCode比较困难，Vue.js为最常用的按键提供了别名。

    <!-- 只有在keyCode为vue时调用 vm.submit() -->
    <input v-on:keyup.vue="submit">
    <!-- 缩写语法 -->
    <input @keyup.vue="submit">

全部的按键别名有如下几个。

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

在Vue中，可以通过全局config.keyCodes对象自定义键值修饰符别名。

    //可以使用 v-on:keyup.
    Vue.config.keyCodes.vue = hello
上一章目录下一章