Middle+

Fale sobre as diretivas no Vue.js: as mais utilizadas

sobes.tech IA

Resposta da IA

No Vue.js, as diretivas são atributos especiais com o prefixo v-, que expandem o HTML e permitem vincular dados ao DOM.

As diretivas mais usadas:

v-bind — liga atributos HTML aos dados do componente. Por exemplo, v-bind:href="url" define dinamicamente o link.
v-model — ligação bidirecional de dados para formulários (input, textarea, select).
v-if — renderização condicional do elemento, o elemento só é adicionado ao DOM se a condição for verdadeira.
v-else / v-else-if — complementos ao v-if para condições alternativas.
v-for — renderiza uma lista de elementos com base em um array ou objeto.
v-on — escuta eventos, por exemplo, v-on:click="handleClick".

Exemplo de uso:

<template>
  <a v-bind:href="link">Link</a>
  <input v-model="text" />
  <div v-if="isVisible">Mostra-se se isVisible for verdadeiro</div>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
  <button v-on:click="doSomething">Clique em mim</button>
</template>

Anterior Próximo