Интерполяция и директивы
Используйте интерполяцию с фигурными скобками и основные директивы в шаблонах
«Интерполяция и директивы» — бесплатный урок Vue Academy на CoddyKit. Это урок 1 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 3 уроков всего.
Обзор синтаксиса шаблонов
Шаблоны Vue — это корректный HTML, дополненный специальным синтаксисом:
- Интерполяция с двойными фигурными скобками для вывода текста
- Директивы (атрибуты с префиксом v-) для задания поведения
Vue компилирует их в эффективные функции отрисовки.
Интерполяция с двойными фигурными скобками
Двойные фигурные скобки, или синтаксис mustache, выводят текст.
Содержимое внутри них — это выражение JavaScript, а не только имя переменной.
<span>Hello, {{ userName }}</span>
<span>{{ price * quantity }}</span>
<span>{{ isActive ? "On" : "Off" }}</span>v-bind для атрибутов
Синтаксис с двойными фигурными скобками не работает внутри HTML-атрибутов. Используйте v-bind, чтобы связать данные с атрибутом.
<a v-bind:href="profileUrl">Profile</a>
<img v-bind:src="imagePath" v-bind:alt="caption" />
<button v-bind:disabled="isLoading">Submit</button>Сокращённая запись v-bind
v-bind используется настолько часто, что у него есть сокращённая запись: только двоеточие.
<!-- Full syntax -->
<a v-bind:href="url">Link</a>
<!-- Shorthand -->
<a :href="url">Link</a>v-on для событий
Директива v-on отслеживает события DOM и запускает обработчики.
<button v-on:click="handleClick">Click me</button>
<input v-on:input="onType" />
<form v-on:submit="onSubmit">...</form>Сокращённая запись v-on
У v-on тоже есть сокращённая запись: символ @.
<!-- Full syntax -->
<button v-on:click="save">Save</button>
<!-- Shorthand -->
<button @click="save">Save</button>Встроенные обработчики и обработчики-методы
Обработчики событий могут быть встроенными выражениями или именами методов.
<!-- Inline expression -->
<button @click="count++">Add</button>
<!-- Method handler -->
<button @click="increment">Add</button>
<!-- Inline with the event object -->
<button @click="log($event)">Log</button>v-text
Директива v-text задаёт текстовое содержимое элемента. Она эквивалентна интерполяции с двойными фигурными скобками.
<!-- These two are equivalent -->
<span v-text="message"></span>
<span>{{ message }}</span>v-html
Директива v-html отображает строку как настоящий HTML, а не как экранированный текст.
<div v-html="rawHtml"></div>
<!-- If rawHtml = "<b>Bold</b>",
it renders actual bold text -->v-html и предупреждение об XSS
Предупреждение: v-html опасна при работе с ненадёжным содержимым.
- Она может внедрить вредоносные скрипты (атаки XSS)
- Используйте её только для содержимого, которому вы полностью доверяете
- Никогда не отображайте HTML, отправленный пользователем, напрямую
Для обычного текста всегда предпочитайте интерполяцию с двойными фигурными скобками: она экранирует HTML.
Аргументы директив
Некоторые директивы принимают аргумент после двоеточия, например имя атрибута или события.
<!-- argument is the attribute name -->
<a :href="url">Link</a>
<!-- argument is the event name -->
<button @click="run">Run</button>
<!-- dynamic argument -->
<a :[attrName]="value">Dynamic</a>Быстрая проверка
Проверьте, насколько хорошо вы понимаете интерполяцию и директивы.
Итоги: интерполяция и директивы
Вы изучили основы шаблонов Vue:
- {{ }} выводит текстовые выражения с помощью синтаксиса mustache
- v-bind (сокращённая запись :) связывает атрибуты
- v-on (сокращённая запись @) обрабатывает события
- v-text задаёт текстовое содержимое
- v-html отображает необработанный HTML (риск XSS, используйте осторожно)
Далее вы изучите условия и циклы.
Изучай HTML с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 42
- Уроки
- 156
Часто задаваемые вопросы
Урок «Интерполяция и директивы» бесплатный?
Да — полный текст урока «Интерполяция и директивы» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 3 уроков всего.
Чему я научусь в уроке «Интерполяция и директивы»?
Используйте интерполяцию с фигурными скобками и основные директивы в шаблонах Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Vue Academy?
Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 3.
Сколько времени занимает урок «Интерполяция и директивы»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Vue Academy?
Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Интерполяция и директивы
- Условия и циклы
- Привязка атрибутов и классов