Cacher is the code snippet organizer for pro developers

<?

1. Подключаем vue 
\Bitrix\Main\UI\Extension::load("ui.vue");  

2. Подключаем расширение lazyload 
\Bitrix\Main\UI\Extension::load("ui.vue.directives.lazyload");  

3. Устанавливаем в html:
id="components-demo" - идентификатор элемента
v-bx-lazyload - директиву
data-lazyload-src - путь до основного изображения
data-lazyload-error-src - путь до изображения, если не удалось загрузить основное
src - путь до прелоадера

<div id="components-demo">
<img v-bx-lazyload data-lazyload-src="/upload/iblock/250/learning.png" data-lazyload-error-src="/images/px.png" src="/images/px.png" alt="Разработчик Bitrix Framework" />
</div>


4. Создаем компонент 
<sc ript>
BX.Vue.create({
    el: '#components-demo'  
});
</sc ript>

?>