Vue не работает template

Синтаксис шаблонов

Для связывания DOM с данными экземпляра Vue использует синтаксис, основанный на HTML. Все шаблоны Vue являются валидным HTML-кодом, который могут распарсить все HTML-парсеры и браузеры.

Для работы Vue компилирует шаблоны в render -функции виртуального DOM. В сочетании с системой реактивности, Vue умеет определять минимальное число компонентов для повторной отрисовки и применяет минимальное количество манипуляций к DOM при изменении состояния приложения.

Если вы знакомы с концепцией виртуального DOM и предпочитаете использовать ничем не ограниченную мощь JavaScript — можете также писать render-функции напрямую, минуя шаблоны и даже используя JSX.

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

Текст

Наиболее простой способ связывания данных — это текстовая интерполяция с использованием синтаксиса Mustache (двойных фигурных скобок):

Выражение в фигурных скобках будет заменено значением свойства msg соответствующего объекта данных. Кроме того, оно будет обновлено при любом изменении этого свойства.

Возможно также выполнение интерполяции однократно, которая не обновится при изменении данных — с помощью директивы v-once, но обратите внимание, это повлияет сразу на все связанные переменные в рамках данного элемента:

Сырой HTML

Значение выражения в двойных фигурных скобках подставляется как простой текст, а не как HTML. Для HTML необходимо использовать директиву v-html :

Двойные фигурные скобки: << rawHtml >>

Содержимое тега span будет заменено значением свойства rawHtml , интерпретированного как обычный HTML — все привязки данных игнорируются. Запомните, вы не можете использовать v-html для вложения шаблонов друг в друга, потому что движок шаблонов Vue не основывается на строках. Вместо этого нужно использовать компоненты, позволяющие сочетать и переиспользовать элементы UI.

Динамическая отрисовка произвольного HTML-кода на вашем сайте крайне опасна, так как может легко привести к XSS-уязвимостям. Используйте интерполяцию HTML только для доверенного кода, и никогда не подставляйте туда содержимое, создаваемое пользователями.

Атрибуты

Синтаксис двойных фигурных скобок не работает с HTML-атрибутами. Используйте вместо него директиву v-bind :

При использовании с булевыми атрибутами (когда их наличие уже означает true ) v-bind работает немного иначе. В этом примере:

Если значением isButtonDisabled будет null , undefined или false , то атрибут disabled не добавится в элемент .

Использование выражений JavaScript

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

Выражения будут вычислены как JavaScript-код в области видимости соответствующего экземпляра Vue. Единственное ограничение в том, что допускается лишь одно выражение, поэтому код ниже НЕ сработает:

Выражения в шаблонах выполняются в режиме «песочницы», поэтому доступ есть только к ограниченному списку глобальных объектов, таким как Math и Date . Не пытайтесь получить доступ к пользовательским глобальным объектам внутри выражений используемых в шаблонах.

Директивы

Директивы — это специальные атрибуты с префиксом v- . В качестве значения они принимают одно выражение JavaScript (за исключением v-for , которую мы изучим далее). Директива реактивно применяет к DOM изменения при обновлении значения этого выражения. Вспомним пример из введения:

В этом случае директива v-if удалит или вставит элемент

в зависимости от истинности значения выражения seen .

Аргументы

Некоторые директивы могут принимать «аргумент», отделённый от названия директивы двоеточием. Например, директива v-bind используется для реактивного обновления атрибутов HTML:

В данном случае href — аргумент, указывающий директиве v-bind связать атрибут href элемента со значением выражения url .

Другим примером будет директива v-on , которая отслеживает события DOM:

В данном случае аргументом является тип события. Подробнее на обработке событий мы остановимся позднее.

Динамические аргументы

Начиная с версии 2.6.0, можно использовать JavaScript-выражение в аргументе директивы, заключив его в квадратные скобки:

Здесь attributeName будет выполняться как выражение JavaScript, а его вычисленное значение использоваться в качестве финального значения аргумента. Например, если ваш экземпляр Vue имеет в данных свойство attributeName , значение которого равно «href» , то это будет эквивалентно привязке v-bind:href .

Таким же образом можно использовать динамические аргументы для привязки обработчика к динамическому имени события:

В этом примере, когда значение eventName будет «focus» , то обработчик v-on:[eventName] будет эквивалентен v-on:focus .

Ограничения значений динамического аргумента

Ожидается, что динамические аргументы в результате будут строкой, за исключением null . Специальное значение null можно использовать для явного удаления привязки. Любые другие нестроковые значения будут вызывать предупреждения.

