vue修饰符

Vue.js 中的修饰符（Modifiers）是特殊的后缀，用于指示一个指令应该以特殊方式绑定。修饰符在模板编译过程中被处理，并作为参数传递给绑定的处理函数或指令的钩子函数。它们提供了一种方便的方式来调整指令的行为，而无需在 JavaScript 代码中编写额外的逻辑。

常见的修饰符

1. .prevent - 阻止默认行为

在事件处理中，.prevent 修饰符用于阻止事件的默认行为。例如，在点击链接时阻止页面跳转：

<a @click.prevent="doSomething">Click me</a>

2. .stop - 阻止事件冒泡

.stop 修饰符用于阻止事件冒泡。在子元素上触发的事件不会继续传播到父元素：

<div @click="divClicked">  
  <button @click.stop="buttonClicked">Click me</button>  
</div>

3. .capture - 使用事件捕获模式

.capture 修饰符告诉 Vue 使用事件捕获模式监听事件，而不是默认的冒泡模式：

<div @click.capture="divClicked">  
  <button @click="buttonClicked">Click me</button>  
</div>

4. .self - 只当在 event.target 是当前元素自身时触发处理函数

.self 修饰符只会触发当前元素上的事件处理函数，如果事件不是从当前元素上直接触发的，则不会调用处理函数：

<div @click.self="divClicked">  
  <button @click="buttonClicked">Click me</button>  
</div>

 5. .once - 事件只触发一次

.once 修饰符确保事件处理函数只执行一次：

<button @click.once="doSomething">Click me</button>

6. .passive - 告诉浏览器你永远不会调用 preventDefault()

.passive 修饰符用于提高滚动事件的性能，特别是在移动端。它告诉浏览器该事件监听器永远不会调用 preventDefault()：

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

7. 自定义指令中的修饰符

除了内置指令如 v-model 和 v-on 之外，你也可以在自定义指令中定义和使用修饰符。在自定义指令的绑定值中，可以通过 binding.modifiers 访问到这些修饰符：

Vue.directive('focus', {  
  // 当被绑定的元素插入到 DOM 中时……  
  inserted: function (el, binding) {  
    // 检查是否存在修饰符  
    if (binding.modifiers.prevent) {  
      el.addEventListener('focus', function (e) {  
        e.preventDefault();  
      }, true);  
    }  
    // 聚焦元素  
    el.focus();  
  }  
});  
  
// 使用修饰符  
<input v-focus.prevent>

这些修饰符极大地提高了 Vue.js 应用的灵活性和表达能力。