Curso
Curso de Vue.js: Como criar sua primeira aplicação
Neste curso você aprenderá a criar sua primeira aplicação com Vue.js, um dos principais frameworks JavaScript do mercado atualmente. Veremos aqui como utilizar algumas de suas principais diretivas e renderizar no HTML dados definidos no JavaScript, ligando-os com os elementos da tela com o recurso de data binding.
Esse curso inclui:
Suporte em tempo real
Certificado
Carga horária:
8 horas
Curso de Vue.js (8 aulas)
Aula 1 - Introdução
Dando início ao nosso curso veremos o que é o Vue.js, qual seu funcionamento e suas principais características. Além disso, veremos a aplicação final do curso em execução.
Aula 2 - Criando o HTML da página
O Vue.js trabalha na parte front-end da nossa aplicação, por isso desenvolveremos o HTML que será utilizado durante nosso curso. Criaremos então a tabela para listagem dos registros e o formulário para a inserção dos mesmos.
Aula 3 - Criando a primeira aplicação Vue.js
Neste vídeo criaremos nossa primeira aplicação utilizando o Vue.js. Além disso, veremos como é seu comportamento e como adicioná-la no nosso template.
Aula 4 - Criando a listagem das tarefas
Para realizar a listagem dos registros que existem em nosso array de tarefas utilizamos o data-bind do Vue.js. Neste vídeo veremos como declará-lo e seu funcionamento.
Aula 5 - Utilizando o ‘v-for’ para listar todas as tarefas
Neste vídeo veremos como a diretiva v-for auxilia no processo de automatização da listagem dos nossos registros e a economia de código que obtemos ao utilizar esta diretiva.
Aula 6 - Adicionando novas tarefas
Agora precisamos capturar os dados digitados através do nosso formulário e inseri-los em nossa listagem de tarefas, o que será visto neste vídeo.
Aula 7 - Removendo tarefas
Veremos agora como realizar a remoção das tarefas exibidas em nossa tabela e quais diretivas serão utilizadas para esta funcionalidade.
Aula 8 - Alterando o CSS da listagem quando a tarefa estiver pronta
Finalizando o curso, veremos como personalizar o título de uma tarefa quando marcamos seu status como ‘pronta’. Para isso aplicaremos uma classe CSS ao título quando o atributo ‘pronta’ for verdadeiro.
Veja outros cursos de Vue.js
Vue.js: Hello World com Vue 3.0 CLI
Vue.js: Exibindo listas (v-for)
Vue.js: Formulários