Краткое введение в Vue.js - Super Mario Pixel Art

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

Рисование графики может быть не самым популярным вариантом использования Vue.js, но в этом посте я хотел привести пример, который, как я надеялся, понравится другим - пиксельная графика Super Mario (вдохновленная Пикселями данных), которая рисует с пиксельная графика и обновляет цвета, используя реактивность Vue.js при нажатии на пиксель. Вы можете найти весь код в моем репозитории.

Планирование

Перед тем, как начать писать код, я планировал создать два компонента Vue для реализации этого рисунка:

Пиксель - это компонент pixel.vue, принимающий значения RGB и размер пикселя. Это div (вместо элемента HTML canvas) и будет генерировать событие, когда по нему щелкают, чтобы уведомить его родительский компонент.

Canvas ( canvas.vue) - это контейнер, который инициализирует пиксельные компоненты на основе двухмерного массива с цветами каждого пикселя.

pixel.vue

.vue файл может содержать блоки шаблонов, стилей JavaScript и CSS, поэтому весь необходимый код для компонента может существовать в одном файле.

В теге script color (background color) и size(pixel size) - обязательные свойства (реквизиты), передаваемые при инициализации компонента. Если указывать type и required в props нет необходимости, его можно упростить до props: ['color', 'size']. Значения свойств применяются к pixelStyle() вычисляемому свойству, которое привязано к div.style. Если значение свойства color изменится, оно будет распространено на шаблон через вычисляемое свойство, а фон div.l-pixel будет обновлен. v-bind: (полный синтаксис) или : (сокращение) используется для привязки свойства или данных в шаблоне. Распространение такое:

color change in canvas.vue >>> "color" in "props" in pixel.vue >>> "pixelStyle()" in "computed" >>> style attribute of "div.l-pixel" in "<template>" 

v-on: (полный синтаксис) или @ (сокращение) используется для привязки обработчика событий, а событие щелчка div.l-pixel привязано к onPixelClick в методах. Метод сгенерирует событие pixel-click с информацией о цвете, которую будет прослушивать компонент холста.

main.js

Главный файл JavaScript инициализирует компонент canvas.vue, и здесь мы можем видеть данные, предоставленные для свойств canvas.vue. this.pixelData содержит произвольные названия цветов пикселей, а this.colors - это словарь цветов (объект JavaScript) для включения значений RGB. (Его можно улучшить, создав class Color,, который содержит как название цвета, так и информацию RGB.)

canvas.vue

Он отображает пиксели с pixelData, переданным из main.js с использованием v-for.

<div v-for="(row, rowIndex) in pixelData" :key="rowIndex" :style="{height: pixelSize}">
    <n-pixel v-for="(col, colIndex) in row" :key="colIndex" :color="colors[col]"
             :size="pixelSize" @pixel-click="onPixelClick">
    </n-pixel>
</div>

Компонент pixel зарегистрирован с component: { NPixel },, который является эквивалентом components: {'n-pixel': NPixel}, а префикс n- используется для предотвращения конфликта имен компонентов на тот случай, если pixel уже зарегистрирован как глобальный компонент.

В <n-pixel v-for, col - это имя цвета (например, «C», «_»), которое происходит от main.js, а :color="colors[col]" отправляет значение RGB (например, «255, 255, 255») в компонент pixel. colIndex - это индекс текущего элемента (0, 1, 2,…). Он передается в атрибут key, который Vue.js требует уникального значения для v-for.

@pixel-click="onPixelClick" слушает событие pixel-click от компонента pixel и onPixelClick меняет цвет в словаре (объект JavaScript, this.colors, вместо того, чтобы перебирать весь двумерный массив this.pixelData, и в результате реакции цвета фона пикселей обновляются!

Следующий

Если вы хотите продолжить изучение Vue.js, я бы порекомендовал прочитать некоторые из их замечательных документов. Также есть отличная бесплатная серия видео - Learn Vue 2: Step By Step в Laracast. На мой взгляд, всегда полезно написать небольшое приложение, чтобы лучше понять библиотеку или фреймворк. Вы можете найти интересную тему или преобразовать часть вашего предыдущего кода в новую библиотеку. Хотя всегда полезно читать документы, чтобы узнать больше, преимущества и недостатки различных библиотек или фреймворков часто легче увидеть, когда вы начнете писать код.