Criptografando e Descriptografando textos com uso de form em Vue.js
Para criar um formulário utilizando o framework Vue.js dois conceitos são extremamente importantes. São eles métodos e a diretiva v-on:submit. Através desses dois conceitos o Vue.js consegue saber quando o botão de envio do formulário foi clicado e o que fazer quando isso acontecer.
Projeto já adicionado aos favoritos. Clique aqui para ver todos seus favoritos
Obrigado pela sua avaliação, deixe o seu feedback nos comentários :D
Introdução
No tópico anterior você aprendeu a importar o Vue.js, a criar e exibir propriedades utilizando o data bind unidirecional e bidirecional.
Neste curso você vai aprender a criar um formulário recebendo um texto digitado pelo usuário e a executar um método ao clicar no botão de envio.
Nosso Aplicativo
A aplicação que vamos criar pode ser vista na Figura 1.
![Aplicação que criptografa e descriptografa um texto](http://www.devmedia.com.br/arquivos/cursos/vue_metodos/aula1/image1.png)
O que vamos aprender?
Neste curso você aprenderá os seguintes conceitos:
- Métodos (methods);
- Diretivas
- v-on:submit;
- v-if;
O que são estes conceitos?
![Slide 1 Slide 1](http://www.devmedia.com.br/arquivos/cursos/vue_metodos/aula1/s1.png)
![Slide 1 Slide 1](http://www.devmedia.com.br/arquivos/cursos/vue_metodos/aula1/s2.png)
![Slide 1 Slide 1](http://www.devmedia.com.br/arquivos/cursos/vue_metodos/aula1/s3.png)
![Slide 1 Slide 1](http://www.devmedia.com.br/arquivos/cursos/vue_metodos/aula1/s4.png)
![Slide 1 Slide 1](http://www.devmedia.com.br/arquivos/cursos/vue_metodos/aula1/s5.png)
![Slide 1 Slide 1](http://www.devmedia.com.br/arquivos/cursos/vue_metodos/aula1/s6.png)
![Slide 1 Slide 1](http://www.devmedia.com.br/arquivos/cursos/vue_metodos/aula1/s7.png)
![Slide 1 Slide 1](http://www.devmedia.com.br/arquivos/cursos/vue_metodos/aula1/s8.png)
![Slide 1 Slide 1](http://www.devmedia.com.br/arquivos/cursos/vue_metodos/aula1/s9.png)
![Slide 1 Slide 1](http://www.devmedia.com.br/arquivos/cursos/vue_metodos/aula1/s10.png)
Por que são úteis?
![Slide 1 Slide 1](http://www.devmedia.com.br/arquivos/cursos/vue_metodos/aula1/s01.png)
![Slide 1 Slide 1](http://www.devmedia.com.br/arquivos/cursos/vue_metodos/aula1/s02.png)
![Slide 1 Slide 1](http://www.devmedia.com.br/arquivos/cursos/vue_metodos/aula1/s03.png)
![Slide 1 Slide 1](http://www.devmedia.com.br/arquivos/cursos/vue_metodos/aula1/s04.png)
![Slide 1 Slide 1](http://www.devmedia.com.br/arquivos/cursos/vue_metodos/aula1/s05.png)
![Slide 1 Slide 1](http://www.devmedia.com.br/arquivos/cursos/vue_metodos/aula1/s06.png)
![Slide 1 Slide 1](http://www.devmedia.com.br/arquivos/cursos/vue_metodos/aula1/s07.png)
![Slide 1 Slide 1](http://www.devmedia.com.br/arquivos/cursos/vue_metodos/aula1/s08.png)
![Slide 1 Slide 1](http://www.devmedia.com.br/arquivos/cursos/vue_metodos/aula1/s09.png)
![Slide 1 Slide 1](http://www.devmedia.com.br/arquivos/cursos/vue_metodos/aula1/s010.png)
Para que o Vue.js execute uma ação na aplicação através de uma diretiva é necessário que o método tenha sido declarado dentro do objeto Vue