Directives no Vue.js permitem que você aplique comportamentos especiais aos elementos no DOM. Eles são prefixados com a v- sintaxe e são usados para manipular o DOM, lidar com eventos, renderizar elementos condicionalmente e muito mais. O Vue.js fornece vários recursos integrados, directives como, , e, que abrangem uma ampla variedade de casos de uso comuns. v-if v-for v-bind v-on
Aqui estão alguns comuns directives no Vue.js:
1. Diretiva: Esta diretiva é usada para renderizar condicionalmente um elemento com base em uma condição. v-if
Exemplo:
<div v-if="isShow">This element is only displayed if isShow is true.</div>
2. Diretiva: Esta diretiva é usada para iterar sobre um array ou um objeto e criar os elementos correspondentes. v-for
Exemplo:
<ul>
<li v-for="item in items">{{ item }}</li>
</ul>
3. Diretiva: Esta diretiva é usada para vincular o valor de uma expressão a um atributo ou propriedade de um elemento. v-bind
Exemplo:
<img v-bind:src="imageUrl">
4. Diretiva: Esta diretiva é usada para ouvir e manipular eventos em um elemento. v-on
Exemplo:
<button v-on:click="handleClick">Click me!</button>
5. Diretiva: Esta diretiva cria uma ligação bidirecional entre um elemento de entrada e uma propriedade de dados. v-model
Exemplo:
<input v-model="message">
Estes são apenas alguns básicos directives em Vue.js. Você também pode criar seu próprio costume directives para executar comportamentos específicos em seu aplicativo Vue.js.