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 dinâmicos

<template>

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

Ligação de dados bidirecional (diretiva v model)

v-model

  • One-way data binding
  • Two-way data binding

Eventos

Propriedades computadas

Ciclo de vida

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

VUEJS

By Luiz Lins

VUEJS

  • 88

More from Luiz Lins