Vue.js

# Sintaxe de Templates

O Vue.js utiliza uma sintaxe de templates baseada em HTML que permite que você vincule declarativamente o DOM renderizado aos dados da instância do componente que existe por baixo. Todos os templates do Vue.js são compostos por HTML válido que pode ser interpretado por navegadores compatíveis com as especificações e também por parsers de HTML.

Internamente, o Vue compila os templates em funções de renderização do Virtual DOM. Combinado com o sistema de reatividade, Vue é capaz de identificar de forma inteligente a menor quantidade possível de componentes a serem “re-renderizados” e aplica o mínimo possível de manipulações do DOM quando o estado da aplicação muda.

Se você é familiarizado com os conceitos de Virtual DOM e prefere o poder do JavaScript puro, você também pode escrever funções de renderização ao invés de templates, com suporte opcional ao JSX.

# Interpolações

# Texto

A forma mais básica de vinculação de dados é interpolação de texto utilizando a sintaxe "Mustache" (chaves duplas):

<span>Mensagem: {{ msg }}</span>
1

As chaves duplas serão substituídas pelo valor da propriedade msg da instância do componente correspondente. Esse texto também será atualizado sempre que a propriedade msg for modificada.

Você também pode realizar interpolações únicas que não são atualizadas quando os dados mudam através da diretiva v-once, mas mantenha em mente que isso afetará qualquer vinculação realizada no mesmo nó:

<span v-once>Este valor nunca será modificado: {{ msg }}</span>
1

# HTML Puro

As chaves duplas interpretam os dados como texto simples, não HTML. Para que você exiba HTML, utilize a diretiva v-html:

<p>Interpolação textual: {{ rawHtml }}</p>
<p>Diretiva v-html: <span v-html="rawHtml"></span></p>
1
2

Veja o exemplo Renderizando v-html por vuejs-br (@vuejs-br) no CodePen.

Os conteúdos do span serão substituídos pelo valor da propriedade rawHtml, interpretada como HTML puro - vínculos de dados são ignorados. Note que você não pode utilizar a diretiva v-html para compor templates parciais, porque o Vue não é uma engine de templates baseada em Strings. Ao invés disso, componentes são a maneira indicada como unidade fundamental de composição e reutilização de elementos de interface.

TIP

Renderizar dinamicamente HTML arbitrário no seu site pode ser muito perigoso, pois pode facilmente levar a ataques XSS (opens new window). Utilize a interpolação de HTML apenas em conteúdos que você confia e nunca em conteúdos enviados por usuários.

# Atributos

Chaves duplas não podem ser usadas em atributos HTML. Para isso, utilize a diretiva v-bind:

<div v-bind:id="dynamicId"></div>
1

Se o valor vinculado for null ouundefined, o atributo não será incluído no elemento renderizado.

No caso de atributos booleanos, onde sua mera existência implica em true, v-bind funciona um pouco diferente. Por exemplo:

<button v-bind:disabled="isButtonDisabled">Botão</button>
1

Se isButtonDisabled possui um valor null ou undefined, o atributo disabled nem mesmo será incluído no elemento <button> renderizado.

O atributo disabled será incluído seisButtonDisabled tiver um valor verdadeiro. Também será incluído se o valor for uma string vazia, mantendo a consistência com <button disabled="">. Para outros valores falsos, o atributo será omitido.

# Usando Expressões JavaScript

Até aqui nós apenas vinculamos valores a chaves simples em nossos templates. Mas o Vue.js suporta todo o poder das expressões JavaScript dentro de todo tipo de vinculação de dados:

{{ number + 1 }}

