什么是Vue.js的指令修饰符？如何使用修饰符？

Vue.js 的指令修饰符是以 . 指定的特殊后缀,用于指令的特殊行为。通常用于 .prevent、.stop、.self、.once等。

使用修饰符的好处:

1. 可以避免在指令中使用过度复杂的 JavaScript 逻辑。
2. 提高模板的可读性。

常用的修饰符有:

1. .prevent:调用 event.preventDefault() 阻止默认事件。

html
<form v-on:submit.prevent="onSubmit"></form>

2. .stop:调用 event.stopPropagation() 阻止事件冒泡。

html
<div v-on:click="doThis">
  <button v-on:click.stop="doThat"></button>
</div> 

3. .self:只有 event.target 是当前元素自身时才触发处理函数。

html 
<div v-on:click.self="doThat">...</div>

4. .once:只触发一次处理函数。

html
<button v-on:click.once="doThis"></button>

5. .native:监听组件根元素的原生事件。

html
<my-component v-on:click.native="doTheNativeClick"></my-component>  

6. .passive:告诉浏览器你不想阻止默认行为。

html
<!-- 滚动事件的默认行为是滚动,我们不想阻止这个默认行为 -->
<div v-on:scroll.passive="onScroll">...</div>

7. 自定义修饰符:
   在组件中定义,然后使用在元素中:

js
directives: {
  'scroll': {
    inserted: function (el, binding) {
      el.addEventListener('scroll', binding.value)
    }
  }  
}

<div v-scroll="onScroll">...</div> 

以上是 Vue.js 中常用的修饰符,可以让我们在模板中简洁地表达复杂的逻辑。