[TDD] Learn Vue.js by Building and Deploying a CRUD App

[admin]

Изучите Vue, создав полнофункциональное веб-приложение!

Цели обучения

Этот курс научит основам Vue путем создания реального веб-приложения.

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

К концу этого курса вы сможете:

Создайте веб-сайт, используя Vue, чтобы расширить функциональность веб-приложения.
Используйте ключевые директивы Vue (v-for, v-on, v-show, v-if, v-else), чтобы добавить логику в ваше веб-приложение.
Понять, как использовать методы и вычисляемые свойства
Создание динамического стиля веб-приложения с помощью привязки стилей
Создайте новый проект Vue, используя Vue CLI и Vue UI
Разработка приложения Vue с использованием инструментария, предоставляемого пользовательским интерфейсом Vue
Объясните, как компоненты являются строительными блоками для приложений Vue
Реализуйте модульные тесты для ваших компонентов Vue
Передача данных между компонентами с использованием реквизита и пользовательских событий
Понять жизненный цикл экземпляра Vue (и компонентов)
Используйте библиотеку axios для взаимодействия с внешним API (вызовы HTTP GET, POST, DELETE и PUT)
Реализовать макет библиотеки axios для модульного тестирования с использованием внешнего API
Перенос данных в Vuex Store
Реализация одностраничного приложения (SPA) с использованием Vue Router
Развертывание веб-приложения Vue в Интернете с помощью Netlify

Learning Objectives
This course will teach the fundamentals of Vue by building an actual web application. Each chapter in this course will build upon itself to achieve that goal of developing a web app.

The web application that will be built in this course is for managing a list of users that are stored in a database. This type of site is called a CRUD (Create, Read, Update, and Delete) application, as it provides the key functionality for interacting with a database.

By the end of this course, you will be able to:


Create a website using Vue to enhance the functionality of the web application
Utilize the key Vue Directives (v-for, v-on, v-show, v-if, v-else) to add logic to your web application
Understand how to use methods and computed properties
Create dynamic styling of a web application using style binding
Create a new Vue project using the Vue CLI and Vue UI
Develop a Vue application using the tooling provided by the Vue UI
Explain how components are the building blocks for Vue applications
Implement unit tests for your Vue components
Pass data between components using props and custom events
Understand the lifecycle of the Vue instance (and components)
Utilize the axios library to interface with an external API (HTTP GET, POST, DELETE, and PUT calls)
Implement a mock of the axios library to unit test using an external API
Migrate data to a Vuex Store
Implement a Single-Page Application (SPA) using Vue Router
Deploy a Vue web application to the web using Netlify




Содержание
Part 1 (Vue Fundamentals)

Introduction to Vue
Changelog
Initial Webpage
Getting Started with Vue
Displaying Lists with the v-for Directive
Using the v-on and v-show Directives
Using the v-if and v-else Directives
Introduction to Methods
Methods (Part II)
Computed Properties
Style Binding
Part 2 (Components)

Introduction to Components
Vue CLI
Vue UI
Components (Part II)
Unit Testing
Props
Components (Part III)
Custom Events
Unit Testing (Part II)
Part 3 (Working with an API)

Vue Lifecyle
TDD: Loading data via GET
TDD: Message Banner
TDD: Saving data via POST
TDD: Deleting data via DELETE
TDD: Updating data via PUT
Part 4 (Vuex and Vue Router)

Introduction to Vuex
TDD: Vuex (Part II)
TDD: Vue Router
Deploying to Netlify
Conclusion