Noções básicas sobre diretivas Vue.js

As diretivas do Vue.js são tokens especiais na marcação que dizem à biblioteca para fazer algo com um elemento DOM. Elas são prefixadas com v- para indicar que são atributos especiais fornecidos pelo Vue. As diretivas são um dos principais recursos do Vue.js, permitindo que os desenvolvedores manipulem o DOM de forma eficiente.

Neste artigo, exploraremos os conceitos básicos das diretivas do Vue.js, abordando as diretivas mais comumente usadas e como usá-las em seus aplicativos Vue.

Diretivas comumente usadas em Vue.js

Aqui estão algumas das diretivas mais comumente usadas no Vue.js:

v-bind: Vincula dinamicamente um ou mais atributos ou uma propriedade de componente a uma expressão.
v-model: Cria vinculação de dados bidirecional em elementos de entrada de formulário, textarea e seleção.
v-if: Renderiza condicionalmente um elemento ou componente.
v-else: Fornece um bloco else para v-if.
v-else-if: Fornece um bloco else-if para v-if.
v-for: Renderiza uma lista de itens usando uma matriz ou objeto.
v-on: Anexa ouvintes de eventos aos elementos.
v-show: Alterna a visibilidade de um elemento com base em uma expressão.
v-html: Atualiza o HTML interno de um elemento.

v-bind: Atributos de ligação dinamicamente

A diretiva v-bind é usada para vincular dinamicamente atributos ou propriedades a uma expressão. Por exemplo, você pode vincular o atributo src de um elemento img a uma propriedade de dados:

<template>
  <img v-bind:src="imageSrc" alt="Dynamic Image" />
</template>

<script>
export default {
  data() {
    return {
      imageSrc: 'https://example.com/image.jpg'
    };
  }
};
</script>

A abreviação para v-bind é simplesmente dois pontos (:), então o exemplo acima pode ser reescrito como:

<img :src="imageSrc" alt="Dynamic Image" />

v-model: Ligação de dados bidirecional

A diretiva v-model é usada para criar vinculação de dados bidirecional em elementos de entrada de formulário. Ela mantém o elemento de entrada e a propriedade de dados sincronizados:

<template>
  <input v-model="message" placeholder="Type something..." />
  <p>You typed: {{ message }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  }
};
</script>

v-if, v-else-if e v-else: Renderização Condicional

As diretivas v-if, v-else-if e v-else são usadas para renderização condicional de elementos. Elas permitem que você renderize condicionalmente elementos com base na avaliação de uma expressão:

<template>
  <div v-if="isLoggedIn">Welcome back!</div>
  <div v-else-if="isGuest">Hello, Guest!</div>
  <div v-else>Please log in.</div>
</template>

<script>
export default {
  data() {
    return {
      isLoggedIn: false,
      isGuest: true
    };
  }
};
</script>

v-for: Renderização de lista

A diretiva v-for é usada para renderizar uma lista de itens iterando sobre um array ou objeto. Cada item no array pode ser renderizado usando um loop:

<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">{{ item }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3']
    };
  }
};
</script>

v-on: Tratamento de eventos

A diretiva v-on é usada para anexar ouvintes de eventos a elementos DOM. Você pode manipular interações do usuário, como cliques, entrada e mais:

<template>
  <button v-on:click="showAlert">Click Me</button>
</template>

<script>
export default {
  methods: {
    showAlert() {
      alert('Button clicked!');
    }
  }
};
</script>

A abreviação para v-on é o símbolo de arroba (@), então o exemplo acima pode ser reescrito como:

<button @click="showAlert">Click Me</button>

v-show: Alternar visibilidade

A diretiva v-show é usada para alternar a visibilidade de um elemento com base em uma expressão. Diferentemente de v-if, ela não remove o elemento do DOM; ela apenas alterna a propriedade CSS display:

<template>
  <div v-show="isVisible">This is visible!</div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  }
};
</script>

v-html: Renderizando HTML

A diretiva v-html é usada para atualizar o HTML interno de um elemento. Ela é útil quando você precisa renderizar HTML bruto em seus componentes Vue:

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

<script>
export default {
  data() {
    return {
      rawHtml: '<strong>Bold Text</strong>'
    };
  }
};
</script>

Conclusão

As diretivas Vue.js fornecem maneiras poderosas de manipular o DOM e criar aplicativos da web dinâmicos e interativos. Entender os conceitos básicos das diretivas Vue.js como v-bind, v-model, v-if, v-for, v-on, v-show e v-html é essencial para qualquer desenvolvedor Vue. Ao dominar essas diretivas, você pode construir aplicativos mais robustos e ricos em recursos com Vue.js.

vue diretivas v-bind v-model v-if v-for v-on v-show v-html reatividade dados evento condicional renderização