Manual do Vue.js

O Vue.js é, neste momento, um dos principais frameworks de JavaScript. A sua popularidade deve-se à elegância com que resolve os problemas do front-end, à simplicidade da sua abordagem e à excelente performance.

O "Manual do Vue.js" constitui um modo integrado de conhecer os aspectos fundamentais do Vue. A sua perspectiva ultrapassa o nível introdutório, mas procura explicar detalhamente muitos dos temas que encontramos no framework. As explicações são acompanhadas de abundantes exemplos.

O propósito em relação ao futuro é manter a informação do Manual sempre actualizado, à medida que o Vue.js vá evoluindo.

Conteúdos

1. Hello World!

• O que é o Vue?
• Duas formas de utilização
• Ferramentas para o desenvolvimento local Instalação do Vue.js
• Primeira aplicação
• Propriedade “el”
• Método $mount
• Propriedade “data”
• Interpolação

2. Fundamentos

• Templates
• Computed Properties
• Watchers
• Lifecycle Hooks
• Render Functions
• Versões do Vue

3. Directivas

• v-if
• v-show
• v-text
• v-html
• v-bind
• v-for
• v-once
• v-on
• v-model

4. Componentes (I)

• Componente global
• Componente local Props
• Props
• Propriedade $attrs
• Propriedade $props
• Custom Events
• Native Events
• Propriedade $listeners
• Slots
• Slot único
• Named slots
• Default slot
• Default slot content
• Scoped slots
• Dynamic components
• Async components
• Recursividade

5. Componentes (II)

• $root
• $parent
• $refs e ref
• Dependency injection
• Programmatic Event Listeners
• Vue.prototye
• Outros templates

6. Formulários

• axios
• Data binding
• Elementos “input”
• text
• textarea
• checkbox
• radio
• select
• Modificadores de v-model
• Custom inputs
• Valores pré-definidos
• Validação e submissão
• Submissão tradicional
• Gravação sem submissão
• Submissão sem submissão
• Validação

7. Vue Router

• Instalação
• Hello World!
• Criação do router
• Criação das routes
• Integrar com o Vue
• Router link
• Router View
• Exemplo completo
• Mode
• Variáveis $router e $route
• Argumentos
• Path matching engine
• Nestes routes
• Props
• Programmatic Navigation
• Navigations Guards
• Global
• Per-route
• In-Component Guards

8. Vuex

• Solução simples
• Hello Word
• Store
• State
• Getters
• Mutations
• Actions
• Módulos
• Plugins

9. Single File Components

• Node.js & npm
• package.json
• Instalação do Vue
• webpack
• Ficheiros “.vue”
• Hello World!
• webpack-dev-server e hot reload

10. Single Page App

• O que é uma Single Page App?
• Vue-cli 3
• Hello World!
• Criação do projecto
• Estrutura de ficheiros
• Configuração do webpack
• Build
• Deployment
• Source Maps
• web server