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
Carregamento do VueJS na página
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
ou
<script src="https://unpkg.com/vue@2"></script>
Materiais de aula
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/