Props

Documentação: https://pt.vuejs.org/guide/components/props.html#props-declaration

No Vue.js, as "props" (propriedades) são um mecanismo fundamental para permitir a comunicação entre componentes. Elas permitem que dados sejam passados de um componente pai para um componente filho. As props são especificadas como atributos personalizados em um componente e podem ser usadas para transmitir informações de um componente superior para um inferior.

Props são propriedades personalizadas que podem ser anexadas a um componente Vue. Elas permitem que dados sejam passados de um componente pai para um componente filho. Isso é essencial para criar componentes reutilizáveis e compor aplicativos Vue complexos

Vinculações de Classe e Estilo

Documentação: https://pt.vuejs.org/guide/essentials/class-and-style.html

As "Vinculações de Classe e Estilo" no Vue.js permitem que você manipule dinamicamente as classes e os estilos CSS de elementos em seu aplicativo com base em condições, dados ou estados específicos. Isso é fundamental para criar interfaces de usuário dinâmicas e responsivas. Aqui está uma explicação conceitual dessas vinculações com base na documentação do Vue.js:

Vinculação de Classe (v-bind:class):

A vinculação de classe permite que você adicione ou remova dinamicamente classes de um elemento HTML com base em condições ou valores de dados. Isso é útil para aplicar estilos diferentes a elementos com base em eventos ou estados específicos. Em resumo, as "Vinculações de Classe e Estilo" no Vue.js são mecanismos poderosos para controlar dinamicamente as classes e os estilos de elementos HTML em resposta a dados e eventos específicos, tornando seus aplicativos Vue.js mais interativos e responsivos.

Ciclos de Vida

Documentação: https://pt.vuejs.org/api/options-lifecycle.html#beforecreate

Os Ciclos de Vida, no contexto do desenvolvimento de software, são conjuntos de estados pelos quais um componente, objeto ou aplicativo passa durante sua existência. Eles representam uma sequência predefinida de eventos ou ações que ocorrem desde a criação até a destruição desse elemento. Os Ciclos de Vida são uma parte fundamental da programação orientada a objetos e são usados para gerenciar recursos, configurar comportamentos e responder a eventos específicos em diferentes estágios da vida de um componente ou aplicativo.

created (Criado):

Após o gatilho beforeCreate, a instância do componente é criada completamente.
Neste ponto, você pode acessar os dados do componente e configurar observadores (watchers), mas o template ainda não foi montado ou renderizado.

mounted (Montado):

Após o gatilho beforeMount, o componente é montado no DOM.
Agora, você tem acesso ao DOM renderizado e pode realizar operações após a renderização.

updated (Atualizado):

Após o gatilho beforeUpdate, o componente é atualizado e refletirá as mudanças nos dados.
É um ponto de verificação útil após a atualização.

unmounted (Desmontado):

Após o gatilho beforeUnmount, o componente é desmontado do DOM.
Neste ponto, a instância Vue não está mais associada ao DOM.

Atividade II

Faça uma a seguinte a aplicação

1. A ideia é criar um banco digital, onde pode ser sacado e debitado, valores.
2. Para criar uma conta, o usuário deve depositar na sua conta pelo menos R$100,00
3. Ao criar a conta, o usuário pode sacar e depositar.
4. Sempre que o usuário depositar, adicione o valor a conta.
5. Sempre que o usuário sacar, retira a quantia da conta.
6. O valor deve aparecer verde se tiver com saldo e vermelho se estiver no débito.

Propriedades Computadas

Documentação: https://pt.vuejs.org/guide/essentials/computed.html#basic-example

O que é o Computed no Vue.js 3?

No Vue.js 3, o "computed" é uma das características mais poderosas e úteis que permitem aos desenvolvedores realizar cálculos e manipulações de dados de forma declarativa. Ele é usado para criar propriedades computadas, que são propriedades que dependem de outras propriedades reativas no Vue e são recalculadas automaticamente sempre que essas propriedades de origem são alteradas. O "computed" ajuda a manter o código limpo, organizado e eficiente, permitindo que você evite cálculos repetitivos e complexos.

Como Funciona o Computed?

Para entender como o "computed" funciona, imagine que você está construindo uma aplicação de carrinho de compras. Você tem uma lista de itens, cada um com um preço e uma quantidade. Você deseja calcular o total do carrinho, que é o preço de cada item multiplicado pela quantidade e, em seguida, somado para obter o total geral.

Usando "computed", você pode criar uma propriedade computada chamada totalCarrinho que depende das propriedades preco e quantidade de cada item. O Vue automaticamente cuidará de recalcular totalCarrinho sempre que uma dessas propriedades mudar.

Exemplo de Uso do Computed:

Aqui está um exemplo simples de como usar "computed" em um componente Vue.js:

<template>
  <div>
    <h1>Carrinho de Compras</h1>

    <div v-for="(item, index) in carrinho" :key="index">
      <p>Produto: {{ item.nome }}</p>
      <p>Preço: R$ {{ item.preco }}</p>
      <p>Quantidade: {{ item.quantidade }}</p>
    </div>

    <p>Total do Carrinho: R$ {{ totalCarrinho }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      carrinho: [
        { nome: "Camiseta", preco: 20, quantidade: 2 },
        { nome: "Calça", preco: 30, quantidade: 1 },
        { nome: "Sapato", preco: 50, quantidade: 3 }
      ]
    };
  },
  computed: {
    totalCarrinho() {
      return this.carrinho.reduce((total, item) => {
        return total + item.preco * item.quantidade;
      }, 0);
    }
  }
};
</script>

Temos uma lista de itens no carrinho, cada um com um nome, preço e quantidade.
Usamos uma propriedade computada chamada totalCarrinho que usa o método reduce para calcular o total do carrinho com base nos preços e quantidades dos itens.
O Vue automaticamente recalcula totalCarrinho sempre que uma das propriedades dos itens no carrinho (preço ou quantidade) é modificada. Isso significa que o total é sempre preciso e atualizado.

Em resumo, o "computed" no Vue.js 3 é uma ferramenta poderosa que permite calcular valores de forma reativa e eficiente com base em outras propriedades. Isso simplifica o código, torna-o mais legível e ajuda a manter os dados sincronizados automaticamente. É uma das características essenciais para criar aplicativos Vue.js eficazes e responsivos.

Atividade II (0,5)

Crie um formulário com um input para receber uma pergunta do usuário e um botão para ativar um método de gerar resposta aleatória - gerarResposta();
Crie duas propriedades vázias dentro do método data(). Pode ser question (para salvar a questão feita no input do template) e answer (que será para guardar a resposta gerada automaticamente pelo método);
Ao clicar no botão é executado o método gerarResposta() que irá criar um array com 5 respostas aleatórias. O array terá os seguintes valores:

answer = ['Com certeza', 'É... não tenho certeza!', 'Claro que não', 'Acho difícil', 'Possívelmente não']

Para retornar um item aleatório do array answer utilize o método JavaScript:

[Math.floor(Math.random() * 5)]

Ficando desta forma:

answer = [
   'Com certeza',
   'É... não tenho certeza!',
   'Claro que não',
   'Acho difícil',
   'Possívelmente não']
   [Math.floor(Math.random() * 5)];

Sejam felizes!