vue——修饰符

事件修饰符

.prevent

阻止标签的默认事件

• 例：contextmenu事件在元素中用户右击鼠标时触发并打开上下文菜单，意思就是右键单击的时候会打开菜单并且执行自定义事件

<button @contextmenu="menu">按钮</button>

• 而用了.prevent修饰符再右键点击就只会执行自定义的事件，不会执行默认打开菜单的事件

<button @contextmenu.prevent="menu">按钮</button>

.stop

阻止事件冒泡，写在触发事件冒泡的元素上

• 例：点击p标签时会执行自身的点击事件，由于事件的冒泡，也会执行父元素身上的点击事件

    <div class="box" @click="boxClick">
      <p class="small" @click.stop="smallClick"></p>
    </div>

• 加了.stop修饰符之后，会阻止事件冒泡，将不会执行父元素身上的方法

    <div class="box" @click="boxClick">
      <p class="small" @click.stop="smallClick"></p>
    </div>

.capture

捕获事件冒泡，它会影响事件冒泡的执行顺序，变成了由外向内执行

• 例：此时点击p标签的话，由于事件冒泡的机制，会先执行p标签上的事件，再执行父元素div标签的事件。

 <div class="box" @click="boxClick">
      <p class="small" @click="smallClick"></p>
    </div>

• 加了.capture修饰符后会先执行父元素div标签上的事件，再执行子元素p标签上的事件

 <div class="box" @click.capture="boxClick">
      <p class="small" @click.capture="smallClick"></p>
    </div>

.self

控制事件只在自己本身的元素上起作用

• 例：此时点击p标签的话，由于事件冒泡的机制，会先执行p标签上的事件，再执行父元素div标签的事件。

<div class="box" @click="boxClick">
      <p class="small" @click="smallClick"></p>
</div>

• 加了.self修饰符后，只会执行自身身上的事件

<div class="box" @click.self="boxClick">
      <p class="small" @click="smallClick"></p>
</div>

.once

控制事件只起作用一次，事件执行一次之后就再不执行了，除非是重新加载

<button @click.once=“menu”>按钮

按键修饰符

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

用法

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

按键码

• keyup、keydown //抬起/按下
• .left 键盘左键
• .right 键盘右键
• .up 键盘上键
• .down 键盘下键
• .enter 键盘回车键
• .esc 键盘esc键
• .delete 键盘退格键
• .space 键盘空格键

输入框获取焦点后，对应的修饰符才会起作用

表单元素修饰符

.lazy

不再进行实时数据双向绑定，直到遇到change事件才会进行数据的双向绑定

.number

强制的把用户输入的内容转换为number类型
如果输入的内容是数字开头，后面包含了字母，则会把数字保留下来，字母过滤掉
但是如果输入的内容是字符串开头，那么number修饰符不会做任何事情

.trim

过滤用户输入内容的左右两边的空格，中间内容的空格不过滤