vue修饰符复习

「这是我参与11月更文挑战的第18天，活动详情查看：2021最后一次更文挑战」

vue中的修饰符可分为:

事件修饰符

目的:

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

为了解决这个问题，Vue.js 为 'v-on' 提供了事件修饰符。修饰符是由点开头的指令后缀来表示的。

包括:

1. stop:阻止单击事件继续传播
2. prevent:阻止默认行为
3. capture:增加事件侦听器时可以使用捕获模式
4. self:只有事件在元素本身触发时触发回调
5. once:只会触发一次
6. passive:其能够提升移动端的性能,元素自身触发的事件先处理，然后处理内部的元素
7. key:触发事件的按键

按键修饰符

目的:

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

包括:

1. enter
2. tab
3. delete(捕获“删除”和“退格”键)
4. esc
5. space
6. up
7. down
8. left
9. right

在添加了lazy之后，会把 'oninput' 事件改为 'onchange' 事件

v-model修饰符

1. lazy 在输入框中，一般情况默认是在input事件中同步输入框的数据，使用 lazy修饰符会转变为在change事件中同步,把 'oninput' 事件改成 'onchange'事件,同步输入框的值与数据,失去焦点或按回车才更新
2. number 将输入转换为Number类型，默认是String

注意:

输入的第一个只能是数字或者小数点或者是正负号,如果输入的第一个字是字符串，那number这个修饰符不会生效

3. trim 自动过滤输入的首尾空格

系统修饰符；

相应按键时才触发键盘事件的监听器

1. ctrl
2. alt
3. shift
4. meta

补充:还有鼠标按钮修饰符(.left,,right,.middle)和系统修饰符功能类似，相应按键触发鼠标事件监听