修饰符

引用：https://juejin.cn/post/7026867875990208543#heading-22

事件修饰符

stop

• stop修饰符的作用是阻止冒泡

prevent⭐

• prevent修饰符的作用是阻止默认事件（例如 a 标签的跳转）

capture

• 事件流默认冒泡，使用 capture 进行捕获捕获

self

• self修饰符作用是，只有点击事件绑定的本身才会触发事件

once

• once修饰符的作用是，事件只执行一次

native⭐

• native修饰符是加在自定义组件的事件上，保证事件能执行
• native是用来是在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的 HTML 标签看待

passive

• 当我们在监听元素滚动事件的时候，会一直触发 onscroll 事件，在 pc 端是没啥问题的，但是在移动端，会让我们的网页变卡，因此我们使用这个修饰符的时候，相当于给 onscroll 事件整了一个.lazy 修饰符

v-bind 修饰符

sync⭐

当父组件传值进子组件，子组件想要改变这个值时，可以这么做

  // 父组件里
  <children :foo.sync="bar"></children>
  // 子组件里
  this.$emit('update:foo', newValue)

camel

.camel 修饰符允许在使用 DOM 模板时将 v-bind property 名称驼峰化，例如 SVG 的 viewBox property：

<svg :view-box.camel="viewBox"></svg>

鼠标修饰符

left right middle

• 这三个修饰符是鼠标的左中右按键触发的事件

表单相关修饰符

trim⭐

• trim修饰符的作用类似于 JavaScript 中的trim()方法，作用是把v-model绑定的值的首尾空格给过滤掉。

lazy

• lazy修饰符作用是，改变输入框的值时 value 不会改变，当光标离开输入框时，v-model绑定的值 value 才会改变

number

• number修饰符的作用是将值转成数字，但是先输入字符串和先输入数字，是两种情况：

先输入数字的话，只取前面数字部分

先输入字母的话，number修饰符无效

系统修饰符

.ctrl、.alt、.shift、.meta

按键修饰符

配合键盘事件使用: .enter .tab .delete .esc .space .up .down left......