Использование Vue.js на лендингах AIO

Это руководство поможет вам разобраться, как использовать Vue.js на лендингах AIO, чтобы расширить их возможности и улучшить взаимодействие с пользователем.
Не беспокойтесь, если вы не знакомы с программированием: руководство написано максимально просто и поможет легко реализовать нужные функции.

Что такое Vue.js?

Vue.js это популярный JavaScript-фреймворк, который позволяет создавать динамичные и интерактивные веб-интерфейсы. Он помогает строить отзывчивые интерфейсы, просто связывая данные с HTML-элементами.

Зачем использовать Vue.js на лендингах?

Подключив Vue.js к лендингам, вы сможете:

Показывать динамический контент в зависимости от данных о пользователе или его действий.
Упростить условный рендеринг (показ или скрытие элементов).
Легко перебирать данные, чтобы выводить списки или повторяющиеся элементы.

Как добавить Vue.js на лендинг

Чтобы начать использовать Vue.js, объявите его в элементе, внутри которого он должен работать. Просто добавьте этому элементу id="vue".

Примеры:

<body id="vue">
    <!-- Your content here -->
</body>

<div id="vue">
    <!-- Your content here -->
</div>

Работа с плейсхолдерами AIO

Через Vue.js доступны все плейсхолдеры AIO. Вот как это делается:

Исходный плейсхолдер AIO:
```
{{aio.visit.country_code}}
```
Плейсхолдер с Vue.js:
```
{{vue.aio.visit.country_code}}
```

Пример:

<body id="vue">
    <div>
	    My country code is {{vue.aio.visit.country_code}}
	    My country code is {{aio.visit.country_code}}
		</div>
</body>

Как использовать основные директивы Vue.js

Вот несколько самых распространённых и простых директив Vue.js, которые пригодятся на лендингах:

v-if: рендерит элемент по условию.
v-else: задаёт альтернативу, если условие v-if ложно.
v-else-if: объединяет несколько условных блоков в цепочку.
@click: привязывает к элементу обработчик клика.

Примеры:

// A simple use case of v-if, v-else-if, v-else

// If country code of visit is RU, then show "You are Russian!"
// Else if country code of visit is DE, then show "You are German!"
// Else if country code of visit is not RU, show "You are not from Russia or Germany!"
<body id="vue">
    <div v-if="vue.aio.visit.country_code === 'RU'">
	    You are Russian!
		</div>
		 <div v-else-if="vue.aio.visit.country_code === 'DE'">
	    You are German!
		</div>
		 <div v-else>
	    You are not from Russia or Germany!
		</div>
</body>

// A simple use case of @click

// When visit with country code which is not DE or RU lands on page ->
// -> message "You are not from Russia or Germany!" will be shown
// When element with that message is clicked -> country code will change to DE
// Therefore the condition `v-else-if="vue.aio.visit.country_code === 'DE'` ->
// -> will now become true, and message "You are German!" will be shown instead
<body id="vue">
    <div v-if="vue.aio.visit.country_code === 'RU'">
	    You are Russian!
		</div>
		 <div v-else-if="vue.aio.visit.country_code === 'DE'">
	    You are German!
		</div>
		 <div v-else @click="vue.aio.visit.country_code = 'DE'">
	    You are not from Russia or Germany!
		</div>
</body>

Как использовать продвинутые директивы Vue.js

Обратите внимание: список директив ниже не полный. Все возможности описаны в официальной документации Vue.js. В этом разделе мы разберём только директиву v-for и более сложные случаи использования уже знакомых директив:

v-for: перебирает данные и выводит список.
v-if с объявленным массивом объектов.
v-if с несколькими условиями.

Остальные директивы и возможности описаны в официальной документации Vue:
https://vuejs.org/guide/introduction.html

Обратите внимание: примеры ниже приведены вне контекста. Чтобы использовать эти директивы, нужно объявить сами объекты. Как это сделать, рассказано в следующем разделе.

Пример v-for:

// Access the comments array and display each item from it
<body id="vue">
    <div v-for="item in vue.comments">
	    {{item}}
		</div>
</body>

Пример v-if с объектом:

// Access the translation array and display the value from it, if such a value exists
<body id="vue">
    <div v-if="vue.translation.[vue.aio.visit.country_code].HEADER">
	    {{vue.translation[vue.aio.visit.country_code].HEADER}}
		</div>
</body>

Пример v-if с несколькими условиями:

// Display the value if multiple conditions are true
// In this example: If country_code=RU AND visit field Creative has a value of 'image'
<body id="vue">
    <div v-if="vue.aio.visit.country_code === 'RU' && vue.aio.visit.fields.creative === 'image'">
	    {{vue.aio.visit.country_code}}
		</div>
</body>

Объявление объектов для Vue.js

Объекты с данными можно объявлять через наш AIO SDK с помощью aioBus. Так вы задаёте данные, которые Vue.js будет использовать для динамического рендеринга контента.

