Esta apresentação introduz os conceitos básicos sobre o Vue 2 e exemplos de data-binding.

1. Apresentado por Danilo Pinotti

2. Conceitos básicos

3. O que é Vue?
- Pronuncia-se igual a palavra view em inglês.
- Framework progressivo para construções de interfaces de
usuário.
- Foi projetado desde sua concepção para ser adotável
incrementalmente.

4. O que é Vue?
- Em conjunto com mais bibliotecas, sendo elas oficiais ou
não, também é possível criar Single Page Applications
(SPAs).

5. Ecossistema
● Vue CLI
● Vue DevTools
● Vue Loader
● Vue Router
● Vuex
● Vue.js Server-Side Rendering

6. Setup

7. Vue Cli

8. Repositório GIT
- Bootstrap 4, font awesome 5 e simplificação dos componentes pré-existentes

9. Básico sobre componentes
Vue

10. Básico sobre componentes Vue
- Programação declarativa.
- Manipular dados em vez de manipular DOM.
- Single-File Components

12. Análise de código
Arquivo: src/components/Home.vue
- Única tag pai
- Tags template, script e style
- Style scoped

13. Binding
Interligação de dados declarados com elementos do DOM.
- Texto comum
- Atributos
- Classes
- Campos de formulários

14. Análise de código: Simple Binding
Arquivo: src/components/Home.vue

15. Próximos passos
- Utilização de outros
componentes
- Eventos e métodos
- Renderização condicional (v-if)
- Loops
- Propriedades computadas

16. Dúvidas?

17. Obrigado