Урок 11. Директивы v-text, v-once, v-pre и v-html Vue 3

Сегодня мы немного расширим и углубим уже имеющиеся знания по директивам Vue. Сначала, если хотите, то перечитайте уроки и попробуйте без подглядывания в них создать с нуля небольшое приложение на Vue (страничку), на которой, например, по нажатию кнопок будет добавляться или убавляться день недели. Справились? Отлично, пойдем дальше.

Директива v-text

На предыдущих уроках по Vue мы использовали интерполяцию для вывода текста в шаблон. То есть заключали в двойные фигурные скобки переменную и вставляли такую конструкцию в нужном месте. Примерно так:

<div>{{upread}}</div>

Однако, есть и альтернативный вариант того же самого – это директива v-text. Теперь примерно вот так:

<div v-text="upread"></div>

Директива v-once

Пишем так:

<div v-text="upread"></div>

<div v-once ="upread"></div>

<button @click="title = 'новый upread">Щелк!</button>

И теперь v-once будет всегда показывать upread, сколько бы мы ни кликали по кнопке. А вот верхний див будет меняться.

Директива v-pre

Название данной директивы это отсылка к тегу <pre> - то есть тег цитирования. Пример использования v-pre

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

Выведет просто {{upread}}

Директива v-html

Данная директива позволяет выводить html-элементы. Файл html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>upread.ru</title>
</head>
<body>
    <div v-html="upHtml"></div>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script src="app.js"></script>
</body>
</html>

Файл app.js

Vue.createApp({
    data: () => ({
      upHtml: '<a href="https://upread.ru/blog/new">Новости блога</a>'
    })
  }
).mount('#app')

Автор этого материала - я - Пахолков Юрий. Я оказываю услуги по написанию программ на языках Java, C++, C# (а также консультирую по ним) и созданию сайтов. Работаю с сайтами на CMS OpenCart, WordPress, ModX и самописными. Кроме этого, работаю напрямую с JavaScript, PHP, CSS, HTML - то есть могу доработать ваш сайт или помочь с веб-программированием. Пишите сюда.

статьи IT, Уроки по Vue, Vue, директивы

Читайте также:

Помогите сайту

Программирование up

Мои услуги