vue修饰符

Vue修饰符

---

1.常用事件修饰符

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

<!--.stop阻止事件冒泡；.self只响应自己的事件，不响应子节点冒泡上来的事件-->
<div @click.self="parentClick">
    <a href="javascript:void(0)" @click.stop="childClick"></a>
</div>

<!--.prevent 提交时间不再重载页面-->
<form @submit.prevent="onSubmit"></form>

<!--修饰符可以串联-->
<form @submit.stop.prevent="doSomething"></form>

<!--也可以只有修饰符-->
<form @submit.prevent></form>

<!--.capture 改变冒泡顺序，先执行当前有这个修饰符的事件,然后再从内往外执行-->

<div class="div1" @click="click1">
    <div class="div2" @click.capture="click2">
        <div class="div3" @click="click3"></div>
    </div>
</div>
<!--
当我们点击div3时，按理说执行顺序是click3->click2->click1;
但是我们click2有.capture修饰符，
所以最后执行的顺序是:click2->click3->click1
-->

<!--.once 事件只会触发一次，并且可以使用到自定义的组件事件上去-->

 <el-select v-model="value" placeholder="请选择" @change.once="selectChange">
    ......
</el-select>


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

<div @scroll.passive="onScroll">
    ......
</div>

<!--这个`passive`修饰符尤其能够提升移动端的性能-->
<!--注意，不要把`.passive`和`.prevent`一起使用，因为`.prevent`将会被忽略，同时浏览器会抛出一个警告。-->
<!--`.passive`会告诉浏览器你不想阻止事件的默认行为-->

2.按键修饰符

• .enter
• .tab
• .delete
• .esc
• .space
• .up
• .down
• .left
• .right

<input type="text" @keyup.enter="submit">

3.系统修饰符

• .ctrl

• .alt

• .shift

• .meta

• .exact

需要注意的是，在Mac电脑上，meta对应command键。

<input type="text" @keyup.alt.67="clear">

<!--这里的修饰符与上面不同，在和keyup事件一起用时，事件触发时修饰按键必须处于按下的状态。-->
<!--也就是说，只有在按住alt的情况下释放其他案件，才会触发keyup.alt。而单单释放alt也不会触发事件。-->
<!--如果你想要触发，建议换用keycode：keyup.18-->

.exact

<!--即使alt或者shift其他按键一起按下也会触发-->
<button @click.ctrl="onClick"></button>

<!--有且只有ctrl按下的时候才会被触发-->
<button @click.ctrl.exact="onCtrlClick"></button>

<!--没有任何系统修饰符被按下的时候才触发-->
<button @click.exact="onclick"></button>

4,其他的常用的修饰符

• .number
• .lazy
• .trim

.number

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：

<input v-model.number="age" type="number">

.lazy

在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步
(除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转为在 change 事件_之后_进行同步

<!-- 在“change”时而非“input”时更新,不会输入一个就触发一次，而是输入完，失焦以后 -->
<input v-model.lazy="msg">

.trim

如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

<input v-model.trim="msg">