Знакомство с созданием изображений на чистом CSS. Часть третья, продвинутая

В этом руководстве будет рассмотрена возможность создания интерактивных картинок на CSS с использованием Vue.js. Мы создадим рабочий стол разработчика с интерактивными элементами.

Предполагается, что вы уже прочитали две предыдущие части и понимаете, каким образом создаются картинки на чистом CSS. В этой части руководства будут описаны компоненты, из которых состоит изображение, а не сам процесс его создания.

Эта статья — последняя в серии. Ссылки на предыдущие части:

1. Для начинающих;
2. Для продвинутых;

Для начала ознакомьтесь с уже готовым шаблоном. На нём будет строиться вся интерактивная часть картинки.

Также обратите внимание на финальную версию интерактивного изображения, чтобы знать, что следует ожидать от урока.

Итак, давайте рассмотрим главные цели этого руководства. Нам нужно будет:

1. Разбить по частям CSS-изображение.
2. Немного разобраться с Vue.js.
3. Сделать так, чтобы определённые элементы запускались при клике на них.
4. Определить поведение для каждого интерактивного элемента.

Остальные задачи будут поставлены и решены в ходе изложения. Но сначала давайте глянем на итоговую CSS-картинку.

Разбор CSS-картинки

Если вы действительно хотите научиться создавать качественные изображения на CSS или в векторных редакторах, то вам следует научиться смотреть на изображения, как на отдельные фрагменты.

Возможно, вам стоит потратить некоторое время на умение разбивать изображение на отдельные части. Попробуйте выписать все составляющие компоненты, из которых состоит изображение. Сравните свой результат с результатом ниже.

Основные компоненты:

• стол;
• ноутбук;
• мышь;
• стикеры;
• ручка;
• game boy.

Стол

Основой для стола служит плоскость, которая будет контейнером для CSS-изображения. У него будет светло-коричневый цвет, подобный древесному.

Затем создаётся тёмно-коричневая полоса снизу.

Конечное изображение стола также будет иметь чередующиеся с тёмно-коричневыми светло-коричневые полосы.

Теперь давайте рассмотрим составляющие ноутбука.

Ноутбук

Сначала создаётся верхняя часть ноутбука.

Затем добавляется экран.

После этого присоединяется нижняя часть корпуса ноутбука.

И тачпада.

Наконец, добавляем логотип на экран. Кстати, он создаётся не с помощью чистого CSS. Логотип добавляется с помощью HTML-тега <img/>.

Восхитительно!

Мышь

Мышь состоит из округлённого прямоугольника (корпуса) и обычного маленького прямоугольника (колесика).

Стикеры

Стикеры состоят из простых квадратов с полосками внизу.
С полосками:

Ручка

Ручка состоит из трёх геометрических фигур: малого прямоугольника, большого прямоугольника и треугольника.

Game boy

Game boy — более сложный элемент изображения, чем другие.
Он представляет собой округлённый прямоугольник в виде контейнера. Левый нижний угол округлён чуть больше других.

Затем добавляются два прямоугольника — составляющие экрана. Нижний прямоугольник должен быть больше верхнего.

Затем добавляется кнопка-крестовина:

Круглые и прямоугольные (с закруглением) кнопки:

Теперь рабочее место собрано:

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

Обзор Vue.js

Vue.js — JavaScript-фреймворк для создания прогрессивных веб-приложений. Он набирает популярность благодаря своей читабельности, доступности и маленькому размеру файлов в сравнении с альтернативами вроде Angular 2 и React.
Vue.js можно использовать для создания полноценных динамических веб-приложений. Кроме того, вы можете добавить дополнительную функциональность к существующему сайту или веб-приложению с помощью Vue.js.

Некоторые люди уверены, что Vue.js идеально подходит для фронтенд-разработчиков, которые проектируют и создают небольшие и забавные приложения. С его помощью можно легко делать элементы интерактивными, поэтому он так полюбился многим разработчикам.

Объяснить все детали Vue.js в одном блоге невозможно, поэтому предлагаем вам позже обратиться за подробностями к специальному курсу.

