Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що робить модифікатор у директиві?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Модифікатор у директиві** - це суфікс після крапки (`.`), який *уточнює або змінює поведінку директиви*. Він не змінює саму директиву, а додає їй додатковий функціонал. Модифікатори є у вбудованих директив (`v-on`, `v-bind`, `v-model`) і можуть бути в **кастомних директивах**. **Ключове:** модифікатор пишеться через крапку після директиви й параметра (`директива:параметр.модифікатор`) і додає директиві уточнену поведінку.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення**Модифікатор у директиві** - це суфікс після крапки (`.`), який *уточнює або змінює поведінку директиви*. Він не змінює саму директиву, а додає їй додатковий функціонал. Модифікатори є у вбудованих директив (`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(); } } }); ```Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.