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