<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><linkrel="stylesheet"href="styles.css"><title>Продажа авиабилетов</title></head><body><header><h1>Путешествуй по всему миру с нами!</h1><nav>&…
Самый страшный заказчик для дизайнера — он сам. Недостижимая планка качества, раздувающийся скоуп работ и отсутствие дедлайнов — это всё симптомы собственного творческого проекта.
Я Никита Колюгин, дизайнер в продуктах с миллионами пользователей. Помогаю дизайнерам расти в своем телеграм-канале.
Валидация форм является важной частью фронтенд-разработки, которая помогает улучшить пользовательский опыт и предотвратить ошибки при отправке данных на сервер. В этой статье мы рассмотрим, как использовать библиотеку AJV совместно с Vue.js и TypeScript для создания мощной системы валидации формы.
Проведение опросов, викторин и других игровых обучающих активностей среди сотрудников является частью корпоративной культуры многих компаний.
При этом по ряду причин использование существующих веб приложений бывает затруднительным, либо невозможным. В связи с чем, задача разработки собственной легковесной, адаптируемой и расширяемой платформ…
Основываясь на описанной структуре, для примера создам компонент, который приветствует пользователя по имени, в том числе позволяет нажатием кнопки поприветствовать Vue в ответ. Но прежде отмечу, что одним из плюсов Vue. js является возможность при разработке отталкиваться как от шаблона приложения, так и от работы с данными. А поскольку в моем примере шаблон носит условный характер, буду следовать второму пути.
Создание компонента начинается с определения входных свойств, которые должны быть переданы извне. В моем случае – это имя пользователя customName, которое ожидается в качестве значения в атрибуте props. Также в качестве внутренней переменной объявляю и устанавливаю значение по умолчанию defaultName, на случай, если никаких свойств в props передано не будет.
Исходя из этого, мне следует определить, было ли фактически передано значение customName и, если нет – подменить ожидаемое дефолтным. Это возможно сделать с помощью специального метода created(), который автоматически вызывается после создания экземпляра компонента. Created относится к одному из хуков жизненного цикла компонентов, о которых подробнее можно узнать в официальной документации (https://vuejs. org/guide/essentials/lifecycle. html).
Наконец, остается лишь указать где в шаблоне полученные данные будут отображаться и как вызываться функция. Соответствующую разметку прописываю в блоке template:
Как говорил ранее, главная особенность компонентов – это их переиспользуемость. Это означает, что я могу импортировать полученный компонент в родительский и вызывать его многократно. Привожу ниже код родительского компонента Parent. vue:
Здесь вызывается три экземпляра дочернего компонента Component. vue, причем каждый экземпляр является самостоятельным и не зависит от других. Это, в свою очередь, позволяет вызывать их с собственными атрибутами. Например, первый вызывается без передачи атрибутов, что должно привести к замене имени пользователя дефолтным значением. Во второй экземпляр я передаю строку с именем пользователя, а в третий – переменную newName с заранее заданным значением. Таким образом, на странице отобразятся все три экземпляра с разным приветствием, а при нажатии на каждую из кнопок произойдет независимый от остальных ответ.
Реактивность в Vue. js — это механизм, который автоматически обновляет представление компонентов при изменении данных, от которых они зависят. Реактивные свойства реализованы с помощью автоматического метода Vue. observable() . При вызове в него передается объект, который нужно сделать реактивным. В результате получается новый объект, который содержит все свойства и методы оригинального объекта, но с возможностью отслеживания изменений. Когда свойство реактивного объекта изменяется, Vue. js автоматически обновляет все зависимые свойства, в том числе обновляет пользовательский интерфейс.
Для работы с реактивными свойствами Vue. js предоставляет ряд атрибутов, методов и директив, такие как watch, computed, v-model и другие. Метод watch, например, позволяет отслеживать изменения конкретного свойства данных и выполнять определенные действия при их изменении. Computed свойства позволяют вычислять значения на основе данных и обновляться только при изменении зависимых свойств. Директива v-model позволяет связать данные с элементом формы, таким как input, select или textarea. При изменении значения элемента, данные автоматически обновляются, а при изменении данных — обновляется значение элемента формы.
Ниже приведен пример использования директивы v-model, которая связывает новый элемент input, в написанном ранее компоненте, с переменной enteredName. В результате, при вводе имени в поле input автоматически последует изменение приветствия, что является наглядным примером реактивности Vue. js.
Подводя итог отмечу, что благодаря своей реактивности и компонентной структуре Vue. js предоставляет практически безграничные возможности создания интерактивных интерфейсов, тем самым помогая решать самый широкий спектр корпоративных задач с помощью легких адаптируемых веб-приложений. Грамотное использование компонентов помогает существенно сократить время разработки, а также упростить дальнейшее сопровождение кода. Тогда как реактивные свойства обеспечивают динамику и отзывчивость, что, в конечном итоге, создает удобство и позитивный опыт использования приложения для конечных пользователей.
"}}],"summaryContent":null,"isExistSummaryContent":false,"warningFromEditor":null,"warningFromEditorTitle":null,"counters":{"comments":0,"favorites":3,"reposts":0,"views":1240,"hits":512,"reads":null,"online":0},"dateFavorite":0,"hitsCount":512,"isCommentsEnabled":true,"isLikesEnabled":true,"isRemovedByUserRequest":false,"isFavorited":false,"isPinned":false,"repostId":null,"repostData":null,"subscribedToTreads":false,"isEditorial":false,"isAudioAvailable":false,"audioUrl":null,"isAudioAvailableToGenerate":false,"commentEditor":{"enabled":true,"who":null,"text":"","until":null,"reason":null,"type":"everybody"},"isBlur":false,"isPublished":true,"isDisabledAd":false,"withheld":[],"ogTitle":null,"ogDescription":null,"url":"https://vc.ru/id2075784/806999-vuejs-sozdaem-dinamicheskii-interfeis","author":{"id":2075784,"name":"Sergey Zhuravlev","nickname":null,"description":null,"uri":"","avatar":{"type":"image","data":{"uuid":"e04c02c7-f3c9-568d-9ceb-57ee8443ee6c","width":1200,"height":797,"size":375070,"type":"jpg","color":"3f3835","hash":"","external_service":[]}},"cover":null,"achievements":[{"title":"Год на vc.ru","code":"registration_1_year","description":"Первый год с vc.ru. Получена 24 июля 2025.","previewUuid":"0d11c244-49de-50e7-894e-b9b27945d42b","formats":{"glb":"https://static.vc.ru/achievements/fish.glb","usdz":"https://static.vc.ru/achievements/fish.usdz"},"viewData":{"contentColor":"#C67AA3","textMaxWidth":0.634765625,"textX":0.5888671875,"textY":0.54296875,"logoX":0.5859375,"logoY":0.6669921875,"logoXNoText":0.6044921875,"logoYNoText":0.5439453125},"id":3385880,"userId":2075784,"count":0,"shareImage":"https://api.vc.ru/achievements/share/3385880"}],"lastModificationDate":1764924296,"isSubscribed":false,"isSubscribedToNewPosts":false,"isMuted":false,"isAvailableForMessenger":true,"badgeId":null,"isDonationsEnabled":false,"isPlusGiftEnabled":true,"isUnverifiedBlogForCompanyWithoutPro":false,"isRemovedByUserRequest":false,"isFrozen":false,"isDisabledAd":false,"isPlus":false,"isVerified":false,"isPro":false,"yandexMetricaId":null,"badge":null,"isOnline":false,"tgChannelShortname":null,"isUnsubscribable":true,"type":1,"subtype":"personal_blog"},"subsite":{"id":2075784,"name":"Sergey Zhuravlev","nickname":null,"description":null,"uri":"","avatar":{"type":"image","data":{"uuid":"e04c02c7-f3c9-568d-9ceb-57ee8443ee6c","width":1200,"height":797,"size":375070,"type":"jpg","color":"3f3835","hash":"","external_service":[]}},"cover":null,"achievements":[{"title":"Год на vc.ru","code":"registration_1_year","description":"Первый год с vc.ru. Получена 24 июля 2025.","previewUuid":"0d11c244-49de-50e7-894e-b9b27945d42b","formats":{"glb":"https://static.vc.ru/achievements/fish.glb","usdz":"https://static.vc.ru/achievements/fish.usdz"},"viewData":{"contentColor":"#C67AA3","textMaxWidth":0.634765625,"textX":0.5888671875,"textY":0.54296875,"logoX":0.5859375,"logoY":0.6669921875,"logoXNoText":0.6044921875,"logoYNoText":0.5439453125},"id":3385880,"userId":2075784,"count":0,"shareImage":"https://api.vc.ru/achievements/share/3385880"}],"lastModificationDate":1764924296,"isSubscribed":false,"isSubscribedToNewPosts":false,"isMuted":false,"isAvailableForMessenger":true,"badgeId":null,"isDonationsEnabled":false,"isPlusGiftEnabled":true,"isUnverifiedBlogForCompanyWithoutPro":false,"isRemovedByUserRequest":false,"isFrozen":false,"isDisabledAd":false,"isPlus":false,"isVerified":false,"isPro":false,"yandexMetricaId":null,"badge":null,"isOnline":false,"tgChannelShortname":null,"isUnsubscribable":true,"type":1,"subtype":"personal_blog"},"reactions":{"counters":[{"id":1,"count":3}],"reactionId":0},"isNews":false,"source":null,"clusters":[],"donations":{"amount":0,"isDonated":false},"commentsSeenCount":null}},{"type":"entry","data":{"id":782333,"customUri":null,"subsiteId":2171673,"title":"Валидация формы с помощью AJV, Vue.js и TypeScript","date":1691063041,"dateModified":1691063041,"blocks":[{"type":"text","cover":true,"hidden":false,"anchor":"","data":{"text":"
Валидация форм является важной частью фронтенд-разработки, которая помогает улучшить пользовательский опыт и предотвратить ошибки при отправке данных на сервер. В этой статье мы рассмотрим, как использовать библиотеку AJV совместно с Vue.js и TypeScript для создания мощной системы валидации формы.
"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Что такое AJV?"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"
AJV (Another JSON Schema Validator) - это быстрая библиотека валидации данных в формате JSON с поддержкой JSON Schema. JSON Schema - это язык описания структуры и валидации данных в формате JSON. AJV позволяет проверять данные по подготовленным схемам валидации.
В этой схеме мы определяем тип каждого поля (строка), а также устанавливаем некоторые правила валидации, такие как формат email и минимальная длина пароля. Поля \"login\" и \"password\" обязательны для заполнения.
"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Давайте кратко пройдёмся по 2 важным методам:"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"
onLogin — это метод, который вызывается при попытке входа пользователя в систему (логине). Он выполняет проверку и валидацию введенных пользователем данных и предпринимает соответствующие действия в зависимости от результата проверки.
Проверка введенных данных на корректность с помощью функции валидации validate. Эта функция использует схему валидации данных и проверяет соответствие данных этой схеме. Возвращается флаг isValid, который указывает, прошла ли валидация успешно.
","
Если данные некорректны (isValid равен false), выполняется обработка ошибок.
"],"type":"UL"}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":"function onLogin() {\n errors.value.clear();\n if (validator.validate(\"/login.json\", formData.value)) {\n // valid, do nothing\n } else if (validator.errors?.length) {\n for (const [, e] of validator.errors.entries()) {\n if (!e.message) {\n continue;\n }\n const fieldName = e.instancePath.substring(1);\n const fieldErrors: string[] = errors.value.get(fieldName) || [];\n fieldErrors.push(e.message);\n errors.value.set(fieldName, fieldErrors);\n }\n }\n }","lang":""}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"
onBlur — это метод, который вызывается при событии \"blur\" (потеря фокуса) на текстовом поле ввода формы. Он используется для валидации данных, введенных пользователем, когда пользователь переходит с поля на другой элемент формы или щелкает вне текстового поля.
Теперь у вас есть пример, как использовать AJV с Vue.js и TypeScript для валидации формы. Это позволяет создавать мощные и гибкие системы валидации, которые помогут улучшить пользовательский опыт и обеспечить корректную обработку данных на сервере.
"}}],"summaryContent":null,"isExistSummaryContent":false,"warningFromEditor":null,"warningFromEditorTitle":null,"counters":{"comments":2,"favorites":4,"reposts":0,"views":576,"hits":1000,"reads":null,"online":0},"dateFavorite":0,"hitsCount":1000,"isCommentsEnabled":true,"isLikesEnabled":true,"isRemovedByUserRequest":false,"isFavorited":false,"isPinned":false,"repostId":null,"repostData":null,"subscribedToTreads":false,"isEditorial":false,"isAudioAvailable":false,"audioUrl":null,"isAudioAvailableToGenerate":false,"commentEditor":{"enabled":true,"who":null,"text":"","until":null,"reason":null,"type":"everybody"},"isBlur":false,"isPublished":true,"isDisabledAd":false,"withheld":[],"ogTitle":null,"ogDescription":null,"url":"https://vc.ru/id2171673/782333-validaciya-formy-s-pomoshyu-ajv-vuejs-i-typescript","author":{"id":2171673,"name":"Глеб","nickname":null,"description":null,"uri":"","avatar":{"type":"image","data":{"uuid":"c47fed1f-4644-5868-9229-c5de72d3e1e6","width":960,"height":1280,"size":131778,"type":"jpg","color":"cbc9cb","hash":"","external_service":[],"base64preview":"/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAQDAwQDAwQEAwQFBAQFBgoHBgYGBg0JCggKDw0QEA8NDw4RExgUERIXEg4PFRwVFxkZGxsbEBQdHx0aHxgaGxr/2wBDAQQFBQYFBgwHBwwaEQ8RGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhr/wAARCAAKAAoDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAABwYI/8QAHxAAAgICAwADAAAAAAAAAAAAAQIDBAURAAchBkFR/8QAFQEBAQAAAAAAAAAAAAAAAAAABAX/xAAYEQADAQEAAAAAAAAAAAAAAAAAARECMf/aAAwDAQACEQMRAD8AmexuvVzvy/sbL3a9k2arRHGxoBqwxQBvD6wGvr94PpiCEUPRUMANgxnw80dkbEzZjNFpZCRdlGyx4gYrD46XF0pJaFWSR4I2ZmgUkkqNknXKCxFaE2+H/9k="}},"cover":null,"achievements":[{"title":"Год на vc.ru","code":"registration_1_year","description":"Первый год с vc.ru. Получена 24 июля 2025.","previewUuid":"0d11c244-49de-50e7-894e-b9b27945d42b","formats":{"glb":"https://static.vc.ru/achievements/fish.glb","usdz":"https://static.vc.ru/achievements/fish.usdz"},"viewData":{"contentColor":"#C67AA3","textMaxWidth":0.634765625,"textX":0.5888671875,"textY":0.54296875,"logoX":0.5859375,"logoY":0.6669921875,"logoXNoText":0.6044921875,"logoYNoText":0.5439453125},"id":3291565,"userId":2171673,"count":0,"shareImage":"https://api.vc.ru/achievements/share/3291565"}],"lastModificationDate":1764924296,"isSubscribed":false,"isSubscribedToNewPosts":false,"isMuted":false,"isAvailableForMessenger":true,"badgeId":null,"isDonationsEnabled":false,"isPlusGiftEnabled":true,"isUnverifiedBlogForCompanyWithoutPro":false,"isRemovedByUserRequest":false,"isFrozen":false,"isDisabledAd":false,"isPlus":false,"isVerified":false,"isPro":false,"yandexMetricaId":null,"badge":null,"isOnline":false,"tgChannelShortname":null,"isUnsubscribable":true,"type":1,"subtype":"personal_blog"},"subsite":{"id":2171673,"name":"Глеб","nickname":null,"description":null,"uri":"","avatar":{"type":"image","data":{"uuid":"c47fed1f-4644-5868-9229-c5de72d3e1e6","width":960,"height":1280,"size":131778,"type":"jpg","color":"cbc9cb","hash":"","external_service":[],"base64preview":"/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAQDAwQDAwQEAwQFBAQFBgoHBgYGBg0JCggKDw0QEA8NDw4RExgUERIXEg4PFRwVFxkZGxsbEBQdHx0aHxgaGxr/2wBDAQQFBQYFBgwHBwwaEQ8RGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhr/wAARCAAKAAoDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAABwYI/8QAHxAAAgICAwADAAAAAAAAAAAAAQIDBAURAAchBkFR/8QAFQEBAQAAAAAAAAAAAAAAAAAABAX/xAAYEQADAQEAAAAAAAAAAAAAAAAAARECMf/aAAwDAQACEQMRAD8AmexuvVzvy/sbL3a9k2arRHGxoBqwxQBvD6wGvr94PpiCEUPRUMANgxnw80dkbEzZjNFpZCRdlGyx4gYrD46XF0pJaFWSR4I2ZmgUkkqNknXKCxFaE2+H/9k="}},"cover":null,"achievements":[{"title":"Год на vc.ru","code":"registration_1_year","description":"Первый год с vc.ru. Получена 24 июля 2025.","previewUuid":"0d11c244-49de-50e7-894e-b9b27945d42b","formats":{"glb":"https://static.vc.ru/achievements/fish.glb","usdz":"https://static.vc.ru/achievements/fish.usdz"},"viewData":{"contentColor":"#C67AA3","textMaxWidth":0.634765625,"textX":0.5888671875,"textY":0.54296875,"logoX":0.5859375,"logoY":0.6669921875,"logoXNoText":0.6044921875,"logoYNoText":0.5439453125},"id":3291565,"userId":2171673,"count":0,"shareImage":"https://api.vc.ru/achievements/share/3291565"}],"lastModificationDate":1764924296,"isSubscribed":false,"isSubscribedToNewPosts":false,"isMuted":false,"isAvailableForMessenger":true,"badgeId":null,"isDonationsEnabled":false,"isPlusGiftEnabled":true,"isUnverifiedBlogForCompanyWithoutPro":false,"isRemovedByUserRequest":false,"isFrozen":false,"isDisabledAd":false,"isPlus":false,"isVerified":false,"isPro":false,"yandexMetricaId":null,"badge":null,"isOnline":false,"tgChannelShortname":null,"isUnsubscribable":true,"type":1,"subtype":"personal_blog"},"reactions":{"counters":[{"id":1,"count":2}],"reactionId":0},"isNews":false,"source":null,"clusters":[],"donations":{"amount":0,"isDonated":false},"commentsSeenCount":null}},{"type":"entry","data":{"id":765510,"customUri":null,"subsiteId":447345,"title":"Vue.js. Создание динамических пользовательских интерфейсов с помощью компонентов и реактивных свойств","date":1690268611,"dateModified":1690268611,"blocks":[{"type":"text","cover":true,"hidden":false,"anchor":"","data":{"text":"
Проведение опросов, викторин и других игровых обучающих активностей среди сотрудников является частью корпоративной культуры многих компаний.
При этом по ряду причин использование существующих веб приложений бывает затруднительным, либо невозможным. В связи с чем, задача разработки собственной легковесной, адаптируемой и расширяемой платформы игровых активностей с динамическими пользовательскими интерфейсами (DUI) является актуальной. Отмечу, что DUI плотно вошли в практику современной веб-разработки. Зачастую, без них невозможно представить себе реализацию ключевого функционала приложения, поскольку они предоставляют значительную гибкость и интерактивность.
Но прежде чем перейти к основной теме публикации, сделаю короткое отступление на причины выбора именно Vue.js в конкуренции с самым популярным на текущий момент React. Если не углубляться в технологии, то главное преимущество Vue.js - его простая и понятная структура, упрощающая использование данного фреймворка при так называемой фулл-стек разработке. Разделение логики и функционала компонентов от основной html-разметки, позволяют быстрее и в наиболее полной мере погружаться в разработку специалистам разного профиля, что, в конечном итоге, позволяет экономить трудовые и временные ресурсы при разработке небольших приложений, не требующих вовлечение большой команды с узким разделением ролей.
В этом отношении, React, например, имеет несколько иной подход, при котором синтаксис html «растворяется» в JavaScript коде, расширяясь в вариацию языка JSX. Что, в конечном итоге, требует более узкой специализации от разработчиков и более сложного взаимодействия между участниками.
Тем не менее, важно понимать, что выбор фреймворка среди «большой тройки» React, Angular, Vue.js, часто является делом вкуса, поскольку все они позволяют реализовывать требуемый функционал в полной мере. И сложно представить себе задачу, которую можно решить только на React, но не получится на Vue.js и наоборот. А, учитывая вышесказанное, для написания своего приложения окончательный выбор пал на Vue.js.
И прежде чем приступать к созданию приложения с DUI на основе Vue.js необходимо понимать суть и структуру его компонентов, а также что такое реактивные свойства и как они работают.
Компоненты являются важной частью разработки пользовательского интерфейса. Они позволяют разработчикам создавать приложения эффективнее, уменьшая время и затраты на разработку за счет переиспользования кода, что уменьшает время на написание, отладку и выявление ошибок.
Компоненты могут быть созданы для любых элементов интерфейса, таких как кнопки, поля ввода, меню и т.д. Каждый компонент может содержать свои собственные CSS-стили, JavaScript и HTML-разметку. Это позволяет разработчикам легко настраивать и изменять каждый компонент в соответствии с требованиями проекта.
Основываясь на описанной структуре, для примера создам компонент, который приветствует пользователя по имени, в том числе позволяет нажатием кнопки поприветствовать Vue в ответ. Но прежде отмечу, что одним из плюсов Vue.js является возможность при разработке отталкиваться как от шаблона приложения, так и от работы с данными. А поскольку в моем примере шаблон носит условный характер, буду следовать второму пути.
Создание компонента начинается с определения входных свойств, которые должны быть переданы извне. В моем случае – это имя пользователя customName, которое ожидается в качестве значения в атрибуте props. Также в качестве внутренней переменной объявляю и устанавливаю значение по умолчанию defaultName, на случай, если никаких свойств в props передано не будет.
Исходя из этого, мне следует определить, было ли фактически передано значение customName и, если нет – подменить ожидаемое дефолтным. Это возможно сделать с помощью специального метода created(), который автоматически вызывается после создания экземпляра компонента. Created относится к одному из хуков жизненного цикла компонентов, о которых подробнее можно узнать в официальной документации (https://vuejs.org/guide/essentials/lifecycle.html).
Наконец, остается лишь указать где в шаблоне полученные данные будут отображаться и как вызываться функция. Соответствующую разметку прописываю в блоке template:
Как говорил ранее, главная особенность компонентов – это их переиспользуемость. Это означает, что я могу импортировать полученный компонент в родительский и вызывать его многократно. Привожу ниже код родительского компонента Parent.vue:
Здесь вызывается три экземпляра дочернего компонента Component.vue, причем каждый экземпляр является самостоятельным и не зависит от других. Это, в свою очередь, позволяет вызывать их с собственными атрибутами. Например, первый вызывается без передачи атрибутов, что должно привести к замене имени пользователя дефолтным значением. Во второй экземпляр я передаю строку с именем пользователя, а в третий – переменную newName с заранее заданным значением. Таким образом, на странице отобразятся все три экземпляра с разным приветствием, а при нажатии на каждую из кнопок произойдет независимый от остальных ответ.
Реактивность в Vue.js - это механизм, который автоматически обновляет представление компонентов при изменении данных, от которых они зависят. Реактивные свойства реализованы с помощью автоматического метода Vue.observable(). При вызове в него передается объект, который нужно сделать реактивным. В результате получается новый объект, который содержит все свойства и методы оригинального объекта, но с возможностью отслеживания изменений. Когда свойство реактивного объекта изменяется, Vue.js автоматически обновляет все зависимые свойства, в том числе обновляет пользовательский интерфейс.
Для работы с реактивными свойствами Vue.js предоставляет ряд атрибутов, методов и директив, такие как watch, computed, v-model и другие. Метод watch, например, позволяет отслеживать изменения конкретного свойства данных и выполнять определенные действия при их изменении. Computed свойства позволяют вычислять значения на основе данных и обновляться только при изменении зависимых свойств. Директива v-model позволяет связать данные с элементом формы, таким как input, select или textarea. При изменении значения элемента, данные автоматически обновляются, а при изменении данных - обновляется значение элемента формы.
Ниже приведен пример использования директивы v-model, которая связывает новый элемент input, в написанном ранее компоненте, с переменной enteredName. В результате, при вводе имени в поле input автоматически последует изменение приветствия, что является наглядным примером реактивности Vue.js.
Разобравшись с основными принципами построения компонентов, предлагаю рассмотреть реализацию практической задачи: динамического интерфейса корпоративной викторины. Согласно заданию, мне требуется отобразить блоки с вопросом и вариантами ответов, дождаться ответа пользователя, выделить цветом верный и неверный варианты, и, в зависимости от текущего статуса игры, скрыть или сделать неактивными часть полей и кнопок, и др.
Все они являются дочерними для основного родительского. Предполагается, что родительский компонент будет отправлять запросы на сервер, получать данные викторины и распределять эти данные между соответствующими дочерними компонентами.
Итак, компоненты Title и Main реализуют в себе наиболее простой и базовый функционал, рассмотренный мной в примерах выше: в качестве динамических данных Title.vue получает номер вопроса и общее количество вопросов в викторине, показывая пользователю на каком этапе игры он находится. Тогда как в Main.vue из родительского компонента передается и отображается текст задания.
Чуть интереснее с точки динамичности компонент Info.vue. Он также получает свойства из родительского, однако в зависимости от их значения ведет себя по-разному. Первоначально ожидается, что компонент не виден пользователю до выбора варианта ответа. А затем он должен не только проинформировать о правильности ответа, но и применить к своему содержимому разный цветовой стиль. Это достигается использованием системы директив <v-if> <v-else>, и присвоением элементу <div> разного дополнительного класса в зависимости от значения переменной <is_right>.
Аналогичный подход я использую в компоненте Next.vue, с той лишь разницей, что кнопка «Далее» должна быть неактивной до выбора варианта ответа, чтобы не позволить пользователю пропустить вопрос, а затем так же как и Info.vue менять стиль и содержимое при разных сценариях:
Стоит обратить внимание, что компонент Next.vue не только принимает данные из родительского компонента, но и передает событие и данные (в нашем случае пустой объект) обратно в родительский с помощью такой конструкции:
Здесь метод getNext() создает одноименное событие, которое будет отслеживаться в родительском компоненте. Таким образом, при его срабатывании родительский компонент получит данные переданного в событии массива, что позволит благодаря реактивным свойствам выполнить последующие действия. В моем случае, при нажатии кнопки «Далее» в дочернем компоненте, отправляется запрос на получение нового задания в родительском. Более широко это используется в компоненте Button.vue:
В Button.vue используются практически все вышеперечисленные методы и директивы. Из наиболее интересного здесь, как по директиве v-on:click, запускается метод answered(), который отправляет на сервер служебную информацию, а затем возвращает в родительский компонент событие с массивом данных о том, какой из вариантов был выбран и был ли этот вариант правильным. Что важно, на основе этих данных родительский компонент реактивно меняет значения, которые передаются во все экземпляры текущего и в другие компоненты, заставляя их динамически реагировать. Т.е. происходит своеобразный цикл: из родительского компонента в дочерние передается значение, в одном из дочерних оно изменяется, возвращается в родительский, из которого уже в измененном виде снова передается в дочерние, меняя их свойства.
Благодаря этому, в моем приложении при клике на один из вариантов ответа, родительский компонент не только заставляет перекраситься ошибочному варианту в красный цвет, но и сообщает экземпляру Button.vue с верным вариантом подсветиться зеленым. В то же время, на основе этих данных меняется отображение и цвет компонента Info.vue с полем верно/неверно. Наконец, кнопка «Далее» в компоненте Next.vue меняет стиль и становится активной для запроса следующего задания. Т.е. динамически изменяются практически все элементы интерфейса.
Подводя итог отмечу, что благодаря своей реактивности и компонентной структуре Vue.js предоставляет практически безграничные возможности создания интерактивных интерфейсов, тем самым помогая решать самый широкий спектр корпоративных задач с помощью легких адаптируемых веб-приложений. Грамотное использование компонентов помогает существенно сократить время разработки, а также упростить дальнейшее сопровождение кода. Тогда как реактивные свойства обеспечивают динамику и отзывчивость, что, в конечном итоге, создает удобство и позитивный опыт использования приложения для конечных пользователей.
"}}],"summaryContent":null,"isExistSummaryContent":false,"warningFromEditor":null,"warningFromEditorTitle":null,"counters":{"comments":0,"favorites":0,"reposts":0,"views":672,"hits":11327,"reads":null,"online":0},"dateFavorite":0,"hitsCount":11327,"isCommentsEnabled":true,"isLikesEnabled":true,"isRemovedByUserRequest":false,"isFavorited":false,"isPinned":false,"repostId":null,"repostData":null,"subscribedToTreads":false,"isEditorial":false,"isAudioAvailable":false,"audioUrl":null,"isAudioAvailableToGenerate":false,"commentEditor":{"enabled":true,"who":null,"text":"","until":null,"reason":null,"type":"everybody"},"isBlur":false,"isPublished":true,"isDisabledAd":false,"withheld":[],"ogTitle":null,"ogDescription":null,"url":"https://vc.ru/id447345/765510-vuejs-sozdanie-dinamicheskih-polzovatelskih-interfeisov-s-pomoshyu-komponentov-i-reaktivnyh-svoistv","author":{"id":447345,"name":"NTA","nickname":null,"description":null,"uri":"","avatar":{"type":"image","data":{"uuid":"e7175678-aaab-09f8-0271-7b3af7ac4670","width":1207,"height":1207,"size":83090,"type":"jpg","color":"e3ebf8","hash":"","external_service":[]}},"cover":{"cover":{"type":"image","data":{"uuid":"8575b55d-a1f0-53ee-9ad6-78268f9ea45c","width":1280,"height":373,"size":56005,"type":"jpg","color":"b0b9ca","hash":"","external_service":[]}},"cover_y":0},"achievements":[{"title":"Год на vc.ru","code":"registration_1_year","description":"Первый год с vc.ru. Получена 24 июля 2025.","previewUuid":"0d11c244-49de-50e7-894e-b9b27945d42b","formats":{"glb":"https://static.vc.ru/achievements/fish.glb","usdz":"https://static.vc.ru/achievements/fish.usdz"},"viewData":{"contentColor":"#C67AA3","textMaxWidth":0.634765625,"textX":0.5888671875,"textY":0.54296875,"logoX":0.5859375,"logoY":0.6669921875,"logoXNoText":0.6044921875,"logoYNoText":0.5439453125},"id":4980908,"userId":447345,"count":0,"shareImage":"https://api.vc.ru/achievements/share/4980908"},{"title":"3 года на vc.ru","code":"registration_3_years","description":"Провёл 3 года вместе с vc.ru. Получена 23 июля 2025.","previewUuid":"d9d72ac5-bcb5-55e0-8c72-b99251e5cdd9","formats":{"glb":"https://static.vc.ru/achievements/shark.glb","usdz":"https://static.vc.ru/achievements/shark.usdz"},"viewData":{"contentColor":"#8E6F09","textMaxWidth":0.66796875,"textX":0.5205078125,"textY":0.341796875,"logoX":0.5205078125,"logoY":0.4609375,"logoXNoText":0.5,"logoYNoText":0.3662109375},"id":1356821,"userId":447345,"count":0,"shareImage":"https://api.vc.ru/achievements/share/1356821"},{"title":"5 лет на vc.ru","code":"registration_5_years","description":"Провёл 5 лет вместе с vc.ru. Получена 23 июля 2025.","previewUuid":"a9140d54-73b8-5f40-afa8-449fbaafd42b","formats":{"glb":"https://static.vc.ru/achievements/whale.glb","usdz":"https://static.vc.ru/achievements/whale.usdz"},"viewData":{"contentColor":"#8E6F09","textMaxWidth":0.66796875,"textX":0.533203125,"textY":0.658203125,"logoX":0.533203125,"logoY":0.77734375,"logoXNoText":0.4375,"logoYNoText":0.66015625},"id":130113,"userId":447345,"count":0,"shareImage":"https://api.vc.ru/achievements/share/130113"}],"lastModificationDate":1764924296,"isSubscribed":false,"isSubscribedToNewPosts":false,"isMuted":false,"isAvailableForMessenger":true,"badgeId":null,"isDonationsEnabled":false,"isPlusGiftEnabled":true,"isUnverifiedBlogForCompanyWithoutPro":true,"isRemovedByUserRequest":false,"isFrozen":false,"isDisabledAd":false,"isPlus":false,"isVerified":false,"isPro":false,"yandexMetricaId":null,"badge":null,"isOnline":false,"tgChannelShortname":null,"isUnsubscribable":true,"type":1,"subtype":"personal_blog"},"subsite":{"id":447345,"name":"NTA","nickname":null,"description":null,"uri":"","avatar":{"type":"image","data":{"uuid":"e7175678-aaab-09f8-0271-7b3af7ac4670","width":1207,"height":1207,"size":83090,"type":"jpg","color":"e3ebf8","hash":"","external_service":[]}},"cover":{"cover":{"type":"image","data":{"uuid":"8575b55d-a1f0-53ee-9ad6-78268f9ea45c","width":1280,"height":373,"size":56005,"type":"jpg","color":"b0b9ca","hash":"","external_service":[]}},"cover_y":0},"achievements":[{"title":"Год на vc.ru","code":"registration_1_year","description":"Первый год с vc.ru. Получена 24 июля 2025.","previewUuid":"0d11c244-49de-50e7-894e-b9b27945d42b","formats":{"glb":"https://static.vc.ru/achievements/fish.glb","usdz":"https://static.vc.ru/achievements/fish.usdz"},"viewData":{"contentColor":"#C67AA3","textMaxWidth":0.634765625,"textX":0.5888671875,"textY":0.54296875,"logoX":0.5859375,"logoY":0.6669921875,"logoXNoText":0.6044921875,"logoYNoText":0.5439453125},"id":4980908,"userId":447345,"count":0,"shareImage":"https://api.vc.ru/achievements/share/4980908"},{"title":"3 года на vc.ru","code":"registration_3_years","description":"Провёл 3 года вместе с vc.ru. Получена 23 июля 2025.","previewUuid":"d9d72ac5-bcb5-55e0-8c72-b99251e5cdd9","formats":{"glb":"https://static.vc.ru/achievements/shark.glb","usdz":"https://static.vc.ru/achievements/shark.usdz"},"viewData":{"contentColor":"#8E6F09","textMaxWidth":0.66796875,"textX":0.5205078125,"textY":0.341796875,"logoX":0.5205078125,"logoY":0.4609375,"logoXNoText":0.5,"logoYNoText":0.3662109375},"id":1356821,"userId":447345,"count":0,"shareImage":"https://api.vc.ru/achievements/share/1356821"},{"title":"5 лет на vc.ru","code":"registration_5_years","description":"Провёл 5 лет вместе с vc.ru. Получена 23 июля 2025.","previewUuid":"a9140d54-73b8-5f40-afa8-449fbaafd42b","formats":{"glb":"https://static.vc.ru/achievements/whale.glb","usdz":"https://static.vc.ru/achievements/whale.usdz"},"viewData":{"contentColor":"#8E6F09","textMaxWidth":0.66796875,"textX":0.533203125,"textY":0.658203125,"logoX":0.533203125,"logoY":0.77734375,"logoXNoText":0.4375,"logoYNoText":0.66015625},"id":130113,"userId":447345,"count":0,"shareImage":"https://api.vc.ru/achievements/share/130113"}],"lastModificationDate":1764924296,"isSubscribed":false,"isSubscribedToNewPosts":false,"isMuted":false,"isAvailableForMessenger":true,"badgeId":null,"isDonationsEnabled":false,"isPlusGiftEnabled":true,"isUnverifiedBlogForCompanyWithoutPro":true,"isRemovedByUserRequest":false,"isFrozen":false,"isDisabledAd":false,"isPlus":false,"isVerified":false,"isPro":false,"yandexMetricaId":null,"badge":null,"isOnline":false,"tgChannelShortname":null,"isUnsubscribable":true,"type":1,"subtype":"personal_blog"},"reactions":{"counters":[{"id":1,"count":2}],"reactionId":0},"isNews":false,"source":null,"clusters":[],"donations":{"amount":0,"isDonated":false},"commentsSeenCount":null}},{"type":"entry","data":{"id":688584,"customUri":null,"subsiteId":1510590,"title":"Мой первый сайт","date":1683553262,"dateModified":1683553262,"blocks":[{"type":"text","cover":true,"hidden":false,"anchor":"","data":{"text":"
Сражу скажу я знаю что в коммах будет срач,но прошу помогите с освоением.
"}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":"from flask import Flask\n#импорты\napp = Flask(__name__)\n#создание перменной app с которой мы будем работать после\n@app.route(\"/\")\ndef hello_world():\n return \"
\n Hi, I'm John Doe. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae lectus ac metus\n pulvinar elementum a sed lacus. Sed sed metus at urna porta ultricies vel vitae velit. Aliquam convallis,\n purus ac commodo commodo, ipsum erat congue eros, vitae efficitur libero urna nec mi. Integer vel luctus\n velit, a pellentesque justo.\n
"}}],"summaryContent":null,"isExistSummaryContent":false,"warningFromEditor":null,"warningFromEditorTitle":null,"counters":{"comments":1,"favorites":0,"reposts":0,"views":605,"hits":148,"reads":null,"online":0},"dateFavorite":0,"hitsCount":148,"isCommentsEnabled":true,"isLikesEnabled":true,"isRemovedByUserRequest":false,"isFavorited":false,"isPinned":false,"repostId":null,"repostData":null,"subscribedToTreads":false,"isEditorial":false,"isAudioAvailable":false,"audioUrl":null,"isAudioAvailableToGenerate":false,"commentEditor":{"enabled":true,"who":null,"text":"","until":null,"reason":null,"type":"everybody"},"isBlur":false,"isPublished":true,"isDisabledAd":false,"withheld":[],"ogTitle":null,"ogDescription":null,"url":"https://vc.ru/id1510590/688584-moi-pervyi-sait","author":{"id":1510590,"name":"Python Idea","nickname":null,"description":"Раскажу вам о всех чертогах постижения IT и покажу что программистом могут стать все, если захотят и подпишутся на меня,конечно.","uri":"","avatar":{"type":"image","data":{"uuid":"2f87cc08-8d35-5587-947b-9b51331b9a0b","width":2560,"height":1440,"size":1257538,"type":"png","color":"1c1c1c","hash":"","external_service":[]}},"cover":{"cover":{"type":"image","data":{"uuid":"d61baea8-5da2-5fb5-8aa8-b95dde4fbbb3","width":1920,"height":1080,"size":913739,"type":"png","color":"14120f","hash":"","external_service":[]}},"cover_y":26},"achievements":[{"title":"Год на vc.ru","code":"registration_1_year","description":"Первый год с vc.ru. Получена 24 июля 2025.","previewUuid":"0d11c244-49de-50e7-894e-b9b27945d42b","formats":{"glb":"https://static.vc.ru/achievements/fish.glb","usdz":"https://static.vc.ru/achievements/fish.usdz"},"viewData":{"contentColor":"#C67AA3","textMaxWidth":0.634765625,"textX":0.5888671875,"textY":0.54296875,"logoX":0.5859375,"logoY":0.6669921875,"logoXNoText":0.6044921875,"logoYNoText":0.5439453125},"id":3943935,"userId":1510590,"count":0,"shareImage":"https://api.vc.ru/achievements/share/3943935"}],"lastModificationDate":1764924296,"isSubscribed":false,"isSubscribedToNewPosts":false,"isMuted":false,"isAvailableForMessenger":true,"badgeId":null,"isDonationsEnabled":false,"isPlusGiftEnabled":true,"isUnverifiedBlogForCompanyWithoutPro":false,"isRemovedByUserRequest":false,"isFrozen":false,"isDisabledAd":false,"isPlus":false,"isVerified":false,"isPro":false,"yandexMetricaId":null,"badge":null,"isOnline":false,"tgChannelShortname":null,"isUnsubscribable":true,"type":1,"subtype":"personal_blog"},"subsite":{"id":1510590,"name":"Python Idea","nickname":null,"description":"Раскажу вам о всех чертогах постижения IT и покажу что программистом могут стать все, если захотят и подпишутся на меня,конечно.","uri":"","avatar":{"type":"image","data":{"uuid":"2f87cc08-8d35-5587-947b-9b51331b9a0b","width":2560,"height":1440,"size":1257538,"type":"png","color":"1c1c1c","hash":"","external_service":[]}},"cover":{"cover":{"type":"image","data":{"uuid":"d61baea8-5da2-5fb5-8aa8-b95dde4fbbb3","width":1920,"height":1080,"size":913739,"type":"png","color":"14120f","hash":"","external_service":[]}},"cover_y":26},"achievements":[{"title":"Год на vc.ru","code":"registration_1_year","description":"Первый год с vc.ru. Получена 24 июля 2025.","previewUuid":"0d11c244-49de-50e7-894e-b9b27945d42b","formats":{"glb":"https://static.vc.ru/achievements/fish.glb","usdz":"https://static.vc.ru/achievements/fish.usdz"},"viewData":{"contentColor":"#C67AA3","textMaxWidth":0.634765625,"textX":0.5888671875,"textY":0.54296875,"logoX":0.5859375,"logoY":0.6669921875,"logoXNoText":0.6044921875,"logoYNoText":0.5439453125},"id":3943935,"userId":1510590,"count":0,"shareImage":"https://api.vc.ru/achievements/share/3943935"}],"lastModificationDate":1764924296,"isSubscribed":false,"isSubscribedToNewPosts":false,"isMuted":false,"isAvailableForMessenger":true,"badgeId":null,"isDonationsEnabled":false,"isPlusGiftEnabled":true,"isUnverifiedBlogForCompanyWithoutPro":false,"isRemovedByUserRequest":false,"isFrozen":false,"isDisabledAd":false,"isPlus":false,"isVerified":false,"isPro":false,"yandexMetricaId":null,"badge":null,"isOnline":false,"tgChannelShortname":null,"isUnsubscribable":true,"type":1,"subtype":"personal_blog"},"reactions":{"counters":[],"reactionId":0},"isNews":false,"source":null,"clusters":[],"donations":{"amount":0,"isDonated":false},"commentsSeenCount":null}}],"ogTitle":null,"ogDescription":null,"isAnonymized":true}};
![\"Project](\"https://i.yapx.ru/WAnPw.png\")
\n