VUEJS

Vue === View == Viu

The progressive JavaScript Framework

Sistema antigo

Sistema novo

"

Uma estrutura acessível, de alto desempenho e versátil para a construção de interfaces de usuário da web.

"

Ou seja,

Framework javascript para construir interfaces.

Principais conceitos

Tudo é componente

Tudo é reativo

Tudo é super rápido

simple

file components

Diretivas

Condição e loops (v-if, v-else, v-else-if, v-for)
Bind (v-bind)
Two-way data binding (v-model)
Eventos (v-on)
Watchers
...

Dependências

Javascript intermediário
HTML
CSS

Vue dev tools

Instalar em seu navegador

Debugador de components

Vue CLI

Vue Router

Pinia

Dando super poderes ao VUE

É isso!? Bora...

Instalando VUE

Documentação

Without build tools

CLI

Diretivas

Condicionais

v-if
v-else-if
v-if
v-show

Loops

v-for

Atributos Class e Style dinâmicos

<template>

  <div>
    <h1 :class="{ 'classVar': true }">
      {{ contexto }}
    </h1>
  </div>
  
  <h1 :class="['classVar', 'title']">
  
</template>

Ligação de dados bidirecional (diretiva v model)

v-model

One-way data binding
Two-way data binding

Eventos

Propriedades computadas

Ciclo de vida

criação
- Preparar o component
- ajax, iniciar algumas variáveis
- não tem acesso ao template (DOM)
montagem
- iniciar uma lib externa
- precisa de acesso ao template (DOM)
- tem acesso ao template (DOM)
atualização
- debug
desmontagem
- remover o que for necessário para libera memória

hooks

componentes

slots

$el

$slots

CLI

watch

watchEffect

event

emit

v-model

defineModel

https://rickandmortyapi.com/documentation

unplugin-auto-import

unplugin-vue-components