Представляем Louk: Vue без HTML
Я влюбился в Vue, как только увидел его. Создав весь мой предыдущий пользовательский интерфейс в jQuery, он сразу понял, насколько Vue лучше подходит для создания пользовательских интерфейсов. (jQuery по-прежнему превосходен для того, для чего он был разработан, конечно: низкоуровневые манипуляции с DOM.) Мне понравилось, насколько легко было начать работу с Vue, и мне нравится, как он развивался вместе со мной, поскольку мои проекты со временем становились все более сложными. .
Но одна вещь беспокоила меня в Vue довольно рано: HTML. Написание шаблонов Vue было болезненным напоминанием о том, что HTML был разработан для разметки научных статей, а не для создания реактивных интерфейсов. Шаблоны Vue казались излишне привязанными к прошлому. Языки шаблонов, такие как Pug, кое-что из этого исправляют, но для них по-прежнему требуется много подробной разметки, специфичной для Vue, и они сами по себе вызывают некоторые вопросы (следует ли использовать операторы if Pug или Vue?). Поэтому я решил что-то с этим сделать.
Я задал вопрос: как будет выглядеть язык шаблонов для Vue? Что сделало бы его максимально простым для написания и чтения? Я черпал вдохновение из таких препроцессоров, как Stylus и YAML, которые избавляются от шума кодирования, такого как скобки, и из общих сокращенных обозначений, таких как @click в Vue и # в CSS. Я также черпал вдохновение в Pug с его неявно закрытыми элементами, а ближе к концу фазы дизайна я даже черпал вдохновение в написании письма. В результате получился Лук, и вот как он выглядит.
Как и в Pug, элементы записываются просто с их именем тега, угловые скобки не требуются:
Louk чувствителен к пробелам, а вложенные элементы имеют отступ относительно своих родителей:
Атрибуты следуют за соответствующими тегами элементов в следующих строках на том же уровне отступа. Следуя нотации CSS, идентификаторы используют #, а классы используют .:
А вот где самое интересное. Весь контент в Louk по умолчанию интерпретируется как динамический, то есть {{ и }} не нужны:
Префикс v для атрибутов также не обязателен:
Существующие сокращения Vue для директив v-on (и v-bind) работают и в Louk:
И, если вам нужен простой текст, добавьте " к тегу элемента, и содержимое будет передано без изменений:
Это самое необходимое! У Лука есть еще несколько уловок в рукаве, но этого достаточно, чтобы понять суть. Для начала перейдите к пакету Louk на npm.
Наслаждаться!
