Согласно документам Vue.js, Vue реализует механизм шаблонов путем привязки к визуализируемому DOM с данными базового экземпляра Vue. Все шаблоны представлены в формате HTML, поэтому могут быть проанализированы большинством браузеров, соответствующих спецификациям.

Существует несколько аспектов обработки шаблонов, не только текста в Vue. Фактически, Vue отслеживает изменение состояния экземпляра и отражает все изменения в своих скомпилированных функциях рендеринга виртуальной DOM.

Интерполяции

Vue.js может преобразовать указанные базовые данные экземпляра в содержимое DOM на протяжении всего процесса интерполяции.

Текстовые шаблоны

Для содержимого на основе обычного текста, такого как строки, можно интерполировать в DOM с помощью ссылок на переменные с синтаксисом усов.

Обратите внимание на цифру, которую я поставил в начале. Вы можете заметить, что как только данные экземпляра изменятся, функции рендеринга виртуальной DOM начнут интерполировать новое значение данных в связанный компонент/элемент DOM.

Если вам не нужна функция мгновенного обновления, используйте команду v-once (или директиву в официальном документе), чтобы интерполяция происходила только во время самого первого процесса рендеринга.

Необработанный HTML

Все переменные, упомянутые в синтаксисе усов, будут рассматриваться как обычный текст, даже если они на самом деле являются строками HTML. Чтобы покрыть недостаток, Vue поддерживает привязку с директивой v-html (только для содержимого HTML). Vue попытается отобразить связанные данные в строку DOM (он может автоматически дополнить отсутствующий закрывающий тег до конца области элемента), но в случае неудачи он будет обработан как обычный текст, который имеет тот же результат, что и синтаксис усов. Я настоятельно не рекомендую разработчикам использовать v-html для отображения простого текста, поскольку Vue может не отображать содержимое с тегами «‹».

По соображениям безопасности (XSS) вы не должны использовать v-html при работе с содержимым, введенным пользователем. Иногда вы можете использовать регулярное выражение для фильтрации содержимого и остановки интерполяции при наличии небезопасных скриптов.

HTML-атрибуты

Если вы хотите привязать переменные данные к атрибутам элемента HTML, используйте директиву v-bind.

Возможно, вам придется заметить, что v-bind можно использовать для удаления указанного атрибута. Если для переменной, на которую ссылается v-bind, задано значение undefined, null или false, связанный атрибут будет удален из элемента DOM.

Выражения JavaScript

В интерполяциях разрешены выражения JavaScript. Есть несколько обстоятельств:

  1. Математические выражения. например: 4 + 1.
  2. Тернарные выражения с числовыми/строковыми/логическими значениями. например: правда? «хорошо»: «нет».
  3. Функции со строковыми возвращаемыми значениями. например: [1, 2, 3].join('-').
  4. Выражения строковых операторов. например: 521 + ‘ycr’.

Обратите внимание, что выражения, разделенные запятыми, НЕ допускаются, даже если они оцениваются как действительные выражения JavaScript с числовыми/строковыми/логическими значениями. Вы можете попробовать Vue и консоль разработчика в браузерах:

Vue будет обрабатывать выражение как простую строку. Но ваша консоль выведет «11», что является обычной строкой.

Директивы

Директивы в Vue — это HTML-атрибуты с префиксом 'v-'. Директивы довольно полезны. Вы можете связать их с помощью выражений JavaScript, о которых мы говорили выше. Выражения JavaScript должны иметь значения строки/числа/логического значения.

Аргументы

Вы можете заметить, что директива v-bind имеет двоеточие после слова «bind». Слово после двоеточия на самом деле является аргументом v-bind. Только некоторые директивы могут иметь аргументы. Наиболее распространенными являются v-bind и v-on.

  • v-связать. Это директива, предназначенная для обновления атрибутов HTML. Таким образом, вы должны указать, какой атрибут следует обновить при использовании v-bind.
  • включить. Директива используется для регистрации обработчиков событий, таких как click.

Модификаторы

Модификаторы говорят Vue привязать директиву особым образом. Например, мы можем захотеть предотвратить запуск действий браузера по умолчанию при срабатывании события клика. Поэтому мы можем использовать v-on:click.prevent, чтобы заставить его работать.

Стенография

Это может быть очень часто использовано, когда мы можем захотеть обновить атрибуты элементов и зарегистрировать обработчики событий. Просто введите v-bind или v-on, это намного медленнее, и нам нужен более быстрый способ. Итак, здесь идут «:» и «@». Просто опустите v-bind перед ‘:’ и замените v-on: на ‘@’, чтобы упростить эти директивы.

Если вам нравится мой контент, хлопайте в ладоши и подписывайтесь на меня. Проверьте мой оригинальный контент на devchache.com.