Ограничения динамического выражения

Для выражений динамических аргументов есть синтаксические ограничения, поскольку некоторые символы, такие как пробелы и кавычки, являются недопустимыми внутри имён атрибутов HTML. Например:

Обойти это ограничение можно использованием выражения без пробелов или кавычек, или заменой комплексного выражения на вычисляемое свойство.

При использовании шаблонов в DOM (шаблонов, написанных непосредственно в HTML-файле), следует избегать именования ключей заглавными буквами, поскольку браузеры будут приводить имена атрибутов к строчным:

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

Модификаторы — особые постфиксы, добавляемые после точки, обозначающие, что директива должна быть связана каким-то определённым образом. Например, модификатор .prevent говорит директиве v-on вызвать event.preventDefault() при обработке произошедшего события:

Больше примеров применения модификаторов вы увидите далее, когда будем подробнее разбирать v-on и v-model .

Сокращения

Префикс v- служит для визуального определения Vue-специфичных атрибутов в шаблонах. Это удобно, когда Vue используется для добавления динамического поведения в существующей разметке, но для часто используемых директив может показаться многословным. В то же время необходимость в v- менее значима при создании одностраничных приложений, где Vue контролирует каждый шаблон. Поэтому есть сокращённая запись для двух наиболее часто используемых директив, v-bind и v-on :

Сокращение v-bind

Сокращение v-on

Такие атрибуты на вид несколько отличаются от обычного HTML-кода, но символы : и @ являются валидными символами для названий атрибутов, и все браузеры поддерживающие Vue могут их корректно обработать. К тому же, в итоговой разметке они не появятся. Сокращённый синтаксис совершенно необязателен, но он скорее всего вам понравится, когда вы узнаете больше о том, как он используется далее.

Источник

Работа с шаблонами в Vue.js 2

Vue.js 2 представил свою собственную реализацию Virtual DOM. На первый взгляд, кажется что это никак не отразится на том как вы пишите шаблоны. Из документации:

Под капотом, Vue компилирует шаблоны в render-функции для Virtual DOM. В совокупности с системой реактивности, Vue способен грамотно определять минимальное количество компонентов для повторной визуализации и выполнять минимальное количество действий с DOM при изменении состояния приложения.

Virtual DOM освобождает от довольно большой части оптимизации: теперь вы можете предварительно скомпилировать шаблоны в чистый JavaScript, таким образом Vue.js может не делать этого в браузере.

Без предварительной компиляции шаблонов в процессе сборки, Vue.js будет переводить строковый шаблон в JavaScript render-функцию, во время выполнения. Это означает, что на этапе начального рендеринга потребуется больше времени, по двум причинам: ваш уже собранный скрипт должен включать в себя Vue компилятор (больше время для загрузки) и шаблон должен быть скомпилирован, перед тем как он будет использован (больше время выполнение).

Эта статья не о синтаксисе шаблонов в Vue.js 2, а о том где и как определять ваши шаблоны. Я написал её, потому что на текущий момент не нашёл ни одного ресурса, который бы на самом деле объединил различные способы управления вашими шаблонами.

Я разделил различные способы определения шаблонов на 3 разные категории, у каждой из которых есть собственные преимущества и недостатки:

• Написание шаблонов, которые компилируются во время выполнения (наименьшая производительность);
• Использование отдельного .vue файла для компонентов (требуется этап сборки);
• Ручное написание render-функций (чистый JavaScript, не HTML-подобный синтаксис);

Использование не скомпилированных шаблонов

Шаблоны в Vue.js необязательно должны быть скомпилированы. Если вы используете runtime версию Vue.js, то шаблоны могут быть скомпилированы прямо в браузере. Это решение отличается простотой. Никаких лишних этапов сборки или специальных типов файлов, но такой подход жертвует производительностью. Первый рендеринг компонента займёт больше времени, потому что шаблон сначала необходимо скомпилировать в JavaScript.

Определение шаблонов в компоненте

Самый простой способ определить шаблон компонента — это определить его в параметре template.

В JavaScript, строковый тип данных не может быть размещён на нескольких строках кода. Если вы хотите чтобы ваш выглядел свободно, можете использовать шаблонные литералы.

Кроме того, если вы используете такие сборщики как Webpack или Browserify, вы можете определить шаблон в отдельном файле. Параметр template может принимать значение require.

Определение шаблонов в атрибуте type=»x-template» тега script

