Vue.js: Formulários

Para criar um formulário com a exibição de mensagens de validação é importante aprender os conceitos métodos, v-on:submit e v-if

Para aprender a utilizar métodos e as diretivas v-on:submit e v-if, criaremos a aplicação que será vista nesta aula. Através dela vamos aprender na prática esses conceitos.

Quando o usuário clica em um botão queremos que uma função seja executada. Para que a diretiva v-on:submit reconheça essa função, ela precisa ser criada dentro do objeto do tipo Vue, por isso ela é chamada de método.

Quando o usuário clica em um botão queremos que um método seja executado. É através da diretiva v-on:submit que o Vue.js vai entender que o botão foi clicado.

Existem alguns casos em que um elemento só deve ser exibido baseado em uma condição. Quando for esse o caso a diretiva v-if será a solução.

O assunto dessa aula é a estrutura do nosso projeto, bem como as telas da nossa aplicação e a divisão de arquivos e pastas.

Antes de colocar em prática os conceitos deste curso (métodos, v-on:submit e v-if) disponibilizamos o projeto base que vai acelerar o processo de aprendizagem. Nesta aula vamos conhecer este projeto.

O primeiro passo da nossa aplicação é criar o objeto Vue e as propriedades que usaremos no nosso projeto. Para isso criaremos um arquivo que vai conter todo o código JavaScript.

Com o objeto Vue criado, o próximo passo é criar os métodos para criptografar e descriptografar o texto.

Para finalizamos nossa aplicação vamos inserir a diretiva v-if nos boxes para exibi-los condicionalmente.