Sintaxe de Templates

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

Internamente, o Vue compila os templates dentro de funções de renderização do DOM. Combinado com o sistema de reatividade, o Vue é capaz de identificar a menor quantidade possível de componentes para serem “re-renderizados” e aplica o mínimo possível de manipulações do DOM ao perceber uma mudança no estado da aplicação.

Se você é familiarizado com os conceitos de Virtual DOM e prefere o poder do JavaScript puro, também é possível escrever diretamente funções de renderização ao invés de utilizar templates, inclusive podendo contar com o suporte opcional para JSX nestas funções.

Interpolações

Texto

O mais básico data binding, interpolando texto com a sintaxe “Mustache” (chaves duplas):

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

A tag mustache vai ser trocada pelo valor da propriedade msg do objeto de dados correspondente. Esse texto também reagirá sempre que a propriedade msg for modificada.

Você também pode realizar interpolações únicas (não são atualizadas se o objeto é modificado no futuro) através da diretiva v-once, mas lembre-se que esse comportamento afetará qualquer binding realizado no mesmo nó:

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

HTML

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

<div v-html="rawHtml"></div>

Os conteúdos deste div serão substituídos com o valor da propriedade rawHtml, interpretada como HTML puro - data bindings 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 baseada em templates através de String. Ao invés disso, componentes são a maneira indicada para a composição e reutilização de elementos de UI.

Dinamicamente renderizar HTML sem precauções pode ser muito perigoso, pois pode levar a ataques XSS. Utilize a interpolação de HTML apenas em conteúdos que você confia e nunca em conteúdos enviados por seus 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>

Isso também funciona com atributos Boolean - neste caso, o atributo só é renderizado se a condição gerar um valor verdadeiro:

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

Expressões JavaScript

Até aqui nós apenas estivemos vinculando propriedades simples diretamente em nossos templates. Mas o Vue.js suporta todo o poder das expressões JavaScript dentro de qualquer tipo de data binding:

{{ number + 1 }}
{{ ok ? 'SIM' : 'NÃO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>

Essas expressões serão compiladas como JavaScript no escopo de dados da instância do Vue. A única restrição é que cada binding pode conter apenas uma expressão, então os códigos a seguir são exemplos de coisas que NÃO funcionarão:

<!-- isso é uma atribuição, e não uma expressão -->
{{ var a = 1 }}
<!-- controle de fluxo também não funciona, utilize expressões ternárias -->
{{ if (ok) { return message } }}

Expressões em templates são restritas a um ambiente controlado e somente possuem acesso a uma lista de variáveis globais permitidas, como Math e Date. Você não deve tentar acessar variáveis globais definidas pelo usuário em uma expressão de template.

Diretivas

Diretivas são atributos especiais com o prefixo v-. Espera-se que os valores atribuídos às diretivas sejam uma simples expressão Javascript (com a excessão do v-for, que será discutido posteriormente). O trabalho de uma diretiva é aplicar reativamente efeitos colaterais ao DOM, ou seja, realizar algum efeito quando o valor da expressão é modificado. Vamos revisar o simples exemplo que vimos na introdução:

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

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 a diretiva. Por exemplo, a diretiva v-bind é utilizada para atualizar um atributo HTML reativamente:

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

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

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

<a v-on:click="doSomething">

Aqui o valor é o nome do evento DOM que ela está escutando. Falaremos sobre gerenciamento de eventos com mais detalhes em breve.

Modificadores

Modificadores são sufixos especiais denotados por um ponto, que indicam que aquela diretiva deve ser vinculada de alguma maneira especial. Por exemplo, o modificador .prevent indica que o v-on chamará a função event.preventDefault() quando o evento for disparado:

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

Veremos mais casos de uso de modificadores quando explorarmos mais v-on e v-model.

Abreviações

O prefixo v- serve como dica visual para identificar atributos específicos do Vue nos templates. Isso é útil quando se está utilizando o Vue para aplicar comportamento dinâmico em HTML existente, mas você pode achar um pouco verboso se precisar usar frequentemente. Em casos como no desenvolvimento de uma SPA, o uso desse prefixo é menos importante, já que o Vue efetivamente gerencia todos os templates. Assim, podemos utilizar abreviações especiais para as duas diretivas mais utilizadas, que são o v-bind e o v-on:

Abreviação para v-bind

<!-- sintaxe completa -->
<a v-bind:href="url"></a>
<!-- abreviação -->
<a :href="url"></a>

Abreviação para v-on

<!-- sintaxe completa -->
<a v-on:click="doSomething"></a>
<!-- abreviação -->
<a @click="doSomething"></a>

Essas abreviações podem parecer um pouco diferentes do HTML normalmente utilizado, mas os caracteres : e @ são válidos para nomes de atributos em todos os navegadores que o Vue.js suporta. Além disso, não aparecerão no código renderizado. Essa sintaxe é totalmente opcional, mas você provavelmente vai apreciar quando utilizar diretivas frequentemente.