Сейчас давайте откроем шаблон, предложенный в начале статьи, и начнем добавлять в него Vue.js.

Создание сцен

На данный момент какой-либо код на Vue.js отсутствует. Перед вами находится рабочее место программиста (дизайнера) в виде статичного изображения на CSS.

Чтобы добавить картинке интерактивности, подключим к ней разные «сцены». Под сценой в этом случае понимается обращение к определённому элементу изображения и взаимодействие с ним. Полное изображение — главная сцена, из которой мы получаем доступ к другим. Например, при клике на стикеры откроется сцена со стикером, которая перекроет главную сцену.

Давайте глянем на сами сцены, чтобы немного прояснить ситуацию.

1. Вид по умолчанию (картинка выше).

2. Жёлтый стикер.

3. Красный стикер.

4. Game boy.

5. Ноутбук.

Каждая сцена представляет собой изображение на CSS, обёрнутое вокруг контейнеров. Все эти сцены можно вынести на первый план. Также нужно будет добавить несколько новых классов, чтобы всё выглядело действительно так, будто картинка была приближена.

Обратите внимание на сцену с ноутбуком.

HTML

			<div class="box">
    <div id="grains">
    <div class="grain-1"></div>
    <div class="grain-2"></div>
    <div class="grain-3"></div>
    <div class="grain-4"></div>
    <div class="grain-5"></div>
    <div class="grain-6"></div>
  </div>
    <div class="computer-container-large">
    <div class="pen">
      <div class="cap"></div>
      <div class="end"></div>
    </div>
    <div class="screen">
      <div class="logo-container">
     <img class="screen-logo" />
      </div>
      <div class="progress-bar">
        <div class="progress-fill"></div>
              
      </div>
    </div>
    <div class="bottom-computer">
      <div class="keyboard-container">
       <div id = "keyboard-row-1">
        <div class="top-bar-1">
        </div>
        <div class="top-bar-2">
        </div>
        <div class="top-bar-3">
        </div>
        <div class="top-bar-4">
        </div>
        <div class="top-bar-5">
        </div>
        <div class="top-bar-6">
        </div>
        <div class="top-bar-7">
        </div>
        <div class="top-bar-8">
        </div>
       </div>
        <div id = "keyboard-row-2">
        <div class="mid-bar-1">
        </div>
        <div class="mid-bar-2">
        </div>
        <div class="mid-bar-3">
        </div>
        <div class="mid-bar-4">
        </div>
        <div class="mid-bar-5">
        </div>
        <div class="mid-bar-6">
        </div>
        <div class="mid-bar-7">
        </div>
        <div class="mid-bar-8">
        </div>
       </div>
        
        <div id = "keyboard-row-3">
        <div class="bottom-bar-1">
        </div>
        <div class="bottom-bar-2">
        </div>
        <div class="bottom-bar-3">
        </div>
        <div class="bottom-bar-4">
        </div>
        <div class="bottom-bar-5">
        </div>
        <div class="bottom-bar-6">
        </div>
        <div class="bottom-bar-7">
        </div>
        <div class="bottom-bar-8">
        </div>
       </div>
      </div>
      <div class="trackpad"></div>
    </div>
    <div class="mouse-large">
      <div class="tracker"></div>
    </div>
  </div>
  </div>
		

Сцена с жёлтыми стикерами

Для начала нужно добавить оболочку экземпляра Vue.js. Каждый экземпляр Vue.js имеет данные и функции для управления данными. Каждая сцена — отдельный экземпляр, который будет включаться в работу. Для него по умолчанию будет добавлен следующий код:

			var desk = new Vue({
  el: "#desk",
  data: {
},
  methods: {

   }
})
		

Только что был объявлена переменная Vue под названием desk. Затем добавляется el со значением #desk. Это служит для связки переменной с контейнером div, у которого id — desk, в HTML-коде.

Данные будут встроены в HTML-код. Благодаря методам существует возможность изменять данные. Поэтому приложение становится динамичным. Например, есть данные, которые представляют собой заголовок. Их можно изменить (Hello World → метод → Hello Vue). Функции в методах вызываются путём использования обработчиков событий. Мы вернёмся к этому позже. А сейчас давайте обернём контейнер div с id #desk вокруг кода картинки на CSS, чтобы подключить экземпляр.

			<div id="desk">
  <div class="box">...</div>
