Podstawy dyrektyw Vue.js

Dyrektywy Vue.js to specjalne tokeny w znacznikach, które nakazują bibliotece wykonanie czegoś z elementem DOM. Są one poprzedzone prefiksem v-, aby wskazać, że są to specjalne atrybuty dostarczane przez Vue. Dyrektywy są jedną z podstawowych funkcji Vue.js, umożliwiającą programistom wydajną manipulację DOM.

W tym artykule przyjrzymy się podstawom dyrektyw Vue.js, omówieniu najczęściej używanych dyrektyw i sposobowi ich wykorzystania w aplikacjach Vue.

Często używane dyrektywy w Vue.js

Oto niektóre z najczęściej używanych dyrektyw w Vue.js:

• v-bind: Dynamicznie wiąże jeden lub więcej atrybutów lub właściwość komponentu z wyrażeniem.
• v-model: Tworzy dwukierunkowe powiązanie danych w polach wprowadzania danych formularza, obszarze tekstowym i elementach zaznaczenia.
• v-if: Warunkowo renderuje element lub komponent.
• v-else: Zapewnia blok else dla v-if.
• v-else-if: Udostępnia blok else-if dla v-if.
• v-for: Renderuje listę elementów za pomocą tablicy lub obiektu.
• v-on: Dołącza nasłuchiwacze zdarzeń do elementów.
• v-show: Przełącza widoczność elementu na podstawie wyrażenia.
• v-html: Aktualizuje wewnętrzny kod HTML elementu.

v-bind: Dynamiczne wiązanie atrybutów

Dyrektywa v-bind służy do dynamicznego wiązania atrybutów lub właściwości z wyrażeniem. Na przykład możesz powiązać atrybut src elementu img z właściwością danych:

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

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

Skrót dla v-bind to po prostu dwukropek (:), więc powyższy przykład można zapisać w następujący sposób:

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

v-model: Dwukierunkowe wiązanie danych

Dyrektywa v-model służy do tworzenia dwukierunkowego powiązania danych w elementach wejściowych formularza. Utrzymuje element wejściowy i właściwość danych w synchronizacji:

<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: renderowanie warunkowe

Dyrektywy v-if, v-else-if i v-else służą do warunkowego renderowania elementów. Umożliwiają warunkowe renderowanie elementów na podstawie oceny wyrażenia:

<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: Renderowanie listy

Dyrektywa v-for służy do renderowania listy elementów poprzez iterowanie po tablicy lub obiekcie. Każdy element w tablicy można renderować za pomocą pętli:

<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: Obsługa zdarzeń

Dyrektywa v-on służy do dołączania nasłuchiwaczy zdarzeń do elementów DOM. Możesz obsługiwać interakcje użytkownika, takie jak kliknięcia, dane wejściowe i inne:

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

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

Skrótem dla v-on jest symbol at (@), więc powyższy przykład można zapisać w następujący sposób:

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

v-show: Przełącz widoczność

Dyrektywa v-show służy do przełączania widoczności elementu na podstawie wyrażenia. W przeciwieństwie do v-if, nie usuwa elementu z DOM; przełącza jedynie właściwość CSS display:

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

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

v-html: Renderowanie HTML

Dyrektywa v-html służy do aktualizacji wewnętrznego kodu HTML elementu. Jest przydatna, gdy trzeba renderować surowy kod HTML w komponentach Vue:

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

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

Wniosek

Dyrektywy Vue.js zapewniają potężne sposoby manipulowania DOM i tworzenia dynamicznych i interaktywnych aplikacji internetowych. Zrozumienie podstaw dyrektyw Vue.js, takich jak v-bind, v-model, v-if, v-for, v-on, v-show i v-html, jest niezbędne dla każdego programisty Vue. Opanowanie tych dyrektyw pozwoli Ci tworzyć bardziej solidne i bogate w funkcje aplikacje za pomocą Vue.js.