Более сложные компоненты будут использовать несколько директив для достижения желаемого результата. В этом упражнении мы создадим компонент, который использует
несколько директив для привязки, обработки и вывода данных в представление шаблона.
Создайте приложение и пустой компонент как показано в упражнении.
В пустом компоненте напишите такой код:
<template>
<div>
<h1>{{ text }}</h1>
</div>
</template>
<script setup>
const text = 'Directive text';
</script>
Замените интерполяцию {{}} атрибутом v-text. Вывод не должен поменяться:
<template>
<div>
<h1 v-text="text">Loading...</h1>
</div>
</template>Добавьте директиву v-once к элементу h1. Это заставит этот элемент DOM загружать только
данные v-text один раз:
<template>
<div>
<h1 v-once v-text="text">Loading...</h1>
</div>
</template>Под элементом h1 добавьте новый элемент h2, использующий атрибут v-html. Также необходимо добавить
новые локальные данные с именем html, которые содержат строку с форматированием HTML, как показано на
следующий блок кода:
<template>
<div>
<h1 v-once v-text="text">Loading...</h1>
<h2 v-html="html" />
</div>
</template>
<script setup>
const text = 'Directive text';
const html = 'Stylise</br>HTML in<br/><b>your data</b>'
</script>Сохраните файл, и импортируйте его в App.js, чтобы он отобразился на экране. В результате, в h2 элемент загрузится html разметка.
Добавьте новый объект локальной ссылки, который содержит много информации, такой как URL, target, title,
и tabindex. Внутри шаблона добавьте новый HTML-элемент привязки и привяжите объект ссылки к элементу HTML, используя короткий синтаксис v-bind, например, :href="link.url":
<template>
<div>
<h1 v-once v-text="text">Loading...</h1>
<h2 v-html="html" />
<a
:href="link.url"
:target="link.target"
:tabindex="link.tabindex">
{{ link.title }}
</a>
</div>
</template>
<script setup>
const text = 'Directive text';
const html = 'Stylise</br>HTML in<br/><b>your data</b>'
const link = {
title: "Go to Google",
url: https://google.com,
tabindex: 1,
target: '_blank',
};
</script>В результате, на основе параметров ссылки, она должна будет построится, в настоящий html элемент, с указанными параметрами.
Примените v-if="false" к элементу h1, v-else-if="false" к элементу h2 и v-else к тегу ссылки:
<template>
<div>
<h1 v-if="false" v-once v-text="text">Loading...</h1>
<h2 v-html="html" v-else-if="false" />
<a
v-else
:href="link.url"
:target="link.target"
:tabindex="link.tabindex">
{{ link.title }}
</a>
</div>
</template>Вы должны видеть только тег <a> на странице, так как мы установили в условные операторы заголовков false.
Условие v-else отобразит ссылку.
Измените шаблон, чтобы использовать v-show вместо операторов v-if, удалите v-else из
<a> и измените значение v-show в h1 на true:
<template>
<div>
<h1 v-show="true" v-once v-text="text">Loading...</h1>
<h2 v-html="html" v-show="false" />
<a
:href="link.url"
:target="link.target"
:tabindex="link.tabindex">
{{ link.title }}
</a>
</div>
</template>В данном случае отобразится только заголовок h1 и ссылка.
Если вы откроете инструменты разработчика браузера, то увидите, что h2 был создан, и есть в коде, но стиль у него - display:none;
В этом упражнении мы узнали об основных директивах Vue для управления, привязки,
отображения и скрытия HTML элементов шаблона, без использования JavaScript.
В следующей статье, мы узнаем, как добиться двусторонней привязки с помощью с помощью v-model Vue.