Простая, крошечная гидратация на стороне клиента предварительно отрендеренных приложений 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 для приложения:

  1. С строковым объектом JSON в атрибуте q-data контейнера приложения; и / или
  2. С встроенным атрибутом 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, какие элементы связаны с какими dataproperties, используя атрибут 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-forloop, кроме первого, как было показано ранее.

Другой вариант использования - заменить статическую разметку для компонента, например:

<!-- <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 без необходимости настраивать более сложные процессы рендеринга на стороне сервера.

Посмотреть Quench View на Github.