amandamatar / notesapp

NotesApp

Segundo Projeto do Curso: The Vue 3 Bootcamp - The Complite Developer Guide

Esse repostório de estudos tem o objetivo de desenvolver conhecimentos teórico e prático sobre o Vue 3.

O que vimos?

• O objetivo desse projeto é criar uma página Web em que o cliente possa escrever notas.
• Neste projeto o professor propõe o desenvolvimento da aplicação focado no que chama de Vue Directives.
• Neste projeto desenvolvemos uma página Web onde o cliente pode adicionar notas. Para isso, existem algumas regras de negócio, como o número de caracteres minimo. Além disso, nessas notas o cliente encontra: seu texto, a data de lançamento da nota.
• Também foi pensado em um layout simples, porém estiloso, então foi usado algumas funções do JavaScript porém voltado para o Vue 3, como o v-if, v-show, v-for...
• No desenvolvimento lidamos com outros aspectos importantes como o estabelecimento uma key para melhor controle de dados das notas, como também foi pensado a adição de uma Error Handling.

Note

Veja adiante as imagens do template renderizado.

Confira o que mais foi aplicado neste projeto:

• Building the HTML and CSS
• Conditional Rendering With v-if
• Two Way Binding With v-model
• Event Handling By Creating a New Note
• Iteratively Rendering DOM Elements With v-for
• The Importances of a Key
• Adding Error Handling

Veja o resultado da página Web rederizado

🙂

Abaixo você confere dicas do professor:

This template should help get you started developing with Vue 3 in Vite.

Recommended IDE Setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Customize configuration

See Vite Configuration Reference.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Compile and Minify for Production

npm run build