Простая, крошечная гидратация на стороне клиента предварительно отрендеренных приложений Vue.js.
Quench Vue позволяет использовать серверную / статическую разметку в качестве data
и template
для приложения Vue.js. Это прекрасно, когда вы не можете / не хотите использовать настоящий рендеринг на стороне сервера.
Все существующие функции Vue будут работать в обычном режиме при инициализации приложения в браузере.
Демо
Полная демонстрация доступна здесь: https://codepen.io/stowball/pen/awwGBB
Установка
npm
npm install quench-vue --save
Прямое <script>
включить
<script src="https://unpkg.com/quench-vue/umd/quench-vue.min.js"></script>
Примечание: вам нужно будет использовать полную сборку Vue.js, которая включает компилятор.
использование
Есть 2 способа определения и использования data
для приложения:
- С строковым объектом JSON в атрибуте
q-data
контейнера приложения; и / или - С встроенным атрибутом
q-binding
в элементе, когдаq-convert-binding
добавляется в контейнер приложения.
Оба метода можно использовать вместе или по отдельности, но q-data
предпочтительнее, так как он быстрее, проще и универсальнее.
Давайте посмотрим на несколько примеров:
Метод 1: определение data
с помощью [q-data]
Этот метод позволяет легко указать data
для приложения, включая массивы и объекты.
<div id="app" q-data=' "title": "Hello, world!", "year": 2017, "tags": [ "js", "library" ], "author": { "firstName": "Matt", "lastName": "Stow" }, "skills": [ { "name": "JS", "level": 4 }, { "name": "CSS", "level": 5 } ] '> … </div>
Отображение данных с помощью [q-binding]
или [v-text]
Мы явно дублируем «данные» в разметке и сообщаем Vue, какие элементы связаны с какими data
properties, используя атрибут q-binding
или v-text
, значение которого указывает на имя свойства, например:
<h1 q-binding="title">Hello, World!</h1> <p q-binding="year">2017</p> <ul> <li v-for="tag in tags"> <span q-binding="tag">js</span> </li> <!-- <q> --> <li> <span>library</span> </li> <!-- </q> --> </ul> <ul> <li v-for="key in author"> <span q-binding="key">Matt</span> </li> <!-- <q> --> <li> <span>Stow</span> </li> <!-- </q> --> </ul> <ul> <li v-for="skill in skills"> <span q-binding="skill.name">JS</span> <span q-binding="skill.level">4</span> </li> <!-- <q> --> <li> <span>CSS</span> <span>5</span> </li> <!-- </q> --> </ul>
Для перебора списков нам также необходимо использовать другой синтаксис, <!-- <q> --> … <!-- </q> -->
, который мы опишем позже.
Примечание. Вам нужно вывести атрибуты v-for
и _19 _ / _ 20_ только на первой итерации цикла.
Метод 2: определение data
с помощью встроенных [q-binding]
привязок
Когда q-convert-bindings
установлен в контейнере приложения, мы также можем использовать [q-binding]
attribute для создания data
переменной, которая равна значению .textContent
элемента.
Примечание.
- Привязки, указанные в глобальном объекте
q-data
, имеют приоритет над встроенными привязками. - Не вкладывайте элементы в элемент
q-binding
, иначе вы получите неожиданные результаты.
Все следующие примеры полностью воссоздают глобальный объект q-data
из предыдущего.
Простые привязки
<div id="app" q-convert-bindings> <h1 q-binding="title">Hello, World!</h1> <p q-binding="year">2017</p> </div>
Привязки массивов и объектов
Vue поддерживает итерацию по массивам и объектам с помощью директивы v-for
с синтаксисом item in items
, где items
- список исходных данных, а item
- псевдоним для элемента массива, по которому выполняется итерация.
Чтобы встроить связывание с Quench, нам нужно использовать другой специальный синтаксис itemsSource as item
.
Массив
Чтобы воспроизвести массив tags
сверху, мы должны:
<div id="app" q-convert-bindings="true"> <li v-for="tag in tags"> <span q-binding="tags[0] as tag">js</span> </li> <!-- <q> --> <li> <span q-binding="tags[1] as tag">library</span> </li> <!-- </q> --> </div>
где itemsSource
- это имя массива (tags
) плюс индекс в массиве _38 _ / _ 39_, который мы хотим заполнить, а tag
- это item
псевдоним в v-for
.
Объект
Чтобы воспроизвести объект author
сверху, мы должны:
<div id="app" q-convert-bindings="true"> <li v-for="key in author"> <span q-binding="author.firstName as key">Matt</span> </li> <!-- <q> --> <li> <span q-binding="author.lastName as key">Stow</span> </li> <!-- </q> --> </div>
где itemsSource
- это имя объекта (author
) плюс соответствующий ключ объекта _46 _ / _ 47_, который мы хотим заполнить, а key
- это item
псевдоним в v-for
.
Массив объектов
Оба вышеперечисленных метода можно комбинировать, поэтому для репликации массива skills
сверху мы должны:
<div id="app" q-convert-bindings="true"> <li v-for="skill in skills"> <span q-binding="skills[0].name as skill.name">JS</span> <span q-binding="skills[0].level as skill.level">4</span> </li> <!-- <q> --> <li> <span q-binding="skills[1].name as skill.name">CSS</span> <span q-binding="skills[1].level as skill.level">5</span> </li> <!-- </q> --> </div>
где itemsSource
- имя массива и индекса (skills[0]
) плюс соответствующий ключ объекта _54 _ / _ 55_, который мы хотим заполнить, а _56 _ / _ 57_ - это item
псевдоним в v-for
плюс ключ объекта.
Надеюсь, вы согласитесь с тем, что использование встроенных привязок для установки data
сложнее, чем использование метода q-data
, но его все же можно использовать.
Примечание. При использовании встроенных привязок массивы и объекты ограничиваются глубиной 1 уровня.
Ссылка на глобальные переменные как на data
свойства
Начиная с v0.3.0, вы также можете передавать глобальные переменные (на window
) для использования в качестве свойств данных. Подобно [q-data]
, мы можем передать строковый объект JSON пар ключ / значение в атрибут [q-r-data]
, где key - это имя свойства data
, а value - имя глобальная переменная, которая будет использоваться.
<script> var ENV = 'dev'; var PORT = 3000; </script> <div id="app" q-r-data='{ "env": "ENV", "port": "PORT" }'></div>
что даст следующее data
:
{ env: 'dev', port: 3000 }
Примечание. Привязки, указанные в объекте q-r-data
, имеют приоритет над привязками в q-data
.
Скрытие элементов от компилятора
В предыдущих разделах мы представили синтаксис <!-- <q> --> … <!-- </q> -->
. Это пара открывающих и закрывающих комментариев, которые исключают передачу содержимого в компилятор шаблона.
Наиболее очевидный вариант использования (и необходимый при использовании встроенных привязок) - удалить все элементы v-for
loop, кроме первого, как было показано ранее.
Другой вариант использования - заменить статическую разметку для компонента, например:
<!-- <q> --> <div>I will be stripped in the app and "replaced" with the component version below</div> <!-- </q> --> <my-component text="I'm not visible until parsed through the compiler"></my-component>
Примечание. Вложенные комментарии не поддерживаются.
Скрытие элементов в предварительно обработанном HTML
Чтобы предотвратить скачки макета и изменение положения при компиляции шаблона приложения, может быть полезно визуально (и доступным образом) скрыть элементы и контент, неприемлемые без JavaScript, например <button>
.
Этого легко добиться, добавив класс в контейнер вашего приложения и соответствующее правило CSS:
<div id="app" class="pre-rendered"> <button class="hide-when-pre-rendered" v-on:click="doSomething">I'm a button that only works with JS</button> </div> .pre-rendered .hide-when-pre-rendered { visibility: hidden; }
Когда Vue компилирует наш новый шаблон, он удаляет все атрибуты контейнера из DOM, поэтому класс больше не будет соответствовать.
Создание экземпляра приложения
Очень немногое нужно изменить по сравнению с тем, как вы обычно создаете приложение.
С помощью сборщика модулей, например webpack
import Vue from 'vue'; import { createAppData, createAppTemplate } from 'quench-vue'; var appEl = document.getElementById('app'); var data = createAppData(appEl); var template = createAppTemplate(appEl); var app = new Vue({ el: appEl, data: data, template: template, });
Для прямого <script>
включить
<script src="https://unpkg.com/vue"></script> <script src="https://unpkg.com/quench-vue/umd/quench-vue.min.js"></script> var appEl = document.getElementById('app'); var data = quenchVue.createAppData(appEl); var template = quenchVue.createAppTemplate(appEl); var app = new Vue({ el: appEl, data: data, template: template, });
Преимущества
Надеюсь, вы осознали, что теперь вы можете быстро и легко отображать статическую разметку, оптимизированную для SEO (из CMS, генератора статических сайтов или библиотеки компонентов, таких как Fractal), и быстро и легко преобразовать ее в полностью динамическое клиентское приложение Vue.js без необходимости настраивать более сложные процессы рендеринга на стороне сервера.