I Vue.js 3.x

Instalação

Verifique se você tem o Node.js instalado em sua máquina. O Vue CLI 4.x requer a versão 8.9 ou superior do Node.js (recomenda-se v10+).
Gerencie várias versões do Node na mesma máquina com n, nvm ou nvm-windows.
Instale o Vue CLI com um dos seguintes comandos:

npm install -g @vue/cli
yarn global add @vue/cli

Verifique se o Vue CLI está instalado corretamente executando vue, que deve apresentar uma mensagem de ajuda listando todos os comandos disponíveis.
Verifique se você tem a versão correta do Vue CLI com o comando vue --version.
Crie um novo projeto Vue.js versão 3 com o Vue CLI usando o comando vue create nome-do-projeto.

Configuração

Após utilizar o comando de criação do projeto, a primeira tela aparecerá as primeiras configurações:

Podemos escolher as configurações padrões ou selecionar manualmente o que precisaremos.

Babel: Um transpilador JavaScript que permite usar recursos mais recentes do JavaScript em navegadores mais antigos.
TypeScript: Um superconjunto de JavaScript que adiciona tipos estáticos e outros recursos ao idioma.
Progressive Web App Support: Permite que você adicione suporte a Progressive Web Apps (PWA) ao seu projeto Vue.js. Um PWA é um tipo de aplicativo da web que pode ser instalado em dispositivos móveis e oferece uma experiência semelhante a um aplicativo nativo.
Router: Adiciona o Vue Router ao projeto, permitindo criar rotas e navegação entre páginas.
Vuex: Adiciona o Vuex ao projeto, permitindo gerenciar o estado da aplicação de forma centralizada.
CSS Pre-processors: Permite escolher um pré-processador CSS para usar em seu projeto, como Sass, Less ou Stylus.
Linter / Formatter: Adiciona ferramentas de linting e formatação de código ao projeto para ajudar a manter a qualidade do código.

Diretivas

Uma diretiva é um atributo HTML especial que permite que você manipule o DOM e o comportamento do seu aplicativo Vue.js. Elas podem ser usadas para adicionar atributos, remover elementos, adicionar eventos, entre outras coisas. Em uma abordagem mais didática, podemos pensar nas diretivas como um conjunto de ferramentas que podem ser usadas para criar aplicativos Vue.js mais complexos.

As diretivas começam com o prefixo v-. Quando o Vue.js renderiza uma página, ele avalia as diretivas e executa a ação correspondente.

Existem dois tipos principais de diretivas:

Diretivas de atributo: Essas diretivas adicionam atributos a elementos HTML. Por exemplo, a diretiva v-model adiciona o atributo value a um elemento de entrada e o vincula ao estado de um componente.
Diretivas de evento: Essas diretivas adicionam eventos a elementos HTML. Por exemplo, a diretiva v-on:click adiciona o evento click a um botão e o vincula a uma função.

https://pt.vuejs.org/api/built-in-directives.html

Manipuladores de Eventos

A manipulação de eventos no Vue.js é um conceito fundamental que permite que você responda a ações do usuário, como cliques de mouse, pressionamentos de tecla e interações de formulário, de maneira reativa. Isso significa que você pode criar respostas dinâmicas às ações dos usuários sem a necessidade de recarregar a página.

No Vue.js, você pode vincular manipuladores de eventos diretamente aos elementos HTML usando a sintaxe @evento (ou v-on:evento). Isso permite que você chame métodos específicos quando o evento ocorrer.

Por exemplo, suponha que você tenha um botão e queira executar um método quando ele for clicado:

<template>
  <button @click="handleClick">Clique Aqui</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      // Código a ser executado quando o botão for clicado
    },
  },
};
</script>

No exemplo acima, a diretiva @click está vinculada ao método handleClick. Quando o botão for clicado, o método handleClick será chamado e você pode executar qualquer código desejado dentro dele.

Essa abordagem torna a interação do usuário mais dinâmica e responsiva. Você pode usar manipuladores de eventos para validar entradas de formulário, atualizar dados, exibir modais ou qualquer outra ação que responda a eventos do usuário.

Lembre-se de que, no Vue.js, a manipulação de eventos ocorre de maneira reativa, o que significa que as alterações que você faz nos dados podem afetar diretamente a interface do usuário e vice-versa. Isso contribui para uma experiência de desenvolvimento mais fluída e eficaz.

