Основи директив Vue.js

Директиви Vue.js — це спеціальні маркери в розмітці, які вказують бібліотеці робити щось з елементом DOM. Вони мають префікс v-, щоб вказати, що це спеціальні атрибути, надані Vue. Директиви є однією з основних функцій Vue.js, що дозволяє розробникам ефективно маніпулювати DOM.

У цій статті ми вивчимо основи директив Vue.js, охоплюючи директиви, які найчастіше використовуються, і те, як їх використовувати у своїх програмах Vue.

Часто використовувані директиви у Vue.js

Ось деякі з найбільш часто використовуваних директив у Vue.js:

v-bind: Динамічно прив’язує один або більше атрибутів або властивість компонента до виразу.
v-model: Створює двосторонню прив’язку даних для введення форми, текстового поля та елементів вибору.
v-if: Умовно відображає елемент або компонент.
v-else: Надає блок else для v-if.
v-else-if: Надає блок else-if для v-if.
v-for: Відображає список елементів за допомогою масиву або об’єкта.
v-on: Прикріплює слухачі подій до елементів.
v-show: Перемикає видимість елемента на основі виразу.
v-html: Оновлює внутрішній HTML елемента.

v-bind: динамічне прив’язування атрибутів

Директива v-bind використовується для динамічного прив’язування атрибутів або властивостей до виразу. Наприклад, ви можете прив’язати атрибут src елемента img до властивості даних:

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

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

Скорочення v-bind — це просто двокрапка (:), тому наведений вище приклад можна переписати так:

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

v-model: Двостороннє прив’язування даних

Директива v-model використовується для створення двосторонньої прив’язки даних до вхідних елементів форми. Він синхронізує вхідний елемент і властивість даних:

<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 та v-else: умовне відтворення

Директиви v-if, v-else-if і v-else використовуються для умовного відтворення елементів. Вони дозволяють умовно відтворювати елементи на основі оцінки виразу:

<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: рендеринг списку

Директива v-for використовується для візуалізації списку елементів шляхом ітерації по масиву або об’єкту. Кожен елемент у масиві можна відобразити за допомогою циклу:

<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: Обробка подій

Директива v-on використовується для приєднання слухачів подій до елементів DOM. Ви можете обробляти такі дії користувача, як клацання, введення тощо:

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

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

Скорочення v-on — це символ at (@), тому наведений вище приклад можна переписати так:

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

v-show: перемкнути видимість

Директива v-show використовується для перемикання видимості елемента на основі виразу. На відміну від v-if, він не видаляє елемент із DOM; він лише перемикає властивість CSS display:

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

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

v-html: відтворення HTML

Директива v-html використовується для оновлення внутрішнього HTML елемента. Це корисно, коли вам потрібно відобразити необроблений HTML у ваших компонентах Vue:

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

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

Висновок

Директиви Vue.js надають потужні способи маніпулювання DOM і створення динамічних та інтерактивних веб-додатків. Розуміння основ директив Vue.js, таких як v-bind, v-model, v-if, v-for, v-on, v-show і v-html є важливими для будь-якого розробника Vue. Опанувавши ці директиви, ви зможете створювати більш надійні та багатофункціональні програми за допомогою Vue.js.

vue директиви v-bind v-model v-if v-for v-on v-show v-html реактивність дані подія умовний візуалізація