</div>
		

Отлично, теперь давайте добавим некоторые данные. Одним из простых способов добавления новых данных является использование URL-адреса.

Давайте добавим некоторые данные с названием screenLogo, которые будут содержать URL:

			var desk = new Vue({
  el: "#desk",
  data: {
   screenLogo:"http://apple-wholesale-store.com/wp-  content/uploads/2017/01/Apple_Logo_Solid_White-1.png"
  },
  methods: {
    
  }
})
		

Ничего не изменилось. Нужно связать SRC с тегом img в HTML-коде c экземпляром Vue.js.

Для этого можно добавить v-bind:src= “screenLogo”. Это нужно для проверки экземпляра на наличие screenLogo. Затем проверяется URL. Давайте обратимся к коду и используем URL в виде src.

			<div class="screen">
  <div class="logo-container">
    <img v-bind:src= “screenLogo” class="screen-logo" />
  </div>
</div>
		

Теперь на экране у вас должен появиться логотип компании Apple.

Довольно аккуратно вышло. Именно так и работает Vue.js с HTML-кодом.

Теперь после того как был добавлен логотип, нужно добавить некоторые другие данные, которые будут отвечать за отображение сцены.

			var desk = new Vue({
  el: "#desk",
  data: {
    showDesk: true,
    screenLogo: "http://apple-wholesale-store.com/wp-content/uploads/2017/01/Apple_Logo_Solid_White-1.png"
  },
  methods: {
    
  }
})
		

showDesk может быть true и false. Если showDesk — true, то сцена будет отображена. Если showDesk — false, то сцена не будет отображена. Но нужно сделать так, чтобы по умолчанию она отображалась.

Теперь нужно сообщить HTML-коду, чтобы он отображал полную CSS-картинку по умолчанию, если showDesk — true.

Это можно сделать с помощью v-if=”showDesk”, помещая его в тот же контейнер, что и id стола.

			<div v-if="showDesk" id="desk">
<!-- rest of our pure css image -->
</div>
		

Использование v-if позволяет контролировать сцены в HTML.

Теперь нужно добавить сцену с жёлтыми стикерами и её собственный экземпляр Vue.js. Добавим код для перехода и выхода из сцены.

Используйте следующий код:

			<div class="box">
  <div id="grains">
    <div class="grain-1"></div>
    <div class="grain-2"></div>
    <div class="grain-3"></div>
    <div class="grain-4"></div>
    <div class="grain-5"></div>
    <div class="grain-6"></div>
  </div>
  <div class="sticky-note-large-yellow">
    <input type="text"/>
  </div>
</div>
		

Теперь одновременно отображаются две сцены:

Давайте зададим правильные настройки и сделаем экземпляр Vue.js для жёлтых стикеров и добавим флаг, который изначально будет иметь значение false.

Код JavaScript:

			var stickyYellow = new Vue({
  el: "#stickyYellow",
  data: {
    showStickyYellow: false
  },
  methods: {
  }
})
		

Код HTML:

			<div v-if="showStickyYellow" id="stickyYellow">
<!-- scene's pure css image -->
</div>
		

Теперь должна отображаться только первая сцена — полный рабочий стол разработчика. Теперь нужно сделать так, чтобы при нажатии на жёлтый стикер мы попадали на сцену со стикерами в крупном плане.

Для этого нужно будет добавить обработчик событий в первую сцену и функцию processSticky, которая и выполнит переключение.

			<div id="sticky-notes">
    <div class="sticky-note-1">
      <div class="sticky-text">
      </div>
      <div class="bottom-strip-1">
      </div>
    </div>
    <div @click="processSticky(2)" class="sticky-note-2">
      <div class="sticky-text">
      </div>
      <div class="bottom-strip-2">
      </div>
    </div>
</div>
		

JS-код:

			//under methods in var desk
 processSticky: function(selection) {
      
      
}
		