Modificadores de Evento:

Os Modificadores de Evento no Vue.js são recursos poderosos que permitem personalizar ainda mais o comportamento dos eventos. Eles são representados por sufixos que você pode adicionar às diretivas de eventos, como @click, para ajustar o comportamento do evento.

Por exemplo, o modificador .prevent é usado para prevenir o comportamento padrão de um evento. Se você tiver um link ou um botão e quiser evitar que a página recarregue quando o usuário clicar nele, você pode fazer assim:

<template>
  <a href="https://www.example.com" @click.prevent="clicar">Ir para o exemplo</a>
</template>

<script>
export default {
  methods: {
    clicar() {
      // Você pode executar alguma lógica aqui se necessário
    },
  },
};
</script>

Além do .prevent, existem outros modificadores úteis, como .stop para impedir a propagação do evento, .capture para acionar o manipulador no modo de captura em vez de bubbling, e muitos outros.

Exemplos de Modificadores de Evento:

.stop: Interrompe a propagação do evento para elementos pai.
.prevent: Previne o comportamento padrão do evento.
.capture: O manipulador do evento é acionado no modo de captura, em vez de bubbling.
.self: O manipulador só é acionado se o próprio elemento do manipulador for alvo.
.once: O manipulador só é acionado uma vez.
.passive: Indica ao navegador que o evento é passivo, melhorando o desempenho de rolagem.
.native: Escuta o evento nativo no elemento, em vez do emulado pelo Vue.js.
.left: Apenas aciona o manipulador para o botão esquerdo do mouse.
.right: Apenas aciona o manipulador para o botão direito do mouse.
.middle: Apenas aciona o manipulador para o botão central do mouse.

Modificadores de Tecla:

Os Modificadores de Tecla são usados em conjunto com eventos de teclado para controlar a execução de ações com base nas teclas pressionadas. Isso é particularmente útil quando você deseja desencadear eventos específicos ao pressionar certas teclas, como "Enter" ou "Esc".

Por exemplo, ao usar a diretiva @keyup.enter, você está vinculando o manipulador de evento para ser chamado quando a tecla "Enter" for pressionada:

<template>
  <input @keyup.enter="handleEnterPress">
</template>

<script>
export default {
  methods: {
    handleEnterPress() {
      // Código a ser executado quando a tecla Enter for pressionada
    },
  },
};
</script>

Você também pode combinar modificadores de tecla para controlar múltiplas teclas pressionadas, como @keydown.ctrl.enter para verificar se a tecla "Ctrl" e "Enter" são pressionadas ao mesmo tempo.

Os Modificadores de Evento e Modificadores de Tecla tornam a manipulação de eventos no Vue.js mais flexível e poderosa, permitindo que você controle o comportamento dos eventos de acordo com suas necessidades específicas. Isso resulta em uma experiência de usuário mais rica e interativa.

Exemplos de Modificadores de Tecla:

.enter: Aciona o manipulador quando a tecla "Enter" é pressionada.
.tab: Aciona o manipulador quando a tecla "Tab" é pressionada.
.delete ou .backspace: Aciona o manipulador quando a tecla "Delete" ou "Backspace" é pressionada.
.esc: Aciona o manipulador quando a tecla "Esc" (Escape) é pressionada.
.space: Aciona o manipulador quando a tecla de espaço é pressionada.
.up: Aciona o manipulador quando a tecla de seta para cima é pressionada.
.down: Aciona o manipulador quando a tecla de seta para baixo é pressionada.
.left: Aciona o manipulador quando a tecla de seta para a esquerda é pressionada.
.right: Aciona o manipulador quando a tecla de seta para a direita é pressionada.
.ctrl: Aciona o manipulador quando a tecla "Ctrl" é pressionada.
.alt: Aciona o manipulador quando a tecla "Alt" é pressionada.
.shift: Aciona o manipulador quando a tecla "Shift" é pressionada.
.meta: Aciona o manipulador quando a tecla "Meta" (geralmente a tecla Command ou Windows) é pressionada.

Vue.JS utilizando Replit

https://replit.com/@370100961/BlankVue?v=1

Exercício I

https://forms.office.com/r/PYDTRX3bds

Ou Replit ou Github