Директивы

Директивы — это особые атрибуты, которые в Petite-Vue используют для связывания DOM-элементов с функциональностью данных. Они позволяют добавлять реактивное поведение к элементам интерфейса, встраивать логику в разметку и облегчать работу с изменяющимися данными без необходимости использования сложных JavaScript-функций.

Основные директивы

v-bind

Директива v-bind используется для динамического связывания атрибутов HTML с данными из состояния компонента. Она автоматически обновляет атрибуты элементов при изменении данных.

Пример использования:

<div v-bind:class="className"></div>

В данном примере класс элемента будет автоматически обновляться, когда значение переменной className изменится. Поддерживаются любые атрибуты, включая href, src, style, а также собственные атрибуты компонентов.

v-model

v-model предоставляет двустороннюю привязку данных. Это означает, что данные, привязанные к форме (например, к текстовому полю или переключателю), будут автоматически синхронизироваться с состоянием компонента.

Пример:

<input v-model="message" />
<p>Текущее сообщение: {{ message }}</p>

В этом случае, значение переменной message будет синхронизироваться с содержимым текстового поля, а любые изменения в поле автоматически отобразятся в интерфейсе.

v-for

Директива v-for используется для итерации по массивам или объектам. Она позволяет динамически генерировать элементы на основе данных.

Пример:

<ul>
  <li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>

Каждый элемент в массиве items будет отображаться в виде списка. Важно использовать атрибут key, чтобы улучшить производительность и избежать ошибок при обновлении DOM.

v-if / v-else / v-else-if

Директивы v-if, v-else-if и v-else позволяют условно отображать элементы на основе логических выражений. Эти директивы идеально подходят для отображения различных частей интерфейса в зависимости от состояния приложения.

Пример:

<div v-if="isVisible">Элемент видим</div>
<div v-else>Элемент скрыт</div>

Когда значение переменной isVisible истинно, отображается первый блок, в противном случае — второй.

v-show

v-show работает схоже с v-if, но вместо удаления элемента из DOM, она просто меняет его CSS-свойство display. Это делает v-show более подходящим для часто меняющихся элементов, так как не требует повторного рендеринга.

Пример:

<div v-show="isVisible">Этот элемент виден только если isVisible истинно</div>

Модификаторы

Модификаторы используются для изменения поведения директив. Это суффиксы, добавляемые к директивам, чтобы уточнить их работу.

Модификатор .once

Модификатор .once используется для того, чтобы событие или привязка данных выполнялись только один раз. После того как действие или событие было выполнено, оно больше не будет срабатывать.

Пример:

<button v-on:click.once="doSomething">Нажми один раз</button>

Модификатор .prevent

Модификатор .prevent позволяет отменить стандартное поведение события, например, предотвратить отправку формы.

Пример:

<form v-on:submit.prevent="submitForm">Отправить</form>

В данном случае форма не будет отправлена, пока не будет выполнена логика, определенная в методе submitForm.

Модификатор .stop

Модификатор .stop позволяет остановить дальнейшее распространение события. Он используется для предотвращения того, чтобы событие всплывало в DOM или вызывало другие обработчики на родительских элементах.

Пример:

<button v-on:click.stop="handleClick">Клик</button>

Этот пример предотвратит всплытие события click на родительских элементах.

Модификатор .lazy

Модификатор .lazy используется для того, чтобы привязка данных происходила не сразу, а только после того как элемент теряет фокус или завершится ввод. Это особенно полезно для форм, чтобы избежать частых обновлений состояния при каждом вводе символа.

Пример:

<input v-model.lazy="message" />

Пользовательские директивы

В Petite-Vue можно создавать собственные директивы, чтобы добавлять функциональность, которая не предусмотрена в стандартном наборе.

Пример создания пользовательской директивы:

const app = PetiteVue.createApp({
  data() {
    return {
      color: 'red'
    };
  }
});

app.directive('color', (el, binding) => {
  el.style.color = binding.value;
});

app.mount('#app');

В данном примере создается директива v-color, которая изменяет цвет текста элемента в зависимости от переданного значения. Эта директива может быть использована в шаблоне следующим образом:

<div v-color="color">Текст будет красным</div>

Комбинирование директив

Директивы могут быть комбинированы друг с другом, что позволяет создавать более сложные и функциональные элементы.

Пример:

<button v-bind:disabled="isDisabled" v-on:click="doSomething">Кнопка</button>

Здесь директива v-bind:disabled управляет состоянием кнопки, а v-on:click обрабатывает клик. Эти директивы работают независимо друг от друга и могут быть использованы совместно для реализации сложных логик.

Заключение

Директивы в Petite-Vue предоставляют мощный и гибкий способ работы с DOM и состоянием приложения. Они позволяют связывать данные с интерфейсом, а также добавлять различные логические условия и реакции на изменения данных. Благодаря директивам можно создавать удобный и гибкий интерфейс без необходимости в написании лишнего кода.

Оглавление