@click=processSticky в HTML-коде проверяет, есть ли соответствующая функция в коде при клике на div. Это обработчик событий.

Синтаксис:

			@[event] = “[имя функции]”
		

Используется параметр 2, потому что processSticky будет обрабатывать клики на жёлтые и на красные стикеры в полной сцене и переключать соответствующую дочернюю сцену. 2 значит, что сцена с жёлтым стикером должна быть вызвана. Чуть позже сделаем так, чтобы при параметре 1 вызывалась сцена с красным стикером.

Давайте добавим логику в processSticky:

			processSticky: function(selection) {
    if(selection === 1) {
       //То же самое, но только для красных стикеров
     } else if(selection === 2){
       this.showDesk = false
       stickyYellow.showStickyYellow = true
     }
   }
		

Сначала происходит анализ входящего параметра (1 или 2), в зависимости от чего выполняется тот или иной алгоритм. Мы использовали параметр 2, что привело к выполнению следующих событий:

1. Скрытие экземпляра сцены по умолчанию — стола.

			this.showDesk = false
		

showDesk — опция, которая отвечает за отображение стола (основной сцены). Для перехода к сцене с жёлтым стикером нужно будет изменить значение showDesk на false.

Мы ссылаемся на данные из метода, используя this. this используется из-за того, что showDesk находится в том же экземпляре, что и текущая функция processSticky. Поэтому используется this.showDesk со значением false.

1. Переключение с основной сцены на сцену с жёлтым стикером, изменяя флаг, отвечающий за отображение дочерней сцены — StickyYellow.

			stickyYellow.showStickyYellow = true
		

Как вы видите, this не используется для ссылки на данные под названием showStickyYellow. Почему? Нужно попытаться изменить showStickyYellow из processSticky, который находится в другом экземпляре Vue с именем stickyYellow. Поэтому указывается экземпляр Vue, в котором содержатся данные, которые нужно изменить, stickyYellow, затем данные, а затем и значение true.

Можно протестировать и перейти к сцене с жёлтыми стикерами, кликнув на них на основной сцене.

Смотрится отлично. Но у нас нет возможности вернуться к основной сцене (только если обновим страницу, тогда вернёмся). Нужно бы добавить эту возможность, а затем включить ещё одну интересную функцию в сцену со стикерами.

Чтобы перейти к сцене с жёлтыми стикерами, сделаем следующиe шаги:

1. Добавим обработчик событий для перехода к функции.
2. Добавим код, отвечающий за выход из основной сцены и переход к дочерней.

Для возврата к основной сцене следует выполнить те же самые действия. За исключением того, что обработчик событий и функция будут находиться в экземпляре Vue stickyYellow.

В HTML-код для сцены с жёлтыми стикерами добавляется следующий обработчик событий:

			<div class="sticky-note-large-yellow">
    <input @keyup.enter="processText" v-model="stickyText" type="text"/>
  </div>
		

Теперь добавляется функция processText.

			var stickyYellow = new Vue({
  el: "#stickyYellow",
  data: {
    showStickyYellow: false
  },
  methods: {
    processText: function(){

    }
  }
})
		

С функцией processText будут выполнены противоположные последней функции действия. Для showStickyYellow будет поставлено значение false, а для showDesk — true.

			var stickyYellow = new Vue({
  el: "#stickyYellow",
  data: {
    showStickyYellow: false
  },
  methods: {
    processText: function(){
      this.showStickyYellow = false
      desk.showDesk = true
    }
  }
})
		

Можно посмотреть на результат, кликнув на жёлтые стикеры. Затем при клике в центре стикера появится поле для ввода данных.

Когда поле ввода данных будет активным, нажмите клавишу Enter.

Вы будете возвращены к основной сцене.

Как это работает? В роли обработчика событий выступал keyup.enter. Keyup относится к событию нажатий клавиши. .enter означает, что должна быть нажата клавиша Enter.

Поэтому при нажатии Enter вызывается processText, которая отключает дочернюю сцену и возвращает к основной.

Отлично! Теперь можно переключаться между сценами. Однако нужно сделать кое-что ещё.

Было бы неплохо, если введённые данные в поле ввода сохранялись при возврате к основной сцене.

