Базовый курс Vue.js

Получите доступ ко всему, что можно найти на этом сайте.

1 мес. 1 год
≈1000 руб. ≈3600 руб. (-80%)

Ссылки для оплаты доступны после регистрации и входа на сайт.

Более подробно про вопросы подключения и установки Vue.js можно посмотреть в этом курсе.

Если вам нужно разработать или доработать проект на Vue.js, можете воспользоваться моими услугами.

Расширение для Google Chrome для отладки Vue.js приложений


Задачи на работу с data в Vue.js

Несколько задач на тему работы с data на фреймворке Vue.js. 

Vue. Директива v-if. Условный рендеринг.

В статье рассматривается применение условных операторов в шаблонах Vue.js для управления отображением контента в зависимости от состояния данных. Обсуждаются директивы v-if, v-else-if и v-else, позволяющие динамически отображать различные элементы DOM в соответствии с условиями. Приводятся примеры использования этих директив и объясняются их особенности. Дополнительно сравниваются директивы v-if и v-show, выявляя различия в их поведении. Получите понимание того, как эффективно использовать условные операторы для создания гибких и интерактивных интерфейсов в приложениях Vue.js.

Задачи на работу с циклами Vue.js

Данный раздел посвящен задачам, связанным с циклами во фреймворке Vue.js. Работа с циклами является важной составляющей веб-разработки, так как она позволяет автоматизировать повторяющиеся операции и упростить код при работе с большим объемом данных.
В этом разделе мы рассмотрим различные примеры использования циклов в Vue.js, такие как: отображение списков, фильтрация и сортировка данных, а также использование циклов вместе с условными операторами.


Про совместное использование v-if и v-for

Подробнее о том зачем нужен атрибут key для директивы v-for на примере

Событие ввода и изменения для полей ввода


Событие отправки формы


Задачи на работу с событиями Vue.js.

Данный раздел содержит инструкции по работе с событиями во Vue.js. Важно учитывать, что события в Vue.js могут использоваться для общения между компонентами, что позволяет значительно упростить разработку, особенно при работе с крупными приложениями. В этом разделе вы найдете подробную информацию о том, как создавать и обрабатывать события, а также о том, как передавать данные между компонентами. Кроме того, в этом разделе мы рассмотрим различные примеры использования событий в Vue.js, чтобы вы могли лучше понимать, как они работают на практике.  

Как менять данные при изменении поля ввода


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


v-model для элемента select


Использование v-model с массивом объектов


Как добавить стили в шаблон с помощью атрибута style


Задачи на работу со стилями CSS

Несколько задач на тему того, как работать со стилями CSS на фреймворке Vue.js.

Использование встроенных Javascript методов в шаблоне


Знакомство с computed свойствами


Отличие computed от methods


Когда использовать methods, а когда computed


Диаграмма жизненного цикла и хуки


Объектный способ записи Vue watch

Watch. Слежка в глубину объектов.

Watch. Получение старого значение при deep.

watch. Запуск при загрузке страницы.

Задачи. Разное.


Моменты, когда срабатывают методы, а когда computed. Ограничение моментов срабатывания методов

Механизм сохранения данных форм с помощью события change и watch. Разница между подходами

Как вывести html код в template Vue

В статье рассматривается использование директивы v-html во фреймворке Vue.js для вставки HTML-разметки в веб-приложение. Примеры кода демонстрируют, как передать данные с HTML-разметкой из API и отобразить их на веб-странице с помощью v-html. Это позволяет избежать преобразования HTML в текст и обеспечивает корректный рендеринг разметки. Подходящее использование директивы в контексте реального элемента DOM-разметки подробно объясняется, предоставляя читателям полезные сведения о том, как сделать их веб-приложения более динамичными и интерактивными с помощью Vue.js.

Что еще добавить в этот курс? Каких уроков вам не хватило?