Skip to main content

Що робить модифікатор у директиві?

VueJunior~1 хв читання
Запропонувати правку

Модифікатор у директиві - це суфікс після крапки (.), який уточнює або змінює поведінку директиви. Він не змінює саму директиву, а додає їй додатковий функціонал.

Модифікатори є у вбудованих директив (v-on, v-bind, v-model) і можуть бути у кастомних директивах.

Як виглядає модифікатор?

javascript
v-on:click.prevent v-model.lazy v-bind:class.prop

Модифікатори завжди йдуть після директиви й параметра:

javascript
директива:параметр.модифікатор1.модифікатор2

Приклади модифікаторів у стандартних директивах

v-on (обробники подій)

javascript
<button @click.stop="doSomething">Стоп спливання</button> <button @click.prevent="submit">Скасувати поведінку браузера</button> <button @click.once="init">Спрацює один раз</button>

Основні модифікатори v-on:

  • .stop - викликає event.stopPropagation()
  • .prevent - викликає event.preventDefault()
  • .capture - слухати подію на фазі захоплення
  • .self - спрацює лише якщо клік саме по елементу
  • .once - обробник лише один раз
  • .passive - passive: true для продуктивності

v-model

javascript
<input v-model.lazy="name">

Модифікатори:

  • .lazy - оновлювати значення не на input, а на change
  • .trim - автоматично обрізати пробіли
  • .number - приводити до числа

v-bind

javascript
<div :class.prop="myClasses"></div>
  • .prop - прив'язати як DOM-властивість, а не як атрибут
  • .camel - перетворити ім'я атрибута на camelCase

Модифікатори в кастомних директивах

Ти можеш використовувати модифікатори і сам:

javascript
<div v-focus.delay="300"></div>

Всередині директиви їх можна прочитати:

javascript
app.directive('focus', { mounted(el, binding) { if (binding.modifiers.delay) { setTimeout(() => el.focus(), binding.value || 0); } else { el.focus(); } } });

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Запропонувати правку