Vue.js

Preparo

• Extensões VSCode: Recomenda-se Vue(official-volar) e Vetur
• Instalar Vue.js (npm): npm create vue@latest
• Instalar vite: npm install vite
• Executar projeto: npm run dev

Características

• Single-file component: Web component em arquivo único (HTML, CSS e TS);
• Arquitetura M-V-VM: Model(dados via BD, API) - ViewModel(intermediador de diretivas, expressions, interpolations) - View(interface HTML);

Estrutura de arquivos

• dist/:
  • assets/: Arquivos estáticos de anexos (CSS, imagens, etc)
  • index.html:
• node_modules/: Pacotes do npm
• public/: Arquivos estáticos da aplicação (client-side)
• src/: Source, arquivos da aplicação (server-side)
  • assets/: Arquivos estáticos de anexos (CSS, imagens, etc)
  • components/: Componentes do projeto (Arquivo.vue)
    • icons/: Ícones de componentes
  • App.vue: Componente pai,principal,global do projeto
  • main.js: Arquivo JS do componente principal
• index.html:

Propriedades template HTML

• {{ variavel }}: Mostra variável da model
• v-model="nomeInput": Envia valor à view
• v-on:click="nomeEvento": Chama evento à view
• <nomeComponente/>: Componente importado

Propriedades script JS

• import: Importa outros componentes gerais da aplicação
• export: Exporta o componente para a aplicação geral
• name: Nome do componente em questão
• components: Componentes que serão importados
• data(): Envia dados para view
• methods: Funções da aplicação
• .createApp(nomeApp).mount(localCriacao): Cria aplicação
• created(): Funções executadas após criação do componente
• mounted(): Funções executadas após montagem do componente (ocorre depois de created)

Sintaxe de Componente.vue

<template>
    Visual do componente (HTML)
    - Estrutura visual do componente (formulários, cabeçalhos, rodapés, botões, etc)
</template>

<script>
    Código programável do componente (JS)
    - Importar outros componentes
    - Exportar componente e seus dados para a aplicação
</script>

<style>
    Estilização do componente (CSS)
    - Coloração, tamanhos, etc
</style>