Текстовые поля

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

Привязка значений

В Petite-Vue используется директива v-model для синхронизации значения текстового поля с реактивным состоянием. Например:

<div v-scope="{ username: '' }">
  <input type="text" v-model="username" placeholder="Введите имя">
  <p>Вы ввели: {{ username }}</p>
</div>
  • v-model="username" связывает поле ввода с переменной username.
  • Любое изменение текста в поле автоматически обновляет username.
  • Любое изменение username в коде автоматически обновляет текстовое поле.

Особенности работы v-model:

  1. Поддержка строковых и числовых значений. Для чисел используется модификатор number:
<input type="text" v-model.number="age" placeholder="Возраст">
  1. Работа с чекбоксами и радиокнопками через ту же директиву:
<input type="checkbox" v-model="isSubscribed">
<input type="radio" value="male" v-model="gender">

Реактивные вычисления с текстовыми полями

Petite-Vue поддерживает вычисляемые свойства через функции внутри объекта v-scope. Это позволяет автоматически обрабатывать текст без необходимости вручную отслеживать изменения.

<div v-scope="{ firstName: '', lastName: '', get fullName() { return `${this.firstName} ${this.lastName}` } }">
  <input type="text" v-model="firstName" placeholder="Имя">
  <input type="text" v-model="lastName" placeholder="Фамилия">
  <p>Полное имя: {{ fullName }}</p>
</div>
  • fullName автоматически обновляется при изменении firstName или lastName.
  • Использование get позволяет создавать реактивные вычисляемые значения без отдельной функции computed.

Обработка событий ввода

Помимо v-model, для текстовых полей доступны стандартные события:

  • @input — срабатывает при любом изменении текста.
  • @change — срабатывает при завершении редактирования (обычно при потере фокуса).
  • @keydown, @keyup, @keypress — обработка нажатий клавиш.

Пример:

<div v-scope="{ message: '' }">
  <input type="text" v-model="message" @input="console.log(message)">
</div>
  • Событие @input позволяет выполнять валидацию или трансформацию текста в реальном времени.

Модификаторы v-model

Petite-Vue поддерживает несколько модификаторов, упрощающих работу с текстовыми полями:

  • .trim — удаляет лишние пробелы по краям:
<input type="text" v-model.trim="username">
  • .number — автоматически преобразует значение в число:
<input type="text" v-model.number="age">
  • .lazy — обновление переменной происходит только при событии change, а не на каждом вводе:
<input type="text" v-model.lazy="message">

Управление фокусом и выделением текста

Фокус и выделение текста можно контролировать через обычные DOM-свойства и методы в сочетании с реактивным состоянием:

<div v-scope="{ inputRef: null }">
  <input type="text" ref="inputRef">
  <button @click="inputRef.focus()">Фокус на поле</button>
</div>
  • ref позволяет получить ссылку на DOM-элемент.
  • Методы focus(), select() и другие стандартные свойства доступны напрямую.

Валидация текстовых полей

В Petite-Vue нет встроенной системы валидации, но её легко реализовать через реактивные переменные:

<div v-scope="{ email: '', isValid: false }">
  <input type="text" v-model="email" @input="isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)">
  <p v-if="!isValid && email.length > 0">Неверный формат email</p>
</div>
  • Валидация выполняется в событии @input.
  • Реактивная переменная isValid позволяет автоматически обновлять состояние интерфейса.

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

Для сложного форматирования можно использовать вычисляемые свойства или слушатели @input:

<div v-scope="{ phone: '' }">
  <input type="text" v-model="phone" @input="phone = phone.replace(/\D/g, '')">
  <p>Телефон: {{ phone }}</p>
</div>
  • Пример удаляет все символы, кроме цифр.
  • Можно добавлять автоматическое форматирование, например (XXX) XXX-XXXX.

Работа с textarea

textarea в Petite-Vue работает так же, как обычный input:

<div v-scope="{ comment: '' }">
  <textarea v-model="comment" rows="5" placeholder="Введите комментарий"></textarea>
  <p>Длина текста: {{ comment.length }}</p>
</div>
  • Двусторонняя привязка v-model сохраняет текст в переменной comment.
  • Реактивные вычисления и события работают идентично input.

Советы по производительности

  1. Использовать .lazy, если требуется минимизировать количество обновлений переменных при быстром наборе текста.
  2. В случаях сложной валидации лучше разделять состояние поля и результат проверки.
  3. Для больших форм рекомендуется группировать поля в объект:
<div v-scope="{ form: { name: '', email: '' } }">
  <input v-model="form.name">
  <input v-model="form.email">
</div>
  • Такой подход упрощает управление формой и передачу данных на сервер.

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

Оглавление