Elementele de bază ale directivelor Vue.js

Directivele Vue.js sunt indicative speciale din marcaj care spun bibliotecii să facă ceva pentru un element DOM. Acestea sunt prefixate cu v- pentru a indica faptul că sunt atribute speciale furnizate de Vue. Directivele sunt una dintre caracteristicile de bază ale Vue.js, permițând dezvoltatorilor să manipuleze eficient DOM-ul.

În acest articol, vom explora elementele de bază ale directivelor Vue.js, acoperind cele mai frecvent utilizate directive și cum să le folosiți în aplicațiile dumneavoastră Vue.

Directive utilizate frecvent în Vue.js

Iată câteva dintre cele mai frecvent utilizate directive în Vue.js:

v-bind: Leagă dinamic unul sau mai multe atribute sau o componentă prop la o expresie.
v-model: Creează legături de date bidirecționale pentru introducerea formularului, zona de text și elementele selectate.
v-if: Redă condiționat un element sau componentă.
v-else: Oferă un bloc else pentru v-if.
v-else-if: Oferă un bloc else-if pentru v-if.
v-for: Redă o listă de elemente folosind o matrice sau un obiect.
v-on: Atașează elemente de ascultare a evenimentelor.
v-show: Comută vizibilitatea unui element pe baza unei expresii.
v-html: Actualizează HTML-ul interior al unui element.

v-bind: Legarea atributelor în mod dinamic

Directiva v-bind este folosită pentru a lega dinamic atribute sau proprietăți la o expresie. De exemplu, puteți lega atributul src al unui element img la o proprietate de date:

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

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

Scurtarea pentru v-bind este pur și simplu două puncte (:), astfel încât exemplul de mai sus poate fi rescris ca:

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

v-model: Legare bidirecțională de date

Directiva v-model este folosită pentru a crea legături de date bidirecționale pe elementele de intrare din formular. Păstrează elementul de intrare și proprietatea datelor sincronizate:

<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 și v-else: Redare condiționată

Directivele v-if, v-else-if și v-else sunt folosite pentru redarea condiționată a elementelor. Acestea vă permit să randați condiționat elemente pe baza evaluării unei expresii:

<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: Redarea listei

Directiva v-for este folosită pentru a reda o listă de elemente prin iterare peste o matrice sau obiect. Fiecare element din matrice poate fi redat folosind o buclă:

<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: gestionarea evenimentelor

Directiva v-on este folosită pentru a atașa ascultători de evenimente la elementele DOM. Puteți gestiona interacțiunile utilizatorului, cum ar fi clicurile, introducerea și multe altele:

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

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

Scurtarea pentru v-on este simbolul la (@), astfel încât exemplul de mai sus poate fi rescris ca:

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

v-show: Comutați Vizibilitatea

Directiva v-show este folosită pentru a comuta vizibilitatea unui element pe baza unei expresii. Spre deosebire de v-if, nu elimină elementul din DOM; comută doar proprietatea CSS display:

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

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

v-html: Redarea HTML

Directiva v-html este folosită pentru a actualiza HTML-ul interior al unui element. Este util atunci când trebuie să redați HTML brut în componentele Vue:

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

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

Concluzie

Directivele Vue.js oferă modalități puternice de a manipula DOM și de a crea aplicații web dinamice și interactive. Înțelegerea elementelor de bază ale directivelor Vue.js precum v-bind, v-model, v-if, v-for, v-on, v-show și v-html sunt esențiale pentru orice dezvoltator Vue. Stăpânind aceste directive, puteți construi aplicații mai robuste și mai bogate în funcții cu Vue.js.

vue directive v-bind v-model v-if v-for v-on v-show v-html reactivitate date eveniment condiționat randare