В предыдущем примере мы показали использование в v-for и v-if. Теперь посмотрим, как через aioBus был объявлен сам массив значений для этого цикла.

Пример v-for:

Объявляем простой массив и выводим значения из него:

// Simple usage of v-for

// We have declared an array of some values via aioBus
// Now we can access these values and show them dynamically using v-for
// This cycle will render all the values from an array called comments on the lander
<body id="vue">
    <div v-for="item in vue.comments">
	    {{item}}
		</div>
</body>

// Simple declare of an array of strings
<script>
    window.aioBus.push({
        type: "vue-data-object",
        data: {
            comments: ['Some comment 1', 'Some comment 2', 'Some comment 3']
        }
    });
</script>

Пример v-if:

Объявляем переводы для разных языков:

// Advanced usage of v-if
// Check the example below for a breakdown explanation of the code

// If such country code of the visit exists in translation object ->
-> then show value of HEADER of that object
// i.e if country code is RU -> show "РУССКИЙ ЗАГОЛОВОК"
<body id="vue">
    <div v-if="vue.translation?.[vue.aio.visit.country_code]?.HEADER">
	    {{vue.translation[vue.aio.visit.country_code].HEADER}}
		</div>
</body>

// Advanced declare of nested objects with key:value pairs ->
-> {object1:{object2 key:"", object2 value:""}}
<script>
    window.aioBus.push({
        type: "vue-data-object",
        data: {
            translation: {
                "RU": {
                    HEADER: 'РУССКИЙ ЗАГОЛОВОК'
                },
                "DE": {
                    HEADER: 'GERMAN HEADER'
                }
            }
        }
    });
</script>

Разберём подробно, что происходит в этой части кода:

<div v-if="vue.translation?.[vue.aio.visit.country_code]?.HEADER"> {{vue.translation[vue.aio.visit.country_code].HEADER}} </div>

Здесь выполняется цепочка проверок:
1. В v-if проверяем, существует ли объект vue.translation, и если да, обращаемся к нему.
2. Затем проверяем, существует ли объект vue.translation.key (ключ здесь это наши значения RU и DE) внутри vue.translation и совпадает ли он с кодом страны визита: vue.translation?.[vue.aio.visit.country_code].
3. Если такое значение есть (код страны визита RU, и объект RU есть в объекте translation ), берём значение HEADER и выводим его в
{{vue.translation.[vue.aio.visit.country_code].HEADER}}.

Итак, в итоге: если код страны визита RU→ показываем “РУССКИЙ ЗАГОЛОВОК”.

При продвинутых способах работы с Vue.js могут возникать ошибки. Как их устранять, расскажем в следующем разделе.
Чтобы предотвратить такие ошибки, мы используем ? в директиве v-if: оператор проверяет, существует ли значение. Если его нет, проверка останавливается, не ломая код.

Отладка ошибок при работе с объектами

Иногда, особенно при небольшом опыте программирования, можно столкнуться с неожиданными ошибками. Самая частая из них это попытка обратиться к неопределённому объекту. Вот как её отловить и устранить.

Пример:

Мы объявили объект с переводами и пытаемся обратиться к нему через v-if :

<body id="vue">
    <div v-if="vue.translation.[vue.aio.visit.country_code].HEADER">
	    {{vue.translation[vue.aio.visit.country_code].HEADER}}
		</div>
</body>

<script>
    window.aioBus.push({
        type: "vue-data-object",
        data: {
            translation: {
                "RU": {
                    HEADER: 'РУССКИЙ ЗАГОЛОВОК'
                },
                "DE": {
                    HEADER: 'GERMAN HEADER'
                }
            }
        }
    });
</script>

С таким кодом лендинг сломается, если открыть его с любым кодом страны, кроме RU и DE, которые мы задали в vue.translation: причина в том, как происходит обращение к вложенным объектам.

Например, если открыть лендинг с кодом страны NL, произойдёт следующее:

Код проверит, существует ли vue.translation → Успешно!
Затем код проверит, существует ли vue.translation.NL → Ошибка!

Если эту ошибку не обработать, сломается весь блок кода.

Чтобы этого избежать, используем выражение ? или выражение &&. По сути они делают одно и то же: безопасно проверяют следующее значение и, если его нет, не дают блоку кода выполниться.

Пример использования ?:

<body id="vue">
    <div v-if="vue.translation?.[vue.aio.visit.country_code]?.HEADER">
	    {{vue.translation[vue.aio.visit.country_code].HEADER}}
		</div>
</body>

Пример использования &&:

<body id="vue">
    <div v-if="vue.translation && vue.translation[vue.aio.visit.country_code] && vue.translation[vue.aio.visit.country_code].HEADER">
	    {{vue.translation[vue.aio.visit.country_code].HEADER}}
		</div>
</body>