Vue 指令修饰符

指令修饰符是添加到指令后面的后缀，用于修改指令的行为。Vue 中提供了多种指令修饰符，它们可以用来满足不同的需求。

常见的 Vue 指令修饰符

.lazy： 延迟执行指令，直到元素被添加到 DOM 中。

.sync： 将指令绑定的数据双向绑定到一个属性，该属性可以被父组件访问。

.once： 指令只执行一次，在组件初始化时执行。

.memo： 缓存指令的计算结果，防止重复计算。

.prevent： 在元素上触发事件时阻止默认行为。

.stop： 在元素上触发事件时阻止事件冒泡。

.capture： 在捕获阶段侦听事件，而不是冒泡阶段。

.self： 仅在指令作用的元素上触发事件，忽略子元素。

.left： 指令只对鼠标左键点击触发。

.middle： 指令只对鼠标中键点击触发。

.right： 指令只对鼠标右键点击触发。

使用指令修饰符

指令修饰符添加到指令名称之后，并用句点分隔。例如：

<code class="html"><button v-on:click.prevent>按钮</button></code>

在这个示例中， 修饰符告诉 Vue 在元素上触发 click 事件时阻止默认行为。

扩展用法

除了这些常见的修饰符外，Vue 还允许创建自定义指令修饰符。这提供了灵活性，可以根据需要微调指令的行为。