Встроенные директивы Vue3

Vue.js имеет несколько встроенных директив (Directives) для добавления определенного реактивного поведения или управления DOM в шаблонах.

Ниже перечислены часто используемые встроенные директивы в Vue.js:

Директива Пример использования Описание
v-text <p v-text="message"></p> Обновляет содержимое элементаtextContent, аналогично интерполяции{{ }}, но это односторонняя привязка.
v-html <div v-html="htmlContent"></div> Обновляет содержимое элементаinnerHTML, используется для вывода HTML.
v-model <input v-model="value"> Создаёт двустороннюю привязку данных на элементах управления формами, синхронизируя поля ввода со свойствами данных.
v-show <div v-show="isVisible"></div> Переключает отображение и видимость элемента в зависимости от истинности выражения, используя CSS-свойствоdisplayсвойством.
v-if <p v-if="isVisible">Visible</p> Условно рендерит элемент на основе истинности выражения; когда условие ложно, элемент удаляется из DOM.
v-else <p v-if="isVisible">Visible</p><p v-else>Not Visible</p> v-ifДополнительная директива для отображения резервного содержимого, когда условие ложно.
v-else-if <template v-if="type === 'A'"><p>Type A</p></template><template v-else-if="type === 'B'"><p>Type B</p></template> Используется последовательно послеv-ifиv-elseпосле, для проверки нескольких условий.
v-for <li v-for="(item, index) in items" :key="index">{{ item }}</li> Перебирает каждый элемент массива или объекта, генерируя соответствующее количество элементов.
v-on <button v-on:click="handleClick">Click me</button> Привязывает слушатель событий для прослушивания событий DOM; может быть сокращено как@。
v-bind <img v-bind:src="imageSrc.html"> Динамически привязывает атрибуты HTML; может быть сокращено как:。
v-slot <template v-slot:header><h2>Header</h2></template> Синтаксис для именованных слотов, предоставляющий место для вставки содержимого дочернего компонента.
v-pre <div v-pre>{{ message }}</div> Пропускает процесс компиляции для этого элемента и всех его дочерних элементов; используется для отображения необработанных тегов Mustache.
v-cloak [v-cloak] { display: none; } Скрывает содержимое шаблона до тех пор, пока экземпляр Vue не завершит компиляцию, предотвращая отображение нескомпилированных тегов Mustache.
v-once <p v-once>{{ message }}</p> Отрисовывает элемент и компонент только один раз и не будет обновляться при последующих изменениях данных.
v-memo 
<div v-memo="[valueA, valueB]">
  ...
</div>

Кэширует поддерево шаблона.

Когда компонент повторно рендерится, еслиvalueAиvalueBвсе остаются неизменными, этот<div>и все обновления его дочерних элементов будут пропущены. Фактически, даже создание виртуальных DOM-узлов (vnodes) будет пропущено, потому что можно повторно использовать кэшированную копию поддерева.

v-text

  • Использование: <p v-text="message"></p>
  • Описание: ОбновляетtextContent, аналогично интерполяции{{ }}, но это односторонняя привязка. Его можно использовать для установки простого текстового содержимого элемента.

Пример

<p v-text="message"></p>

Пример

data() {
    return {
    message: 'Hello, Vue!'
    };
}

v-html

  • Использование: <div v-html="htmlContent"></div>
  • Описание: ОбновляетinnerHTML, используется для вывода содержимого, содержащего HTML-структуру. Следует уделить внимание безопасности, чтобы избежать XSS-атак.

Пример

<div v-html="htmlContent"></div>

Пример

data() {
    return {
        htmlContent: '<strong>Vue.js</strong> is awesome!'
    };
}

v-model

  • Использование: <input v-model="value">
  • Описание: Создаёт двустороннюю привязку данных на элементах управления формы, синхронизируя поля ввода со свойствами данных, и поддерживает несколько типов элементов управления формы.

Пример

<input type="text" v-model="message">

