O objeto data no Vue
A base de um componente são os dados
que manipularemos.
Esses dados são armazenados em um objeto
especial data. Este objeto
deve ser retornado como resultado
de um método específico:
export default {
data() {
return {
}
}
}
Vamos armazenar na propriedade do objeto de dados algum texto:
data() {
return {
text1: '111',
text2: '222',
}
}
Os dados armazenados podem ser exibidos na visualização. Isso é feito entre chaves duplas, onde é escrito o nome da propriedade cujo valor queremos exibir. Vamos exibir os valores das nossas propriedades:
<template>
{{ text1 }}
{{ text2 }}
</template>
E agora vamos fazer com que cada uma das nossas mensagens seja exibida em seu próprio parágrafo:
<template>
<p>{{ text1 }}</p>
<p>{{ text2 }}</p>
</template>
Suponha que em data estejam armazenados o nome
e sobrenome do usuário:
data() {
return {
name: 'john',
surn: 'smit',
}
}
Exiba cada propriedade em
uma tag div separada.
