Директивы Vue.js 3
Директивы в Vue.js 3 — это специальные атрибуты, которые предоставляют нам возможность применять изменения к DOM на основе состояния компонента.
v-bind
Директива v-bind позволяет привязывать значение атрибута элемента к свойству компонента:
<template>
<div>
<img v-bind:src="imageSrc" alt="Изображение">
</div>
</template>
<script>
export default {
data() {
return {
imageSrc: 'https://example.com/image.jpg',
};
},
};
</script>v-on
Директива v-on применяется для обработки событий, таких как клики или нажатия клавиш:
<template>
<div>
<button v-on:click="handleClick">Нажми меня</button>
</div>
</template>
<script>
export default {
methods: {
handleClick() {
console.log('Кнопка нажата');
},
},
};
</script>v-if и v-else
Директивы v-if и v-else используются для условного рендеринга:
<template>
<div>
<div v-if="isLoggedIn">Вы вошли в систему</div>
<div v-else>Пожалуйста, войдите в систему</div>
</div>
</template>
<script>
export default {
data() {
return {
isLoggedIn: false,
};
},
};
</script>v-for
Директива v-for используется для рендеринга списков:
<template>
<div>
<ul>
<li v-for="item in items" :key="item.id">{{ item.text }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, text: 'Элемент списка 1' },
{ id: 2, text: 'Элемент списка 2' },
{ id: 3, text: 'Элемент списка 3' },
],
};
},
};
</script>Выражения
Выражения Vue.js 3 предоставляют возможность выполнять JavaScript код прямо в шаблоне:
<template>
<div>
<p>{{ message.split('').reverse().join('') }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Привет, мир!',
};
},
};
</script>В этом примере текст сообщения будет отображаться в обратном порядке.
v-show
Директива v-show аналогична v-if, но элементы DOM, которым она применена, скрываются, а не удаляются из DOM:
<template>
<div>
<div v-show="isVisible">Это видимый элемент</div>
</div>
</template>
<script>
export default {
data() {
return {
isVisible: true,
};
},
};
</script>v-show подходит для случаев, когда вам нужно часто переключать видимость элемента, так как она не затрачивает ресурсы на создание и удаление элемента из DOM.
v-model
Директива v-model используется для двусторонней привязки данных между элементами формы и свойствами компонента:
<template>
<div>
<input v-model="username" placeholder="Введите имя пользователя">
</div>
</template>
<script>
export default {
data() {
return {
username: '',
};
},
};
</script>v-once
Директива v-once используется для рендеринга элемента только один раз, без обновления при изменении связанных данных:
<template>
<div>
<h1 v-once>{{ title }}</h1>
</div>
</template>
<script>
export default {
data() {
return {
title: 'Однократный заголовок',
};
},
};
</script>