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

Видеокурс об основах работы с фреймворком Vue.js. Базовые понятия и определения. Принципы работы Vue.js для понимания работы этого фреймворка. Видео для начинающих.

42 урока

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

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

  • Что такое Vue.js
    Vue.js: фреймворк на JavaScript с компонентным подходом, его назначение и невысокий порог входа.
  • Важная инструкция перед прохождением базового курса по Vue
    Подготовительный этап курса по основам Vue.js: знакомство с понятием компонентов, способы создания Vue-приложений с помощью Vite или Vue CLI, работа с Single File Components и обзор базовых файлов сборки проекта.
  • Расширение для Google Chrome для отладки Vue.js приложений
  • Шаблон Vue. Его нахождения в разных вариантах подключения.
    Обзор понятия шаблона (template) во Vue: где располагается разметка в однофайловых компонентах (SFC) и в компонентах-объектах, как Vue обрабатывает шаблон и монтирует его в DOM.
  • Уровень данных (data) Vue приложений
    Уровень данных (data) Vue-компонента: функция, возвращающая объект с данными, и понятие состояния компонента.
  • Задачи на работу с data в Vue.js
    Задачи на работу с уровнем данных (data) во фреймворке Vue.js.
  • Директивы Vue.js
    Директивы Vue: v-if, v-show и v-for для условий и циклов, v-bind и v-on для привязок и событий.
  • Vue. Директива v-if. Условный рендеринг.
    Условный рендеринг во Vue: директивы v-if, v-else-if и v-else, а также отличие v-if от v-show.
  • Задачи v-if.
    Задачи на директиву v-if во Vue: показ элемента по условию, скрытие блока вместе с содержимым и выбор между вариантами.
  • Vue. Директива v-show
    Директива v-show во Vue.js — условное отображение элементов через CSS (display:none) без удаления из DOM. Отличия v-show от v-if, ограничения и практические сценарии использования, включая SEO-оптимизацию.
  • Vue. Цикл for (директива v-for)
    Директива v-for во Vue: перебор массива, массива объектов и ключей объекта внутри шаблона компонента.
  • Задачи на работу с циклами Vue.js
    Задачи на циклы во Vue.js: вывод списков, фильтрация и сортировка данных, сочетание цикла с условием.
  • Про совместное использование v-if и v-for
  • Подробнее о том зачем нужен атрибут key для директивы v-for на примере
  • Vue элемент-призрак template.
    Элемент template во Vue — это псевдоэлемент, который не создаёт узлов в DOM, но позволяет применять директивы v-if и v-for для группировки элементов без добавления лишней обёртки в разметку.
  • События Vue.js и их обработка
    События во Vue.js: отслеживание действий пользователя в шаблоне и директива для подписки на событие.
  • Понятие методов (methods) Vue.js
    Методы (methods) Vue-компонента: как объявить метод, что он описывает и чем отличается от уровня данных.
  • Событие ввода и изменения для полей ввода
  • Событие отправки формы
  • Задачи на работу с событиями Vue.js.
    События во Vue.js: создание и обработка событий, передача данных между компонентами.
  • v-bind Vue. Связь шаблона с данными.
    Директива v-bind во Vue: связь атрибутов элемента шаблона со значениями из уровня данных компонента.
  • Как менять данные при изменении поля ввода
  • v-model Vue. Связь данных и представления.
    Узнайте, как организовать двухстороннюю связь между компонентами во Vue.js с помощью `v-model`. Этот синтаксический сахар заменяет конструкцию `value + @input`, упрощая синхронизацию данных. На примере компонента `input` разбираем, как `v-model` управляет состоянием и сокращает код.
  • Модификаторы v-model
  • v-model для элемента select
  • Использование v-model с массивом объектов
  • Как добавить стили в шаблон с помощью атрибута style
  • Задачи на работу со стилями CSS
    Задачи на работу со стилями CSS во фреймворке Vue.js.
  • Использование встроенных Javascript методов в шаблоне
  • Знакомство с computed свойствами
  • Отличие computed от methods
  • Когда использовать methods, а когда computed
  • Диаграмма жизненного цикла и хуки
  • Vue watch. Слежка за уровнем данных.
    Опция watch во Vue.js позволяет отслеживать изменения данных компонента и выполнять действия при их обновлении, предоставляя доступ к новому и старому значению отслеживаемого ключа.
  • Объектный способ записи Vue watch
  • Watch. Слежка в глубину объектов.
  • Watch. Получение старого значение при deep.
  • watch. Запуск при загрузке страницы.
  • Задачи. Разное.
  • Моменты, когда срабатывают методы, а когда computed. Ограничение моментов срабатывания методов
  • Механизм сохранения данных форм с помощью события change и watch. Разница между подходами
  • Как вывести html код в template Vue
    Директива v-html во Vue: вывод HTML-разметки, пришедшей из API, вместо экранированного текста.

Как получить доступ?

Доступ к курсу "Vue.js" на 1 месяц

Стоимость: 1000 ₽ (стоимость в других валютах можно уточнить у автора)

Войдите / зарегистрируйтесь на сайте, чтобы получить данные для оплаты

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