6. Interligações em formulários (Introdução ao Vue.js)
Nesse tópico, vamos aprender como realizar interligações em formulários.
Se você caiu de paraquedas aqui, saiba que esse post faz parte de uma série de tópicos sobre como aprender os conceitos básicos do Vue.js criando um Gerador de Memes.
Além disso, se você ficou com dúvidas sobre como resolver o desafio do 5. Interligações de atributos. Segue o código do desafio resolvido no Github para você entender :)
Interligações em formulários
Vamos aprender como realizar interligações em formulários.
Objetivo
Vamos adicionar um input que será utilizado para escrever sobre a imagem e realizar essa conexão com o que foi digitado.
Código inicial — Criar o CSS
Vamos criar dentro da pasta assets/css/ um arquivo chamado style.css e colocar o seguinte código
Incluir meta tags e bootstrap 4
E no nosso index.html, vamos alterar o conteúdo dentro do head
para incluir as meta tags, o tema lux do bootstrap 4 e nosso css.
Bootstrap 4 — Theme Lux
Pode ficar a vontade para trocar de tema do Bootstrap 4 tem várias opções no https://bootswatch.com/
Customizar layout e adicionar input
Também vamos alterar todo nosso conteúdo dentro do body
pelo seguinte
Se tudo deu certo o resultado vai ser esse do Layout
Agora precisamos também adicionar a tag <p>
acima da imagem que vai receber o Texto do input
Adicionar tag <p>
acima da tag <img>
Problema
Como fazer a conexão entre o que digitamos no input e o texto acima da imagem?
Solução
Precisamos fazer uma interligação entre o input
e o elemento <p>
acima da nossa imagem usando a diretiva v-model
do Vue.
Diretiva v-model
- Você pode usar a diretiva
v-model
para criar interligações de mão dupla (two-way data binding) entre os dados e elementos como input, textarea e select de formulários.
Isso significa quando você digitar algo no input
vai ser alterado em sua view
também.
Então vamos fazer essa conexão em três passos
- No nosso
main.js
vamos adicionar abaixo do objetoimage
um objetotext: { top: '' }
que vai receber o que digitarmos noinput
2. No nosso index.html no lugar do texto estático Top Text
vamos colocar a expressão{{ text.top }}
que logo vai estar conectado com o input
3. Nosso input precisa saber que estamos conectando os dados do text.top
com ele, então vamos usar a diretiva v-model
e especificar o valor dela que será v-model="text.top"
Resultado
Quando você digitar algo no input ele vai aparecer também na imagem ao lado.
Vamos também agora alterar nossa fonte.
Alterar a fonte
- Escolher uma fonte diferente para o texto do meme — Google Fonts.
Alterar a fonte — Passion One
No meu caso eu utilizei a fonte Passion One, mas você pode escolher outra se quiser no Google Fonts.
- Basta adicionar dentro da tag
<head>
o link para fonte no nosso index.html
- E também ir na classe
.text
e adicionar ofont-family: 'Passion One'
ou o nome da fonte que você escolheu.
Resultado
Agora tá melhor com essa fonte. :D
6. Interligações em formulários — (O que aprendemos?)
- A diretiva
v-model
permite utilizar interligações de mão dupla (two-way data binding).
6º DESAFIO
- Adicionar um input do tipo texto, abaixo do top input text com o placeholder =
Bottom text
. - Adicionar uma propriedade chamada
bottom
, dentro do objetotext
. - Adicionar uma tag
<p>
abaixo da imagem com a classe"fixed-bottom text"
. - Realizar o two-way data binding
v-model
entre oinput
e essa tag<p>
Resultado esperado do desafio
Agora tá ficando divertido KKKKKKKK, depois que você completar acompanhe o próximo post.
Próximo post
7. Manipulação de eventos (Introdução ao Vue.js)