Пример

data() {
    return {
    message: ''
    };
}

v-show

  • Использование: <div v-show="isVisible"></div>
  • Описание: Переключает отображение и видимость элемента на основе истинности выражения, используя CSS-displayсвойство для управления видимостью элемента.

Пример

<div v-show="isVisible">Visible when true</div>

Пример

data() {
    return {
    isVisible: true
    };
}

v-if / v-else / v-else-if

  • Использование: <p v-if="isVisible">Visible</p><p v-else>Not Visible</p>
  • Описание: Условно отображает элемент на основе истинности выражения.v-elseиv-else-ifДаv-ifДополнительная директива для проверки нескольких условий.

Пример

<p v-if="isVisible">Видимый</p>
<p v-else>Не виден</p>

Пример

data() {
    return {
        isVisible: true
    };
}

v-for

  • Использование: <li v-for="(item, index) in items" :key="index">{{ item }}</li>
  • Описание: Перебирает каждый элемент массива или объекта, создавая соответствующее количество элементов, и поддерживает указание ключа для повышения эффективности рендеринга.

Пример

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

Пример

data() {
    return {
        items: ['Apple', 'Banana', 'Cherry']
    };
}

v-on (@)

  • Использование: <button v-on:click="handleClick">Click me</button>
  • Описание: Привязывает обработчик события для прослушивания событий DOM; может быть сокращена как@. Поддерживает модификаторы и динамические имена событий.

Пример

<button v-on:click="handleClick">Нажми меня</button>

Пример

methods: {
    handleClick() {
    alert('Кнопка нажата');
    }
}

v-bind ( : )

  • Использование: <img v-bind:src="imageSrc.html">
  • Описание: Динамически привязывает HTML-атрибуты; может быть сокращено как:. Используется для динамической установки атрибутов элемента, напримерsrc、hrefи т. д.

Пример

<img v-bind:src="imageSrc" alt="Vue Logo">

Пример

data() {
    return {
    imageSrc: 'https://vuejs.org/images/logo.png'
    };
}

v-slot

  • Использование: <template v-slot:header><h2>Header</h2></template>
  • Описание: Синтаксис для именованных слотов, предоставляющий место для вставки содержимого дочернего компонента; используется для распределения содержимого в пользовательских компонентах.

Пример

<BaseLayout>
    <template v-slot:header>
    <h2>Содержимое заголовка</h2>
    </template>
    <template v-slot:footer>
    <p>Содержимое футера</p>
    </template>
</BaseLayout>

Пример

// Определение компонента BaseLayout
Vue.component('BaseLayout', {
    template: `
    <div>
        <header><slot name="header"></slot></header>
        <main><slot></slot></main>
        <footer><имя слота="footer"></slot></footer>
    </div>
    `
});

v-pre

  • Использование: <div v-pre>{{ message }}</div>
  • Описание: Пропускает процесс компиляции для этого элемента и всех его дочерних элементов; используется для отображения необработанных тегов Mustache и предотвращения компиляции содержимого Vue.

Пример

<div v-pre>{{ message }}</div>

Пример

data() {
    return {
    message: 'Hello, Vue!'
    };
}

v-cloak

  • Использование: [v-cloak] { display: none; }
  • Описание: Скрывает содержимое шаблона до завершения компиляции экземпляра Vue, предотвращая отображение нескомпилированных тегов Mustache.

Пример

<div v-cloak>{{ message }}</div>

Пример

[v-cloak] { display: none; }

Пример

data() {
    return {
    message: 'Hello, Vue!'
    };
}

v-once

  • Использование: <p v-once>{{ message }}</p>
  • Описание: Отрисовывает элемент и компонент только один раз и не будет обновляться при последующих изменениях данных; используется для статического содержимого или содержимого, которое редко обновляется.

Пример

<p v-once>{{ message }}</p>

Пример

data() {
    return {
    message: 'Hello, Vue!'
    };
}
Другие расширения