Prof. Giuliano Prado - Tópicos Especiais Vue

Prof. Giuliano Prado

Tópicos Especiais em Programação II

Framework Vue JS para desenvolvimento Web

Objetivos

Aprofundar o conhecimento na área de programação abordando novos paradigmas, novas técnicas e novas linguagens de programação.
Conhecer o framework Vue JavaScript desenvolvido para construir interfaces de usuário. Ele se baseia em HTML, CSS e JavaScript e fornece um modelo de programação declarativo e baseado em componentes, que permite assim desenvolver interfaces de usuário com eficiência, sejam elas simples ou complexas.
Aprender todo o ciclo de vida de uma aplicação em Vue, passando desde a fase inicial de criação de um novo projeto e componentes visuais até a evolução de projetos existentes. Tudo isso passando por temas importantes, como gerenciamento de estado com Vuex, roteamento com Vue Router, requisições à api com Axios, dentre outros.

Conteúdo Programático

1. Introdução ao framework Vue.js

1.1 Usando VueJS para interagir coma DOM

1.2 Templates

1.3 Diretivas

1.4 Eventos

1.5 Propriedades reativas e computadas

2 Usando VueJS e Renderização de Listas

2.1 Renderização condicional

2.2 Renderização de listas com v-for

3. Entendendo a instância Vue

4. Fluxo de desenvolvimento "Real" usando Vue CLI

4.1 Instalando o Vue CLI e Criando um Novo Projeto

4.2. Construção de APP para produção

5. Componentes em VueJS

5.1. Comunicação entre componentes

5.2 Uso avançado de componentes

6. Manipulando entrada de Usuário com Formulários

7. Projeto completo com VueJS

7.1 Conectando com servidor via HTTP

7.2 Rotas em uma aplicação JS

7.3 Melhor gerenciamento de Estado com Vuex

8. Produção de um estudo de casos prático

Bibliografia indicada

Documentação VueJS (https://v2.vuejs.org/)

Avaliações

AVAL (P1): 29/09/23 (conteúdo de JS)
TRABALHO T1 – todas as atividades entregues no período
TRABALHO T2 – prazo final do trabalho prático em grupo: 11/12/23 (entrega via AVA da disciplina, link abaixo)
- - PLANILHA DE CADASTRO DAS EQUIPES: https://docs.google.com/spreadsheets/d/1O1nKsRE-qJIdI8rWBJjw50IpOnAwJSn1AoXjI9m6gzo/edit?usp=sharing
  - DESCRIÇÃO DO TRABALHO T2 e TEMAS: https://drive.google.com/file/d/1n0RCCWosb0a7VkPe1mXJBLdSt2WOnoLS/view?usp=drive_link
PROVA FINAL: 21/12/23

APRESENTAÇÃO DA DISCIPLINA

FORMULÁRIO PARA PESQUISA SOBRE JS

LINK DE ACESSO AO AVA (chave: topicos2)

Carregamento do VueJS na página

Materiais de aula

Práticas das aulas

Materiais de referência

Documentação de modificadores de eventos: https://vuejs.org/guide/essentials/event-handling.html
Documentação Oficial - Introdução: https://br.vuejs.org/v2/guide/
Documentação Oficial - Sintaxe de Template: https://br.vuejs.org/v2/guide/syntax.html
Documentação Oficial - Manipulação de Eventos: https://br.vuejs.org/v2/guide/events.html
Documentação Oficial - Dados Computados & Observadores: https://br.vuejs.org/v2/guide/computed.html
Documentação Oficial - Interligações de Classe e Estilo: https://br.vuejs.org/v2/guide/class-and-style.html

VUE CLI

O Arquivo ".vue"

Você pode aprender mais sobre o arquivo ".vue" nesse artigo da documentação oficial: https://br.vuejs.org/v2/guide/single-file-components.html
Você pode aprender mais sobre o método render() nesse outro artigo na documentação oficial: https://br.vuejs.org/v2/guide/render-function.html

The CLI

Aprenda mais sobre o Vue CLI aqui: https://cli.vuejs.org/

Depurando Projetos VueJS

Duas ferramentas que você pode usar:

1) Ferramenta de Desenvolvimento Vue (https://github.com/vuejs/vue-devtools)

2) A ferramenta de Desenvolvedor do Chrome

Quando estiver trabalhando com projetos criados com o CLI , você pode facilmente debugar a sua aplicação abrindo o a ferramenta de desenvolvimento (abaixo exemplo no Chrome) abrir a aba sources. Você deverá ver a pasta webpack:// e dentro você encontrará todos os arquivos do projeto (área em destaque vermelha). Agora é só abrir os arquivos e colocar os breakpoints para debugar a sua aplicação em execução.

COMPONENTES DINÂMICOS

Documentação Oficial - Slots: https://br.vuejs.org/v2/guide/components.html#Distribuicao-de-Conteudo-com-Slots
Documentação Oficial - Componentes Dinâmicos: https://br.vuejs.org/v2/guide/components.html#Componentes-Dinamicos

Formulário: https://br.vuejs.org/v2/guide/forms.html

DIRETIVAS

Documentação Oficial - Diretivas Personalizadas: https://br.vuejs.org/v2/guide/custom-directive.html

FILTROS e MIXINS

Documentação Oficial - Filtros: https://br.vuejs.org/v2/guide/filters.html
Documentação Oficial - Mixins: https://br.vuejs.org/v2/guide/mixins.html

ROUTERS

Documentação sobre Routers: https://router.vuejs.org/guide/

VUEX

Documentação do Vuex: https://vuex.vuejs.org/guide/

Page updated

Google Sites

Report abuse