matheusvanzan / vuejs-notas Goto Github PK

Criar notas

• Botão + para criar uma nova nota
• Modal com formulario para adicionar nota

Editar notas

• Botão para editar uma nota
• Modal para editar o conteúdo da nota

Listar notas

• Lista de todas as notas existentes

Buscar notas

• Campo de busca para filtrar notas por seu titulo
• Notas devem ser filtradas dependendo do valor do filtro

notas-1

• Criar com Babel, Typescript, CSS PP
• Criar tambem sem class based para ver a diferença
• Uma pagina mostrando notas (lista local)
• Botão Excluir

notas-2

• Recriar com Router, Vuex
• Componente Nota (item da lista)
• Componente ListaNota
• Computed prop total de notas
• prop para passar dados da nota
• emmit para excluir uma nota

notas-3

• Bootstrap
• Fontawsome
• Dados de uma API (2 opções)
• Mostrar so inicio do conteudo

notas-4

• Mostrar conteudo da nota ao clique
• Editar conteudo da nota
• Salvar a qualquer mudança (sem botão salvar)

Mostrar uctools

• Valores mudando
• Vue toolbar

Create vue app $ npm install -g @vue/cli $ vue create frontend

bootstrapvue https://bootstrap-vue.org/docs $ npm install vue bootstrap-vue bootstrap

fontawsome https://github.com/FortAwesome/vue-fontawesome $ npm i --save @fortawesome/fontawesome-svg-core $ npm i --save @fortawesome/free-solid-svg-icons $ npm i --save @fortawesome/vue-fontawesome $ npm i --save @fortawesome/free-brands-svg-icons $ npm i --save @fortawesome/free-regular-svg-icons

vue dev tools https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=pt-BR

Props

• Validação

Templates

• deve ter apenas um elemento raiz

Diretivas vue

• v-bind - Atalho :
• v-text substitui o conteúdo de inner html
• v-on para eventos (input) - Atalho @
• v-show
• v-model

Vue slot