Tecnologias Modernas de Front-End

Introdução ao Vue.js

Vue.js é um dos frameworks mais populares para construir aplicações web modernas, juntamente com React e Angular. O que diferencia o Vue.js de seus concorrentes é sua baixa barreira de entrada. Você não precisa de conhecimento avançado ou familiaridade com outros frameworks JavaScript para começar sua jornada com uma abordagem completamente diferente para construir interfaces de usuário orientadas a dados. Neste curso, você aprenderá os conceitos-chave do Vue.js, incluindo trabalhar com templates, responder a ações do usuário, manipular classes e estilos CSS, lidar com formulários, criar animações e construir componentes personalizados. Com o Vue, você pode facilmente estender o HTML com novas capacidades de apresentação de dados controladas inteiramente por código JavaScript. E a melhor parte é que quando os dados mudam, o Vue atualizará automaticamente a página, eliminando a necessidade de manipulação manual de elementos DOM por meio de código JavaScript.

Começando com o Vue

Neste curso, você aprenderá o Vue passo a passo. Começaremos com a instalação e o projeto obrigatório Olá Mundo!. Você entenderá o que é o Virtual DOM e por que o Vue o utiliza. Em seguida, você aprenderá como controlar uma parte específica de uma página da web usando métodos, propriedades e atributos dinâmicos. Para entender a reatividade do Vue, exploraremos as construções JavaScript que a permitem.

Manipulação de Eventos e Diretivas

Para criar aplicações interativas, é essencial lidar com ações do usuário. Neste curso, você aprenderá como atribuir manipuladores de eventos, passar parâmetros para funções e usar o objeto Event nativo. Você também descobrirá como modificar a manipulação de eventos para capturar combinações simultâneas de teclas. As diretivas do Vue permitirão que você manipule não apenas o comportamento, mas também a aparência dos elementos HTML. Você aprenderá como controlar classes CSS atribuídas e estilos inline. Além disso, você explorará a renderização condicional e a iteração. Ao final desta seção, você estará pronto para criar seu primeiro projeto prático: um contador que conta de 10 a 0. Se você já usou a biblioteca jQuery, apreciará a simplicidade e a legibilidade da abordagem do Vue.

Trabalhando com Formulários

Em um dos capítulos do curso, aprofundaremos nas técnicas de trabalho com formulários. Você aprenderá como capturar a entrada do usuário em vários tipos de campos HTML. Para aprimorar sua compreensão, implementaremos o two-way data binding, um recurso oferecido pelo Vue por meio de uma única diretiva. Você também aprenderá sobre filtros e como criar os seus próprios, além de como acessar elementos DOM quando necessário e os benefícios das diretivas personalizadas.

Componentes

Uma das maiores vantagens do Vue.js é a capacidade de criar componentes. Esses são elementos HTML personalizados que podem ser colocados em qualquer lugar de sua aplicação. Um componente não se trata apenas de aparência definida por meio de um template; ele também inclui lógica controlada por código JavaScript. Neste curso, você aprenderá como registrar componentes localmente e globalmente, torná-los reutilizáveis ao aceitar diferentes dados e comunicar-se entre componentes para manter sua aplicação sincronizada. Abordaremos tanto a comunicação pai-filho quanto a comunicação filho-pai. Nesta etapa, trabalharemos em um projeto prático: uma tabela orientada a dados. Cada linha da tabela representará dados de uma pessoa, e você poderá excluir uma linha clicando em um ícone de lixeira. Além disso, você poderá editar uma linha transformando-a em campos de entrada, permitindo que você atualize os dados. Este projeto utilizará o conhecimento que você adquiriu até agora.

Animações

O Vue.js oferece a capacidade de animar elementos quando eles são mostrados ou ocultados. Este curso também abordará esse tópico. Você aprenderá como animar elementos usando CSS, animar a transição de um componente para outro e obter o mesmo efeito para uma lista de itens. Aproveitando seu conhecimento na criação de componentes personalizados, criaremos um componente que anima outros elementos contidos nele. Para isso, integraremos nosso componente com a biblioteca animate.css.

Fluxo de Trabalho Moderno

Durante a maior parte do curso, escreveremos código JavaScript no padrão ES5, a versão mais popular. Também evitaremos o uso de ferramentas complexas. Essa abordagem permite que você se concentre em entender o Vue.js sem se preocupar em distinguir entre a sintaxe específica do Vue e o novo padrão JavaScript ou açúcar sintático adicionado por ferramentas de linha de comando. No entanto, isso não significa que você não possa trabalhar com o Vue de maneira moderna. Em um dos capítulos do curso, discutiremos o vue-cli, uma ferramenta que nos permite configurar um novo projeto de aplicativo e configurar um ambiente baseado em webpack para desenvolvimento eficiente. Nesta etapa, você verá que os componentes Vue podem ser criados em arquivos .vue separados, onde você pode definir o template, a lógica do componente e, opcionalmente, os estilos CSS.

Projeto Final: Slideshow

O curso será concluído com a criação de uma aplicação moderna usando a sintaxe mais recente do ES6 e um fluxo de trabalho configurado.