Загрузка...
Загрузка...
Vue.js использует директивы — специальные атрибуты, которые управляют поведением элементов DOM. Они позволяют динамически изменять разметку, управлять событиями, связывать данные и выполнять другие важные задачи.
Эти директивы используются для условного отображения элементов в зависимости от состояния приложения.
<template>
<p v-if="isLoggedIn">Добро пожаловать!</p>
<p v-else>Пожалуйста, войдите в систему.</p>
</template>
<script setup>
import { ref } from 'vue';
const isLoggedIn = ref(false);
</script>
v-if отображает элемент, только если isLoggedIn истинно.v-else показывается, если isLoggedIn ложно.ref(false) создаёт реактивное состояние, которое можно изменять.Позволяет отобразить массив данных, создавая элементы динамически.
<template>
<ul>
<li v-for="(item, index) in items" :key="index">{{ item }}</li>
</ul>
</template>
<script setup>
import { ref } from 'vue';
const items = ref(['Яблоко', 'Банан', 'Апельсин']);
</script>
v-for перебирает массив items, создавая <li> для каждого элемента.:key="index" помогает Vue эффективно обновлять список.Не злоупотребляйте v-if внутри v-for:
Это может привести к низкой производительности. Лучше фильтровать данные перед их отображением.
Позволяет динамически изменять атрибуты элементов, например, src, class, style и другие.
<template>
<img v-bind:src="imageUrl" alt="Картинка" />
</template>
v-bind:src="imageUrl" динамически изменяет источник изображения.Сокращайте v-bind:
Вместо v-bind:src="imageUrl" можно писать :src="imageUrl".
Позволяет связывать данные с элементами формы.
<template>
<input v-model="text" placeholder="Введите текст" />
<p>Вы ввели: {{ text }}</p>
</template>
v-model связывает text с <input>, автоматически обновляя <p>.Будьте осторожны с v-model:
Используется для добавления обработчиков событий, аналогично addEventListener.
<template>
<button v-on:click="sayHello">Нажми меня</button>
</template>
<script setup>
const sayHello = () => {
alert('Привет, мир!');
};
</script>
v-on:click="sayHello" добавляет обработчик нажатия.sayHello() вызывается при клике по кнопке.Сокращайте v-on:
Вместо v-on:click="sayHello" можно писать @click="sayHello".
Отличается от v-if, так как скрывает элемент с помощью display: none, а не удаляет его из DOM.
<template>
<p v-show="isVisible">Этот текст можно скрыть.</p>
</template>
v-show="isVisible" контролирует видимость через display: none.isVisible = false просто скрывает элемент, не удаляя его из DOM.Используйте v-if и v-show в зависимости от ситуации:
Директивы Vue.js — это мощный инструмент для управления разметкой и поведением элементов на странице. Они помогают сделать код более чистым, удобным и читаемым.
Используя директивы, можно легко управлять отображением, обработкой событий, привязкой данных и списками. Понимание этих ключевых директив значительно облегчит разработку на Vue.js и сделает ваш код более эффективным.