{{ ok ? 'SIM' : 'NÃO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>
1
2
3
4
5
6
7

Estas expressões serão compiladas como JavaScript no escopo de dados da atual instância ativa do Vue. A única restrição é que cada vínculo pode conter apenas uma expressão - desta forma, os códigos a seguir são exemplos de coisas que NÃO funcionarão:

<!-- isso é uma atribuição, não uma expressão: -->
{{ var a = 1 }}

<!-- ifs também não funcionarão, use expressões ternárias -->
{{ if (ok) { return message } }}
1
2
3
4
5

# Diretivas

Diretivas são atributos especiais com o prefixo v-. Espera-se que os valores atribuídos às diretivas sejam uma única expressão JavaScript (com a exceção do v-for e do v-on, que serão discutidos posteriormente). O trabalho de uma diretiva é aplicar reativamente efeitos colaterais ao DOM quando o valor de sua expressão muda. Vamos revisar o exemplo que vimos na introdução:

<p v-if="seen">Agora você me vê</p>
1

Aqui, a diretiva v-if irá remover/inserir o elemento <p> baseado na veracidade do valor da expressão seen.

# Parâmetros

Algumas diretivas podem aceitar um parâmetro, denotado pelo símbolo de dois pontos após o nome da diretiva. Por exemplo, a diretiva v-bind é utilizada para atualizar um atributo HTML reativamente:

<a v-bind:href="url"> ... </a>
1

Aqui, href é o parâmetro que informará a diretiva v-bind para interligar o atributo href do elemento ao valor da expressão url.

Outro exemplo é a diretiva v-on, que observa eventos do DOM:

<a v-on:click="doSomething"> ... </a>
1

Aqui, o argumento é o nome do evento do DOM que ela deverá escutar. Falaremos sobre gerenciamento de eventos em mais detalhes também.

# Argumentos Dinâmicos

Também é possível usar uma expressão JavaScript no argumento de uma diretiva envolvendo-a em colchetes:

<!--
Note que existem algumas restrições à expressão do argumento, como explicado na seção
"Restrições da Expressão de Argumento Dinâmico" abaixo.
-->
<a v-bind:[attributeName]="url"> ... </a>
1
2
3
4
5

Aqui, attributeName será dinamicamente processado como uma expressão JavaScript, e seu valor processado será usado como o valor final para o argumento. Por exemplo, se a instância o seu componente possui uma propriedade de dados attributeName cujo valor é "href", então essa ligação irá ser equivalente a v-bind:href.

Da mesma forma, você pode usar argumentos dinâmicos para vincular um manipulador (handler) a um nome de evento dinâmico:

<a v-on:[eventName]="doSomething"> ... </a>
1

Neste exemplo, quando o valor de eventName for "focus", por exemplo, v-on:[eventName] será equivalente a v-on:focus.

# Modificadores

Modificadores são sufixos especiais denotados por um ponto ., que indicam que a diretiva deve ser aplicada de alguma maneira especial. Por exemplo, o modificador .prevent diz para a diretiva v-on chamar event.preventDefault() no evento desencadeado:

<form v-on:submit.prevent="onSubmit">...</form>
1

Você verá outros exemplos de modificadores posteriormente, para a diretiva v-on e para a diretiva v-model, quando explorarmos tais recursos.

# Abreviações

O prefixo v- serve como uma dica visual para identificar atributos específicos do Vue em seus templates. Isso é útil quando você está utilizando Vue.js para aplicar comportamentos dinâmicos a alguma marcação existente, mas pode ser verboso para algumas diretivas usadas com frequência. Ao mesmo tempo, a necessidade do prefixo v- se torna menos importante quando você está construindo uma SPA (opens new window), onde o Vue gerencia todas os templates. Desta forma, o Vue fornece abreviações especiais para duas das diretivas mais usadas, v-bind e v-on:

# Abreviação de v-bind

<!-- sintaxe completa -->
<a v-bind:href="url"> ... </a>

<!-- forma abreviada -->
<a :href="url"> ... </a>

<!-- forma abreviada com argumento dinâmico -->
<a :[key]="url"> ... </a>
1
2
3
4
5
6
7
8

# Abreviação de v-on

<!-- sintaxe completa -->
<a v-on:click="doSomething"> ... </a>

<!-- forma abreviada -->
<a @click="doSomething"> ... </a>

<!-- forma abreviada com argumento dinâmico -->
<a @[event]="doSomething"> ... </a>
1
2
3
4
5
6
7
8

Eles podem parecer um pouco diferentes de HTML normal, mas : e @ são caracteres válidos para nomes de atributos e todos os navegadores que suportam o Vue podem lê-los corretamente. Além do mais, eles não aparecem na marcação renderizada final. A sintaxe abreviada é totalmente opcional, mas você provavelmente vai preferir utilizá-la quando aprender mais sobre seu uso posteriormente.

A partir da próxima página e em diante, iremos utilizar as formas abreviadas em nossos exemplos, já que é o uso mais comum para os desenvolvedores Vue.

# Ressalvas

# Restrições de Valores de Argumentos Dinâmicos

Espera-se que argumentos dinâmicos sejam avaliados resultando-se em uma String, com exceção do null. O valor especial null pode ser usado para explicitamente remover um vínculo. Qualquer outro valor que não seja uma String acionará um aviso.

# Restrições de Expressões de Argumentos Dinâmicos

Expressões de argumentos dinâmicos possuem algumas restrições de sintaxe por causa de determinados caracteres, como espaços e aspas, os quais são inválidos dentro de nomes de atributos HTML. Por exemplo, o seguinte é inválido:

<!-- Isto irá provocar um aviso do compilador. -->
<a v-bind:['foo' + bar]="value"> ... </a>
1
2

Nós recomendamos trocar quaisquer expressões complexas por dados computados, uma das partes mais fundamentais do Vue, que cobriremos em breve.

Quando estiver usando templates no DOM (templates escritos diretamente no arquivo HTML), você também deve evitar nomear suas chaves de argumentos com caracteres maiúsculos, já que os navegadores forçarão os nomes dos atributos a ficarem em minúsculas:

<!--
Isso será convertido em v-bind:[someattr] em templates no DOM.
A menos que você tenha uma propriedade "someattr" (totalmente em minúsculas) em sua instância, tal código não funcionará.
-->
<a v-bind:[someAttr]="value"> ... </a>
1
2
3
4
5

# Expressões JavaScript

Expressões de template são isoladas e possuem acesso apenas à uma lista de variáveis globais permitidas (opens new window), tais como Math e Date. Você não deve tentar acessar variáveis globais definidas pelo usuário em expressões de template.

← Propriedades de Dados e Métodos →