Тег script с атрибутом x-template может содержать шаблон, к которому компонент будет обращаться по ID.

На самом деле, это решение не очень, так как оно создаёт довольно большой разрыв между вашими шаблонами и компонентами, а по факту не приносит никакой пользы (даже официальная документация отговаривает нас от использования x-template).

Использование inline-template атрибута

С помощью специального атрибута inline-template, шаблон может быть указан во внутреннем содержании компонента.

Это может оказаться полезным, если вы хотите чтобы HTML был виден сразу после того как он пришёл с сервера. Однако, как правило использовать встроенные шаблоны не рекомендуется, потому что такой подход делает его сложнее для обдумывания масштабов вашего компонента.

Использование отдельного файла компонента (.vue файлов)

Отдельный файл компонента существовал уже в первой версии Vue.js. В Vue.js 2 он приносит больше пользы: шаблоны будут предварительно скомпилированы в чистый JavaScript.

Vue файлы позволяют вам определять шаблон и скрипт в отдельном файле, который будет скомпилирован в JavaScript с помощью Webpack или Browserify.

Отдельные файлы компонента также открывают дверь более интересным возможностям, таким как написание шаблонов с помощью HTML или CSS препроцессоров. Это означает, что вы можете писать шаблоны например с помощью Pug (формально Jade).

Обратите внимание на то, что поскольку вы используете специальный тип файла, становиться труднее добавлять другие инструменты в ваш проект. Например, если вы хотите писать тесты или анализаторы (lint’ы) для ваших компонентов, то сначала их нужно скомпилировать, а также у редакторов кода могут возникнуть проблемы с .vue файлами.

Использование render-функций

Написание сырых render-функций

Когда используются различные стратегии шаблонизации (компиляция во время выполнения или отдельные файлы компонентов), строковые шаблоны компилируются в render-функции автоматически.

Написание ваших собственных render-функций даёт вам максимальную производительность без стадии сборки, но дело в том, что они не HTML-подобные и с ними труднее работать.

Написание render-функций с помощью JSX

render-функции могут быть написаны в JSX формате с помощью плагина Babel, что позволяет достичь более HTML-подобного синтаксиса.

Обратите внимание на то, что большинство встроенных во Vue.js 2 директив не будут доступны при использовании JSX, но обычно у них есть собственные программные эквиваленты (например, вы можете заменить v-if на обычный if из JavaScript).

Вывод

Если вы разрабатываете большое приложение, в котором производительность является очень важным фактором (обычно SPA) или заинтересованы в использовании препроцессоров, то кажется вам подойдут отдельные файлы для Vue компонентов.

Если вы не против первоначальной потери производительности и готовы использовать компиляцию во время выполнения (случаи, которые просто улучшают страницу), я рекомендую использовать литералы JavaScript шаблонов в параметре template компонента. Это не привнесёт никаких чуждых концепций в ваш процесс сборки и сохранит ваш шаблон вместе с компонентом.

Источник

Vue шаблоны на JSX

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

Вот список того, что мы получим от использования JSX с Vue. Каждый из этих пунктов подробно рассматривается ниже.

Аргумент ЗА

• Вся мощь JavaScript в вашем распоряжении.
• Нет необходимости регистрировать компоненты.
• Spread оператор на максималках.
• Именование компонентов и props-параметров.
• Отсутствие конфликтов с существующими HTML-элементами.
• Вы не привязаны к паттерну: один файл = один компонент .

Аргумент ПРОТИВ

• Для обычного верстальщика это выглядит чуждым.
• Отсутствие директивной управления структурой.
• Больше никаких тегов style в ваших однофайловых компонентах.
• JSX непопулярен в экосистеме Vue.

Я собираюсь поделиться своими первоначальными мыслями об использовании JSX с Vue. Я буду выкладывать одновременно два примера шаблонов Vue и их JSX-аналогов, для сравнения.

Чтобы заставить шар катиться, вот простой пример того, как выглядит JSX в простом компоненте Vue:

За: Вся мощь JavaScript в вашем распоряжении.

Шаблоны Vue ограничиваются использованием только зарегистрированных компонентов. С помощью JSX можно делать всё что угодно внутри функции рендеринга.

Нет необходимости присваивать функции методам, что означает немного меньше шаблонов.

За: Нет необходимости регистрировать компоненты

Еще одно небольшое изменение качества жизни, которое уменьшает размер кода шаблона. Вы можете напрямую использовать ваши компоненты в функции рендеринга, без обязательной регистрации их в опции components .

Источник