Как же это можно сделать? Для начала нужно добавить некоторые данные в экземпляр stickyYellow с пустой строкой.

JS-код:

			data: {
    showStickyYellow: false,
    stickyText: ""
  }
		

Чтобы сохранить stickyText со значением введённых данных, будет использоваться Vue.js. К счастью, Vue.js делает этот процесс простым. Можно использовать v-model = "stickyText", поэтому stickyText также равен тому, что содержит в себе тег input.

HTML-код:

			<div class="sticky-note-large-yellow">
    <input @keyup.enter="processText" v-model="stickyText" type="text"/>
  </div>
		

Здорово! Теперь нужно сделать так, чтобы значение stickyText дублировалось в основной сцене. Итак, добавим данные к экземпляру desk, в котором будут содержаться данные, введённые в сцене с жёлтыми стикерами.

			var desk = new Vue({
  el: "#desk",
  data: {
    showDesk: true,
    stickyTextYellow: "",
    screenLogo: "http://apple-wholesale-store.com/wp-content/uploads/2017/01/Apple_Logo_Solid_White-1.png"
  }
  //методы
})
		

Затем добавим значение stickTextYellow в сцену с жёлтыми стикерами.

			<div @click="processSticky(2)" class="sticky-note-2">
      <div class="sticky-text">
      {{stickyTextYellow}} 
      </div>
      <div class="bottom-strip-2">
      </div>
    </div>
		

Vue с лёгкостью позволяет вставлять данные, используя следующий синтаксис: {{ [data in instance] }}.

Функциональность почти настроена. Нужно теперь закончить работу с функцией processText в экземпляре stickyYellow.

			methods: {
    processText: function(){
      desk.stickyTextYellow = this.stickyText
      this.showStickyYellow = false
      desk.showDesk = true
    }
  }
		

Опять же, обращаемся к stickyTextYellow через desk, поскольку этот экземпляр не является локальным.

Теперь работа над функциональностью завершена.

Сцена с красными стикерами

Для этой сцены выполняются все те же самые действия, что и со сценой с жёлтыми стикерами.

JS-код экземпляра desk :

			var desk = new Vue({
  el: "#desk",
  data: {
    showDesk: true,
    stickyTextYellow: "",
    stickyTextRed: "",
    screenLogo: "http://apple-wholesale-store.com/wp-content/uploads/2017/01/Apple_Logo_Solid_White-1.png"
  },
  methods: {
    processSticky: function(selection) {
      if(selection === 1) {
        this.showDesk = false
        stickyRed.showStickyRed = true      
      } else if(selection === 2){
        this.showDesk = false
        stickyYellow.showStickyYellow = true
      }
      
    }
}
		

HTML-код экземпляра desk:

			<div @click="processSticky(1)" class="sticky-note-1">
      <div class="sticky-text">
      {{stickyTextRed}} 
      </div>
      <div class="bottom-strip-1">
      </div>
    </div>
		

HTML-код экземпляр сцены с красными стикерами:

			<div v-if="showStickyRed" id="stickyRed">
<div class="box">
  <div id="grains">
    <div class="grain-1"></div>
    <div class="grain-2"></div>
    <div class="grain-3"></div>
    <div class="grain-4"></div>
    <div class="grain-5"></div>
    <div class="grain-6"></div>
  </div>
  <div class="sticky-note-large-red">
    <input @keyup.enter="processText" v-model="stickyText" type="text"/>
  </div>
</div>
</div>
		

JS-код экземпляр сцены с красными стикерами:

			var stickyRed = new Vue({
  el: "#stickyRed",
  data: {
    showStickyRed: false,
    stickyText: ""
  },
  methods: {
    processText: function(){
      desk.stickyTextRed = this.stickyText
      this.showStickyRed = false
      desk.showDesk = true
    }
  }
})
		

Если вы запутались, пока копировали и вставляли этот код, то можете обратиться к полному исходному коду.

Сцена с Game boy

Чем больше вы будете работать с Vue.js, тем лучше поймёте, на что он способен.

Теперь давайте добавим новую сцену.

Следующий HTML-код представляет новую сцену:

			<div v-if="showGameboy" id="gameboy">
<div class="box">
  <div id="grains">
    <div class="grain-1"></div>
    <div class="grain-2"></div>
    <div class="grain-3"></div>
    <div class="grain-4"></div>
    <div class="grain-5"></div>
    <div class="grain-6"></div>
  </div>
  <div class="gameboy-large">
    <div class="gameboy-screen-back">
      <div class="gameboy-dot"></div>
      <div class="gameboy-screen-front">
        <div class="game-container">
        <img class="screen-logo" :src="screenLogo" />
      </div>
      </div>
    </div>
    <div class="dpad-container">
      <div class="horizontal-dpad"></div>
      <div class="vertical-dpad"></div>
    </div>
    <div class="button-1"></div>
    <div class="button-2"></div>
    <div class="start"></div>
    <div class="select"></div>
  </div>
</div>
</div>
		

Затем добавим оболочку экземпляра Vue Gameboy, ShowGameboy и screenLogo.

JS-код:

			var gameboy = new Vue({
  el: "#gameboy",
  data: {
    showGameboy: false,
    screenLogo: "http://lparchive.org/Pokemon-Blue/Update%2001/1-capture_02042010_120644.png"
  },
  methods: {
    
  }
})
		

Отлично! Как и в прошлый раз, давайте добавим переключение между основной сценой и дочерней.

В основную сцену нужно добавить функцию, обрабатывающую переключение между сценами при клике на Gameboy.

Поэтому можно добавить следующий HTML-код в основную сцену:

			<div @click="processGameboy" class="gameboy">
    <div class="gameboy-screen-back">
      <div class="gameboy-screen-front"></div>
    </div>
    <div class="dpad-container">
      <div class="horizontal-dpad"></div>
      <div class="vertical-dpad"></div>
    </div>
    <div class="button-1"></div>
    <div class="button-2"></div>
    <div class="start"></div>
    <div class="select"></div>
  </div>
		

Теперь нужно определить processGameboy и добавить переключение.

JS-код:

			//methods in desk instance
    processGameboy: function(){
      this.showDesk = false
      gameboy.showGameboy = true
    }
		

Итак, при клике на Gameboy в основной сцене будет вызвана функция processGameboy, которая отключает showDesk и включает showGameboy. Во время теста нажатие на Gameboy приведёт нас к сцене Gameboy.

Теперь нужно добавить функцию в экземпляр Gameboy, а также обработчик событий для возврата к основной сцене.

Добавим обработчик событий на нажатие на круглые кнопки:

			<div @click="backToDesk" class="button-1"></div>
<div @click="backToDesk" class="button-2"></div>
		

Теперь добавим функцию backToDesk в экземпляре Gameboy.

			backToDesk: function(){
      this.showGameboy = false
      desk.showDesk = true
    }
		

Теперь мы можем перейти на сцену Gameboy и вернуться на основную.

Далее добавим основные функции для этой сцены.

Нужно сделать так, чтобы изображение игры и красная точка появлялись при нажатии на кнопки.

Для этого нужно будет добавить данные для флага, чтобы контролировать внешний вид этих элементов и URL для src картинки игры (как это было сделано с логотипом Apple).

JS-код:

			data: {
    showGameboy: false,
    on: false,
    screenLogo: "http://lparchive.org/Pokemon-Blue/Update%2001/1-capture_02042010_120644.png"
  }
		

Затем добавим HTML-код, чтобы изображение отображалось, если on=true. Также добавим v-bind:src="screenLogo".

			<div class="gameboy-screen-back">
      <div v-if="on" class="gameboy-dot"></div>
      <div class="gameboy-screen-front">
        <div v-if="on" class="game-container">
        <img class="screen-logo" :src="screenLogo" />
      </div>
      </div>
    </div>
		

Наконец добавим новую функцию в экземпляр Gameboy для обработки изменений on с false на true при нажатии на круглые кнопки и на соответствующие обработчики событий.

JS-код:

			methods: {
    startGameboy: function(){
      this.on = true
    },
     backToDesk: function(){
      this.showGameboy = false
      desk.showDesk = true
    }
  }
		

HTML-код:

			<div @click="backToDesk" class="button-1"></div>
<div @click="backToDesk" class="button-2"></div>
<div @click="startGameboy" class="start"></div>
<div @click="startGameboy" class="select"></div>
		

Теперь посмотрим, как это всё работает:

Сцена с компьютером

Наконец, последняя сцена. Здесь всё будет довольно простою

Сейчас просто скопируйте и вставьте следующий HTML-код:

			<div v-if="showComputer" id="computer">
  <div class="box">
    <div id="grains">
    <div class="grain-1"></div>
    <div class="grain-2"></div>
    <div class="grain-3"></div>
    <div class="grain-4"></div>
    <div class="grain-5"></div>
    <div class="grain-6"></div>
  </div>
    <div class="computer-container-large">
    <div class="pen">
      <div class="cap"></div>
      <div class="end"></div>
    </div>
    <div class="screen">
     <div class="logo-container">
     <img class="screen-logo" :src="screenLogo" />
      </div>
    </div>
    <div class="bottom-computer">
      <div class="keyboard-container">
       <div id = "keyboard-row-1">
        <div class="top-bar-1">
        </div>
        <div class="top-bar-2">
        </div>
        <div class="top-bar-3">
        </div>
        <div class="top-bar-4">
        </div>
        <div class="top-bar-5">
        </div>
        <div class="top-bar-6">
        </div>
        <div class="top-bar-7">
        </div>
        <div class="top-bar-8">
        </div>
       </div>
        <div id = "keyboard-row-2">
        <div class="mid-bar-1">
        </div>
        <div class="mid-bar-2">
        </div>
        <div class="mid-bar-3">
        </div>
        <div class="mid-bar-4">
        </div>
        <div class="mid-bar-5">
        </div>
        <div class="mid-bar-6">
        </div>
        <div class="mid-bar-7">
        </div>
        <div class="mid-bar-8">
        </div>
       </div>
        
        <div id = "keyboard-row-3">
        <div class="bottom-bar-1">
        </div>
        <div class="bottom-bar-2">
        </div>
        <div class="bottom-bar-3">
        </div>
        <div class="bottom-bar-4">
        </div>
        <div class="bottom-bar-5">
        </div>
        <div class="bottom-bar-6">
        </div>
        <div class="bottom-bar-7">
        </div>
        <div class="bottom-bar-8">
        </div>
       </div>
      </div>
      <div class="trackpad"></div>
    </div>
    <div class="mouse-large">
      <div class="tracker"></div>
    </div>
  </div>
  </div>
</div>
		

Теперь можно добавить оболочку нового экземпляра Vue и showComputer, которые выделены выше.

JS-код:

			var computer = new Vue({
  el: "#computer",
  data: {
    showComputer: false,
    screenLogo: "http://apple-wholesale-store.com/wp-content/uploads/2017/01/Apple_Logo_Solid_White-1.png"
  },
  methods: {
 }
})
		

Попробуйте сделать это самостоятельно, так как у нас уже было несколько примеров. Нужно сделать так, чтобы можно было перейти на эту сцену при клике по компьютеру. А затем сделать так, чтобы можно было выйти из этой сцены.

Что у вас должно быть:

Методы экземпляра Desk

			processComputer: function(){
      this.showDesk = false
      computer.showComputer = true
}
		

HTML-код сцены со столом

			<div @click="processComputer" class="computer-container">
    <div class="pen">
      <div class="cap"></div>
      <div class="end"></div>
    </div>
<!-- .... -->
		

Методы экземпляра Computer

			backToDesk: function(){
      this.showComputer = false
      desk.showDesk = true
}
		

HTML-код сцены с компьютером

			<div @click="backToDesk" class="mouse-large">
  <div class="tracker"></div>
</div>
		

Заключение

Как и говорилось раньше, объяснение всех принципов работы Vue.js в виде блога — сложная задача. Поэтому рекомендуем вам ознакомиться с этим фреймворком на его официальном сайте или на сторонних ресурсах, которые вам покажутся хорошими.